将 UWP 标头模板中的图标与 xamarin.forms 一起使用
Posted
技术标签:
【中文标题】将 UWP 标头模板中的图标与 xamarin.forms 一起使用【英文标题】:Using icons in UWP header template with xamarin.froms 【发布时间】:2017-08-16 06:38:13 【问题描述】:我正在使用 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 中的每个页面。
我做错了什么?
【问题讨论】:
【参考方案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();
为Source="Binding Icon,Converter=StaticResource imageConverter"
设置绑定时Icon
的返回类型为Xamarin.Forms.FileImageSource
(虽然使用了imageConverter,但没有达到预期的效果)。而您使用Windows.UI.Xaml.Controls.Image
作为您的TabHeaderTemplate
。
Image.Source
只接受 Windows.UI.Xaml.Media.ImageSource
类型值。
因此,您可以像上面的代码一样自定义转换器。
【讨论】:
您的转换器示例有效。似乎无法为 HeaderTemplate 使用标准的 Xamarin.Forms 图像转换器。以上是关于将 UWP 标头模板中的图标与 xamarin.forms 一起使用的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 VisualStudio 2019 为 Microsoft.Toolkit.Uwp.UI.Controls 中的控件获取 UWP 的默认模板(样式代码)?