Add a mouseover and pressed/clicked effect on element in UWP app

Question

I'm currently working on an app to show all parking spaces in Kortrijk (a city in Belgium). This is how it looks at the moment:

Design

My question is: how can I for example change the color of the element on mouseover or on click. I want to accomplish this in the XAML and this is the code that I have now.

Code

MainPage.xaml

<Page
x:Class="ParkingSpots.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ParkingSpots"
xmlns:model="using:ParkingSpots.model"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
mc:Ignorable="d">

<Page.Resources>
    <model:ParkingSpot x:Key="spots"/>
</Page.Resources>

<Grid Style="{StaticResource mainGrid}">
    <Grid.RowDefinitions>
        <RowDefinition Height="20"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <TextBlock Grid.Row="0" Text="Parking spots in Kortrijk"/>
    <ListView ItemsSource="{Binding Source={StaticResource spots}, Path=ParkingSpots}" ItemTemplate="{StaticResource ParkingSpotTemplate}" ItemsPanel="{StaticResource ParkingSpotsTemplate}"/>
</Grid>

style.xaml (external xaml file)

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ParkingSpots.style"
xmlns:conv="using:ParkingSpots.converter">

<conv:StreetConverter x:Key="StreetConv" />

<Color x:Key="Color1">#FFB3B6F2</Color>
<Color x:Key="Color2">#FF5A58D9</Color>
<Color x:Key="Color3">#FFF2F2F2</Color>

<SolidColorBrush x:Key="Color1Brush" Color="{StaticResource Color1}" />
<SolidColorBrush x:Key="Color2Brush" Color="{StaticResource Color2}" />
<SolidColorBrush x:Key="Color3Brush" Color="{StaticResource Color3}" />

<Style x:Name="mainGrid" TargetType="Grid">
    <Setter Property="Background" Value="{StaticResource Color1Brush}"/>
</Style>

<DataTemplate x:Key="ParkingSpotTemplate">
    <ListViewItem>
        <ListViewItem.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Foreground" Value="{StaticResource Color3Brush}" />
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="Margin" Value="8,0,0,0" />
            </Style>
        </ListViewItem.Resources>
        <TextBlock x:Name="ParkingSpotInfo" Grid.Row="0" Grid.Column="0" Text="{Binding Street, Converter={StaticResource StreetConv}}"/>
    </ListViewItem>
</DataTemplate>

<ItemsPanelTemplate x:Key="ParkingSpotsTemplate">
    <VariableSizedWrapGrid x:Name="wrapGrid"></VariableSizedWrapGrid>
</ItemsPanelTemplate>

I tried something with style.triggers but this is only possible in WPF apps and not in UWP apps. I've also read a lot of things about visualstates but I don't know how to use it and if this is the best way to do such effects.

Thanks in advance

Answer 1

You should probably be using a ListView to display this data instead of an ItemsControl (unless you have a good reason for doing so). ListView extends from ItemsControl and adds to it lots of useful features, such as:

• Single/multiple item selection.
• ItemClick event.
• Each item container is a ListViewItem control which has its own features like visual states and a checkbox, and the presentation of the ListViewItem is managed by a ListViewItemPresenter which can deliver these features in an optimized manner.
• Built-in ScrollViewer.
• Data and UI virtualization. UI virtualization is a big advantage when you have 100s of items.
• Accessible. Supports tab-focusing.
• Probably more...

ItemsControl isn't typically used for situations where you want to interact with the items (by click/tap, for example).

ListView by default has its own style which can be easily overridden to match what you have already.

If you only want to style the ListViewItem background/foreground for each visual state, then you can override these styles:

<ListView>
    <ListView.Resources>
        <!--
            These resources are applied to this ListView only. Put in a
            higher scope (page or app) depending on what you want it to affect.
        -->
        <SolidColorBrush x:Key="ListViewItemBackgroundPointerOver" Color="Red"/>
        <SolidColorBrush x:Key="ListViewItemForegroundPointerOver" Color="Violet"/>
        <SolidColorBrush x:Key="ListViewItemBackgroundSelected" Color="Yellow"/>
        <SolidColorBrush x:Key="ListViewItemForegroundSelected" Color="LimeGreen"/>
        <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPointerOver" Color="Blue"/>
        <SolidColorBrush x:Key="ListViewItemBackgroundPressed" Color="Cyan"/>
        <SolidColorBrush x:Key="ListViewItemBackgroundSelectedPressed" Color="Orange"/>
    </ListView.Resources>
</ListView>