Xamarin.Forms UWP TabbedPage 中的选项卡图标?
Tab icons in a Xamarin.Forms UWP TabbedPage?
在 Xamarin.Forms 中放置 TabbedPage 时,如何让 UWP 使用页面的 Icon 属性?
它 looks like UWP could support this 很好,如果我正确配置我的表单 attributes/files。
这是我的 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>
目前,UWP TabbedPage renderer does not use the Icon property at all, so getting tab icons will require a custom renderer. Even the official UWP samples don't actually seem to have this baked-in, requiring a custom UserControl。
Android TabbedPageRenderer and iOS TabbedRenderer, and even the macOS TabbedPageRenderer,使用图标 属性 调整选项卡 UI,但 UWP 渲染器需要更新才能使其正常工作。
我在这里概述了这是如何实现的 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];
您还需要一个转换器来确保图像控件理解 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();
}
}
在 Xamarin.Forms 中放置 TabbedPage 时,如何让 UWP 使用页面的 Icon 属性?
它 looks like UWP could support this 很好,如果我正确配置我的表单 attributes/files。
这是我的 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>
目前,UWP TabbedPage renderer does not use the Icon property at all, so getting tab icons will require a custom renderer. Even the official UWP samples don't actually seem to have this baked-in, requiring a custom UserControl。
Android TabbedPageRenderer and iOS TabbedRenderer, and even the macOS TabbedPageRenderer,使用图标 属性 调整选项卡 UI,但 UWP 渲染器需要更新才能使其正常工作。
我在这里概述了这是如何实现的 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];
您还需要一个转换器来确保图像控件理解 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();
}
}