在 UWP 应用程序的元素上添加鼠标悬停和 pressed/clicked 效果

Question

我目前正在开发一个应用程序来显示科特赖克（比利时的一个城市）的所有停车位。这是目前的样子：

设计

我的问题是：例如，如何在鼠标悬停或单击时更改元素的颜色。我想在 XAML 中完成此操作，这是我现在拥有的代码。

代码

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（外部 xaml 文件）

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

我用 style.triggers 尝试了一些东西，但这只能在 WPF 应用程序中使用，而不能在 UWP 应用程序中使用。我也阅读了很多关于 visualstates 的东西，但我不知道如何使用它，也不知道这是否是实现此类效果的最佳方式。

提前致谢

Answer 1

您可能应该使用 ListView 而不是 ItemsControl 来显示此数据（除非您有充分的理由这样做）。 ListView 扩展自 ItemsControl 并向其添加了许多有用的功能，例如：

Single/multiple 项目选择。
ItemClick 事件。
每个项目容器都是一个 ListViewItem 控件，它有自己的功能，如视觉状态和复选框，ListViewItem 的显示由 ListViewItemPresenter 管理，它可以以优化的方式提供这些功能。
内置 ScrollViewer。
数据和UI虚拟化。 UI 当您有 100 个项目时，虚拟化是一个很大的优势。
无障碍。支持标签聚焦。
可能更多...

ItemsControl 通常不用于您想要与项目交互的情况（例如，通过 click/tap）。

默认情况下，ListView 有自己的样式，可以很容易地覆盖它以匹配您已有的样式。

如果您只想为每个视觉状态设置 ListViewItem background/foreground 的样式，那么您可以覆盖这些样式：

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

在 UWP 应用程序的元素上添加鼠标悬停和 pressed/clicked 效果

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

c#

xaml

windows-store

uwp

uwp-xaml

设计

代码

MainPage.xaml

style.xaml（外部 xaml 文件）