如何僅使用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都不值得這么麻煩。