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

【问题标题】：Tab icons in a Xamarin.Forms UWP TabbedPage?Xamarin.Forms UWP TabbedPage 中的选项卡图标？
【发布时间】：2018-05-05 09:44:57
【问题描述】：

在 Xamarin.Forms 中组合 TabbedPage 时，如何让 UWP 使用页面的 Icon 属性？

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

这是我的 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>

【问题讨论】：

标签： xamarin.forms uwp xamarin.uwp tabbedpage

【解决方案1】：

我在这里概述了这是如何实现的 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 渲染的那个。因此，新样式包含一个 Image，我们在其中将 Source 数据绑定到 Xamarin Icon 属性。

<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();
    }
}

【讨论】：

你可以直接在答案中从你的外部链接provide some more relevant details 吗？
看起来图标现在可以在最新的 UWP 实现中使用，但对布局没有太多控制。我认为使用样式替换是关键——例如，你知道如何使用这种技术将选项卡移动到底部吗？
说实话，我还没有看过新的实现。我想您首先需要弄清楚 UWP 目标中使用的是什么控件。有了它，也许你可以找到一种改变布局的方法......比如stackoverflow.com/questions/35482341/…，如果它是一个枢轴控制。

【解决方案2】：

目前，UWP TabbedPage renderer 根本不使用 Icon 属性，因此获取选项卡图标将需要自定义渲染器。即使是官方的 UWP 样本实际上似乎也没有这个功能，requiring a custom UserControl。

Android TabbedPageRenderer 和 iOS TabbedRenderer，甚至是 macOS TabbedPageRenderer，使用 Icon 属性来调整选项卡 UI，但 UWP 渲染器需要更新才能使其工作。

【讨论】：

同意，谢谢。不过，我还得再等一个小时。