如何仅使用XAML更改基于tap事件的文本块的可见性

Question

我有一个列表视图显示图像列表。 图像是不同国家的旗帜。 点击标志后，会显示所示国家/地区的名称。 仅限于特定国家的名称。

我做了什么：

定义列表视图。 使用数据绑定将内容添加到列表视图中。 列表视图具有图像和文本块。 TextBlock最初保持折叠状态。

我使用Behaviors SDK来更改Grid的Tap事件上TextBlock的可见性。 因此，当我点击印度的国旗图像时，会显示相应国家的名称（印度）。 当我点击法国的旗帜时，法国就会出现在TextBlock上。

这是一个截图：

仅显示上次单击的标志的名称。 而不是显示被点击的al标志的名称。

当点击印度国旗时，显示印度。 当我点击丹麦的旗帜时，TextBlock不会从印度的网格中隐藏。 相反，两个TextBlock都保持可见。

<ListView ItemsSource="{Binding CountryDetails}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <i:Interaction.Behaviors>
                            <ic:EventTriggerBehavior EventName="Tapped">
                                <ic:ChangePropertyAction TargetObject="{Binding ElementName=countryName}" PropertyName="Visibility" Value="Visible"/>
                            </ic:EventTriggerBehavior>
                        </i:Interaction.Behaviors>
                        <Image Source="{Binding flagImages}" CacheMode="BitmapCache">
                        </Image>
                        <TextBlock Visibility="Collapsed" Name="countryName" Text="{Binding countryTitle}"></TextBlock>                        
                    </Grid>                    
                </DataTemplate>
            </ListView.ItemTemplate>
</ListView>

我想要达到的目的是：

任何帮助或建议都会很棒。 谢谢。

Answer 1

这是一种方式，但它可能不如代码隐藏或视图模型中那么好。

<ListView x:Name="lv">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <i:Interaction.Behaviors>
                    <icore:DataTriggerBehavior Binding="{Binding ElementName=lv, Path=SelectedValue}" Value="{Binding}" ComparisonCondition="Equal">
                        <icore:ChangePropertyAction TargetObject="{Binding ElementName=tb}" PropertyName="Visibility" Value="Visible" />
                    </icore:DataTriggerBehavior>
                    <icore:DataTriggerBehavior Binding="{Binding ElementName=lv, Path=SelectedValue}" Value="{Binding}" ComparisonCondition="NotEqual">
                        <icore:ChangePropertyAction TargetObject="{Binding ElementName=tb}" PropertyName="Visibility" Value="Collapsed" />
                    </icore:DataTriggerBehavior>
                </i:Interaction.Behaviors>

                <Image Source="/Assets/Logo.png" />
                <TextBlock x:Name="tb" Grid.Column="2" Visibility="Collapsed" FontSize="20" Text="{Binding}" VerticalAlignment="Center" Margin="10,0,0,0" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>

    <ListView.Items>
        <x:String>Australia</x:String>
        <x:String>Italy</x:String>
        <x:String>France</x:String>
        <x:String>USA</x:String>
        <x:String>China</x:String>
        <x:String>Japan</x:String>
        <x:String>Sweden</x:String>
    </ListView.Items>
</ListView>

---

我上面给出的示例非常基本，但很可能您已将页面绑定到视图模型并将列表视图的ItemsSource绑定到视图模型上的属性（很可能是字符串的ObservableCollection或自定义类型）。 在这种情况下，请确保相应地更新绑定：

<ListView x:Name="lv" ItemsSource="{Binding Items}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <i:Interaction.Behaviors>
                    <!-- Must compare strings otherwise DataTriggerBehavior complains -->
                    <icore:DataTriggerBehavior Binding="{Binding ElementName=lv, Path=SelectedValue.Name}" Value="{Binding Name}" ComparisonCondition="Equal">
                        <icore:ChangePropertyAction TargetObject="{Binding ElementName=tb}" PropertyName="Visibility" Value="Visible" />
                    </icore:DataTriggerBehavior>
                    <icore:DataTriggerBehavior Binding="{Binding ElementName=lv, Path=SelectedValue.Name}" Value="{Binding Name}" ComparisonCondition="NotEqual">
                        <icore:ChangePropertyAction TargetObject="{Binding ElementName=tb}" PropertyName="Visibility" Value="Collapsed" />
                    </icore:DataTriggerBehavior>
                </i:Interaction.Behaviors>

                <Image Source="/Assets/Logo.png" />
                <TextBlock x:Name="tb" Grid.Column="2" Visibility="Collapsed" FontSize="20" Text="{Binding Name}" VerticalAlignment="Center" Margin="10,0,0,0" />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

其中Items是一个ObservableCollection<Country>和

public class Country
{
    public string Name { get; set; }
}

Answer 2

使用触发器的另一种方法是设置ItemContainerStyle 。 这使您可以覆盖ListViewItem上的ControlTemplate ，从而使您可以访问“Selected”可视状态。 您可以使用它来显示国家/地区名称文本元素：

<ListView ItemsSource="{Binding CountryDetails}">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="ControlTemplate">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Selected">                                    
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                 Storyboard.TargetName="countryName"
                                                 Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />

                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Image Source="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Content.flagImages}" CacheMode="BitmapCache" />
                            <TextBlock Visibility="Collapsed" Name="countryName" Text="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Content.countryTitle}"></TextBlock>                        
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
       </Style>
    </ListView.ItemContainerStyle>
</ListView>

我猜你可能要从默认模板中填写更多状态（或者可能是复制和修改） - 我不熟悉这个ListView控件。

有点疯狂做这么简单的事情是多么困难。 我强烈考虑在项目模型中放置一个“Selected”属性，然后使用后面的代码更新它。 有时候所有XAML都不值得这么麻烦。