Question

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

我做了什么：

定义列表视图。使用数据绑定将内容添加到列表视图中。列表视图有一个图像＆amp;一个TextBlock。 TextBlock最初保持折叠状态。

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

这是一个截图：

enter image description here

仅显示上次单击的标志的名称。而不是显示被点击的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>

我正在努力实现的目标是：

enter image description here

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

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>

Screenshot

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

ObservableCollection

其中<ListView x:Name="lv" ItemsSource="{Binding Items}"> <ListView.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="100" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <i:Interaction.Behaviors>  <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>

Answer 2

使用触发器的另一种方法是设置ItemContainerStyle。这样，您就可以覆盖ControlTemplate上的ListViewItem，从而可以访问＆＃34;已选择＆＃34;视觉状态。您可以使用它来显示国家/地区名称文本元素：

<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>

我想你可能需要填写default template中的更多状态（或者可能是复制和修改） - 我不熟悉这个ListView控件。

有点疯狂做这么简单的事情是多么困难。我会强烈考虑选择＆＃34;选择＆＃34;项目模型中的属性，然后使用后面的代码更新它。有时候所有XAML都不值得这么麻烦。

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

2 个答案: