UWP XAML ListBox ControlTemplate 触发器

如何解决UWP XAML ListBox ControlTemplate 触发器

在 WPF 中，我使用此代码进行触发器，但在 UWP 中我如何完成这项工作？ （使用 Story-board 或 Visual-State... 不知道）

XAML WPF 触发器：

<!--Bookmark=false,Note=false-->
<MultiDataTrigger>
    <MultiDataTrigger.Conditions>
        <Condition Binding="{Binding Quran}" Value="" />
        <Condition Binding="{Binding Tarjome}" Value="false" />
    </MultiDataTrigger.Conditions>
    <MultiDataTrigger.Setters>
        <Setter TargetName="tbQuran" Property="Visibility" Value="Collapsed"/>
        <Setter TargetName="tbQuran" Property="Background" Value="red"/>
        <Setter TargetName="tbQuran" Property="FontFamily" Value="Arial"/>
    </MultiDataTrigger.Setters>
</MultiDataTrigger>

UWP 自定义列表框：我想为 UWP 定义一个触发器 [ 像顶级代码，用于 WPF ]，当“古兰经”和“Tarjome”值为空 [或 ''] 时，然后设置一些样式.. .

<ListBox Name="lbQuran"
         ItemsSource="{x:Bind QuranAyahs}"
         ScrollViewer.VerticalScrollMode="Enabled"
         ScrollViewer.VerticalScrollBarVisibility="Visible"
         FlowDirection="LeftToRight"
         Background="Wheat"
         SelectionChanged="LbQuran_SelectionChanged">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Name="gridQuranTarjome" FlowDirection="RightToLeft" Margin="20,10" Padding="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*"/>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="auto"/>
                                <ColumnDefinition Width="auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="1*"/>
                                <RowDefinition Height="1*"/>
                            </Grid.RowDefinitions>

                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridQuranTarjome" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#F5F5F5" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridQuranTarjome" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="BurlyWood" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedUnfocused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="gridQuranTarjome" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="BurlyWood" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <!--Quran-->
                            <TextBlock Name="tbQuran" Grid.Row="0" Grid.Column="0" 
                                       Style="{StaticResource TextBlockQuranTarjome}"
                                       Text="{Binding Quran}" 
                                       Foreground="{Binding Quran_Foreground}"
                                       FontFamily="{Binding Quran_FontFamily}" 
                                       FontSize="{Binding Quran_FontSize}" 
                                       FontWeight="{Binding Quran_FontWeight}"/>

                            <!--Tarjome-->
                            <TextBlock Name="tbTarjome" Grid.Row="1" Grid.Column="0" 
                                           Style="{StaticResource TextBlockQuranTarjome}"
                                           Text="{Binding Tarjome}" 
                                           Foreground="{Binding Tarjome_Foreground}"
                                           FontFamily="{Binding Tarjome_FontFamily}" 
                                           FontSize="{Binding Tarjome_FontSize}" 
                                           FontWeight="{Binding Tarjome_FontWeight}"/>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

解决方法

我找到了解决方案：

转换器类：

using System;
using Windows.UI.Xaml.Data;

namespace App2.Classes.Converters
{
    public class StringToVisibilityConverter : IValueConverter
    {
        public object Convert(object value,Type targetType,object parameter,string language)
        {
            return string.IsNullOrWhiteSpace((string)value) ? true : false;
        }

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

XAML：

<Page 

    //1
    xmlns:ClassesConverters="using:App2.Classes.Converters">

    <Page.Resources>
        //2
        <ClassesConverters:StringToVisibilityConverter x:Key="StringToVisibilityConverter"/>
    </Page.Resources>
    
    //3
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <StateTrigger IsActive="{Binding SurahName,Converter={StaticResource StringToVisibilityConverter}}"/>
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="gridSurahName.Visibility" Value="Collapsed"/>
                    <Setter Target="tbTarjome.Foreground" Value="Red"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    
</Page>

结果：

---

UWP XAML 条件：

1. < build 15063 : Version adaptive code
2. >= build 15063 : Conditional XAML

状态触发器：

3. State Triggers