Xamarin 表单选项卡式页面触发器属性不起作用答案

【问题标题】：Xamarin Forms Tabbed Page Trigger properties not workingXamarin 表单选项卡式页面触发器属性不起作用
【发布时间】：2021-06-21 10:04:01
【问题描述】：

我正在尝试关注这个sample 通过使用 font awesome 作为标签页的图标并使用触发器来更改字体颜色但是当我想使用 font awesome 应用样式时，我收到一个错误，即目标不存在 Property="IsChecked"。我在示例中注意到他们使用的是 shell，我如何使用常规选项卡式页面复制该示例？

在 app.XAML 上我有以下内容

<OnPlatform x:TypeArguments="x:String" 
            x:Key="FontAwesomeSolid">
            <On Platform="Android" 
            Value="Font5Solid.otf#Regular" />
            <On Platform="iOS" 
            Value="FontAwesome5Free-Solid" />
         </OnPlatform>
         <OnPlatform x:TypeArguments="x:String" 
            x:Key="FontAwesomeRegular">
            <On Platform="Android" 
            Value="Font5Regular.otf#Regular" />
            <On Platform="iOS" 
             Value="FontAwesome5Free-Regular" />
          </OnPlatform>

对于标签页，我有以下内容

<?xml version="1.0" encoding="utf-8"?>
<TabbedPage x:Name="Tab" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="pages.Views.HomeTabbedPage">
    <!--Pages can be added as references or inline-->

    <TabbedPage.Resources>
          <ResourceDictionary>
     <Style TargetType="Tab" x:Key="FollowTab">
                <Style.Triggers>
                <Trigger TargetType="TabbedPage"
                         Property="IsChecked" Value="False">
                    <Setter Property="Icon" >
                        <Setter.Value>
                            <FontImageSource FontFamily="{StaticResource FontAwesomeRegular}" Glyph="&#xf004;"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                <Trigger TargetType="Tab" 
                         Property="IsChecked" Value="True">
                    <Setter Property="Icon" >
                        <Setter.Value>
                            <FontImageSource FontFamily="{StaticResource FontAwesomeSolid}" Glyph="&#xf004;"/>
                        </Setter.Value>
                    </Setter>
                </Trigger>
                </Style.Triggers>
            </Style>
  </ResourceDictionary>
    </TabbedPage.Resources>

    <ContentPage Title="sample page"  />
    
</TabbedPage>

【问题讨论】：

标签： xaml xamarin.forms font-awesome eventtrigger tabbedpage

【解决方案1】：

要在普通的TabbedPage 中复制它，您可以尝试以下步骤：

1 - 创建一个转换器来检查TabbedPage.CurrentPage 类型：

public class SelectedTabTypeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value == null)
            return null;

        if (!(value is Page))
            throw new ArgumentException("Expected value to be of type " + nameof(Page), nameof(value));

        // if value is a NavigationPage check against its RootPage
        if (value is NavigationPage navPage)
            return navPage.RootPage?.GetType();

        return value.GetType();
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
        => throw new NotImplementedException();
}

2 - 将 x:Name 属性添加到 TabbedPage 以便我们以后可以引用它：

<TabbedPage x:Name="MyTabbedPage" ...

3 - 将转换器资源添加到TabbedPage.Resources:

  <TabbedPage.Resources>
    <ResourceDictionary>
      <converters:SelectedTabTypeConverter x:Key="SelectedTabTypeConverter" />
    </ResourceDictionary>
  </TabbedPage.Resources>

4 - 添加页面和DataTriggers:

  <TabbedPage.Children>
    <!-- Normal page tab default values -->
    <views:OnePage Title="Page1">
      <views:OnePage.Triggers>
        <DataTrigger 
            TargetType="views:OnePage"
            Binding="{Binding Source={x:Reference MyTabbedPage}, Path=CurrentPage, Converter={StaticResource SelectedTabTypeConverter}}" 
            Value="{x:Type views:OnePage}">
          <Setter Property="Title" Value="Page1 Selected" />
        </DataTrigger>
      </views:OnePage.Triggers>
    </views:OnePage>

    <!-- NavigationPage tab -->
    <NavigationPage Title="Page2">
      <x:Arguments>
        <views:TwoPage />
      </x:Arguments>
      <NavigationPage.Triggers>
        <DataTrigger 
            TargetType="NavigationPage" 
            Binding="{Binding Source={x:Reference MyTabbedPage}, Path=CurrentPage, Converter={StaticResource SelectedTabTypeConverter}}" 
            Value="{x:Type views:TwoPage}">
          <Setter Property="Title" Value="Page2 Selected" />
        </DataTrigger>
      </NavigationPage.Triggers>
    </NavigationPage>
  </TabbedPage.Children>

【讨论】：