Xamarin.Forms UWP TabbedPage中的选项卡图标？

Question

Xamarin.Forms UWP TabbedPage中的选项卡图标？

xamarin.formsuwpxamarin.uwptabbedpage

4

在Xamarin.Forms中创建一个TabbedPage时，如何让UWP使用页面的Icon属性？如果我正确配置了我的Forms属性/文件，看起来UWP可以很好地支持这一点。这是我的TabbedPage 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>

- patridge

2个回答

3

目前，UWP TabbedPage renderer 并不使用 Icon 属性，因此需要自定义渲染器才能获取选项卡图标。即使官方的 UWP 示例似乎也没有内置此功能，需要自定义 UserControl。

Android TabbedPageRenderer、iOS TabbedRenderer，甚至macOS TabbedPageRenderer都使用“Icon”属性来调整选项卡的用户界面，但是UWP渲染器需要更新才能使其正常工作。

- patridge

好的，谢谢。不过我还得再等一个小时才能这样做。 - patridge

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Depechie · Accepted Answer

我在这里概述了如何实现此功能：http://depblog.weblogs.us/2017/07/12/xamarin-forms-tabbed-page-uwp-with-images/ 简而言之，您需要更改UWP正在使用的默认HeaderTemplate。但是由于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];

您还需要一个转换器，以确保Image控件理解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();
    }
}