How to change the visibility of a text block based on a click event using only XAML
I have a list showing a list of images. The images are flags of different countries. And clicking on the checkbox will show the name of the specified country. ONLY NAME OF A CLEAR COUNTRY.
What I've done:
The list view is defined. Content is added to the list view using data binding. List view has an image and a text block. The TextBlock is reset first.
I used the Behaviors SDK to change the visibility of the TextBlock on Tap event in the Grid. So when I click on the Indian flag image, the corresponding country name (India) is displayed. And when I click on the France flag, France is displayed in the TextBlock.
Here's a screenshot:
Only the name of the last click should be specified. Instead of showing the names of the al flags that were clicked.
At the same time, when the Indian flag is clicked, India is shown. And when I click the Denmark flag, the TextBlock does not hide from the India grid. Instead, the text boxes remain visible.
<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>
WHAT I AM TRYING TO ACCESS THIS:
Any help or suggestions would be great. Thank.
source to share
This is the way to go, but it might not be as pleasant as code or 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 above is very simple, but most likely you have bound the page to your view model and have bound the list view ItemsSource
to a property in the view model (most likely ObservableCollection
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 ObservableCollection<Country>
and
public class Country
{
public string Name { get; set; }
}
source to share
An alternative approach to using triggers would be to install ItemContainerStyle
. This allows you to override ControlTemplate
to ListViewItem
s, which in turn gives you access to the "Selected" visual state. You can use this to display the text element of the country name:
<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>
I think you might have to fill in a few more states from the default template (or perhaps copy and edit) - I'm not familiar with this ListView control.
Kind of crazy how difficult it is to do something so simple. I would strongly consider putting the "Selected" property in the item model and then updating it with code. Sometimes all-XAML isn't worth the trouble.
source to share