如何仅使用XAML更改基于tap事件的文本块的可见性(How to change visibility of a textblock based on the tap event using only

如何仅使用XAML更改基于tap事件的文本块的可见性(How to change visibility of a textblock based on the tap event using only XAML)

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

我做了什么：

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

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

这是一个截图：

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

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

我想要实现的目标是：

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

I have a listview showing a list of images. Images are flags of different nations. And on clicking a flag, name of the country shown be shown. ONLY NAME OF THAT PARTICULAR COUNTRY.

What I did:

Defined a List View. Contents are added to the List View using Data Binding. List View has an Image & a TextBlock. TextBlock is kept collapsed initially.

I used Behaviours SDK to change the visibility of the TextBlock on Tap event of the Grid. So when I tap on a India's flag image, that corresponding country's name (India) is shown. And when I tap on France's flag, France is displayed on TextBlock.

Here's a screenshot:

Only the name of the flag that was last clicked should be shown. Instead of showing names of al flags that were clicked.

Curently, when Indian flag is clicked, India is shown. And when I click Denmark's flag, the TextBlock doesn't get hidden from India's grid. Instead both the TextBlocks are remaining visible.

WHAT I AM TRYING TO ACHIEVE IS THIS:

Any help or suggestions would be great. Thank you.

最满意答案

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

<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; }
}
Here's a way, but it mightn't be as nice as code-behind or in the view model. 
<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>
 
 
 
The example I've given above is very basic, but most likely you've bound the page to your view model and bound the list view's ItemsSource to a property on the view model (most likely an ObservableCollection of strings or a custom type). In this case, make sure you update the bindings accordingly: 
<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>
 
where Items is an ObservableCollection<Country> and 
public class Country
{
    public string Name { get; set; }
}