代码之家 › 专栏 › 技术社区 › patridge jonathanpeppers

Xamarin中的选项卡图标。表单UWP选项卡页?

tabbedpage xamarin.uwp uwp xamarin.forms

4

patridge jonathanpeppers · 技术社区 · 8 年前

当把一个在Xamarin。表单,如何让UWP使用页面的偶像所有物

它 looks like UWP could support this 如果我正确配置表单属性/文件,那就好了。

这是我的标签页XAML。这些图标都是为iOS和Android设置的,即使是UWP中的页面图像也能很好地呈现(这意味着文件可能正确地存在于项目中)。

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:tabbed"
             x:Class="tabbed.MainPage">
    <TabbedPage.Children>
        <local:InitialPage Title="Tab1" Icon="star.png" />
        <ContentPage Title="Tab2" Icon="gear.png">
            <ContentPage.Content>
                <StackLayout>
                    <Label Text="A nice label." />
                    <Image Source="star.png" /><!-- works here -->
                </StackLayout>
            </ContentPage.Content>
        </ContentPage>
    </TabbedPage.Children>
</TabbedPage>

2 回复 | 直到 8 年前

1

4

Depechie 8 年前

我在这里概述了这是如何可能的 http://depblog.weblogs.us/2017/07/12/xamarin-forms-tabbed-page-uwp-with-images/

简而言之,您需要更改默认值 HeaderTemplate UWP正在使用。但由于Xamarin的形成方式,这并不简单。因此,您需要将自定义模板注入到资源字典中。

示例项目位于Github上 https://github.com/Depechie/XamarinFormsTabbedPageUWPWithIcons

更长的细节:

你需要自己供应 TabbedPageStyle 然后切换出Xamarin用于UWP渲染的那个。因此,新样式包含一个图像,其中我们将源数据绑定到Xamarin图标属性。

<Style x:Key="TabbedPageStyle2" TargetType="uwp:FormsPivot">
    <Setter Property="HeaderTemplate">
        <Setter.Value>
            <DataTemplate>
                <StackPanel Orientation="Vertical">
                    <Image Source="{Binding Icon, Converter={StaticResource IconConverter}}" Width="15" Height="15" />
                    <TextBlock Name="TabbedPageHeaderTextBlock" Text="{Binding Title}"
                                Style="{ThemeResource BodyTextBlockStyle}" />
                </StackPanel>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

实际的样式切换是在 App.Xaml.cs 这样地

((Style)this.Resources["TabbedPageStyle"]).Setters[0] = ((Style)this.Resources["TabbedPageStyle2"]).Setters[0];

您还需要一个转换器,以确保图像控件理解Xamarin提供的图标源

public class IconConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value != null && value is Xamarin.Forms.FileImageSource)
            return ((Xamarin.Forms.FileImageSource)value).File;

        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

2

3

patridge jonathanpeppers 8 年前

就目前而言 UWP TabbedPage renderer 根本不使用图标属性,因此获取选项卡图标需要自定义渲染器。即使是官方的UWP样本实际上似乎也没有经过烘焙, requiring a custom UserControl .

这个 Android TabbedPageRenderer 和 iOS TabbedRenderer ,甚至 macOS TabbedPageRenderer ,使用图标属性调整选项卡UI,但UWP渲染器需要更新才能正常工作。