在 xamarin.froms 的 UWP header 模板中使用图标

Question

我正在使用 Xamarin.Forms 编写应用程序，我想在 UWP 应用程序的标签页中显示图标。为此，我尝试使用自定义渲染器。自定义渲染器代码是

class TabbedPageWithIconsRenderer : TabbedPageRenderer
{
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
        base.OnElementChanged(e);

        if (e.NewElement != null && Control != null)
        {
            Control.HeaderTemplate = App.Current.Resources["TabHeaderTemplate"] as DataTemplate;
        }
    }
}

数据模板样式为：

<forms:ImageConverter x:Key="imageConverter" />

    <DataTemplate x:Key="TabHeaderTemplate">
        <StackPanel >
            <Image
                HorizontalAlignment="Center"
                Margin="0,12,0,0"
                Height="24"
                Width="24"
                Source="{Binding Icon, Converter={StaticResource imageConverter}}" />
            <TextBlock
                FontFamily="Segoe UI"
                Text="{Binding Title}"
                Style="{StaticResource CaptionTextBlockStyle}"
                LineStackingStrategy="BlockLineHeight"
                LineHeight="14"
                MaxLines="2"
                IsTextScaleFactorEnabled="False"
                TextAlignment="Center"
                HorizontalAlignment="Center"
                Margin="2,5,2,7" />
        </StackPanel>
    </DataTemplate>

问题是标题工作正常，但图标从未出现，但它们已正确分配给 Forms.Xaml 中的每个页面。

我做错了什么？

Answer 1

我已经测试了你的代码并重现了你的问题。我通过自定义新图像转换器解决了这个问题，如下代码。

public class MyImageConverter:Windows.UI.Xaml.Data.IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        var temp = (value as FileImageSource).File;
        Windows.UI.Xaml.Media.ImageSource source = new BitmapImage(new Uri(temp));
        return source;
    }

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

Icon的return类型是Xamarin.Forms.FileImageSource当你为Source="{Binding Icon,Converter={StaticResource imageConverter}}"设置绑定时（虽然你使用了imageConverter，但没有达到预期的效果）。你用 Windows.UI.Xaml.Controls.Image 作为你的 TabHeaderTemplate。 Image.Source 只接受 Windows.UI.Xaml.Media.ImageSource 类型的值。所以你可以像上面的代码一样自定义一个转换器。

在 xamarin.froms 的 UWP header 模板中使用图标

Using icons in UWP header template with xamarin.froms

xaml

uwp

xamarin.forms

xamarin.uwp