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

Posted 2023-03-31

【中文标题】Xamarin 表单选项卡式页面触发器属性不起作用

【英文标题】：Xamarin Forms Tabbed Page Trigger properties not working

【发布时间】：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>

【参考方案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>