在UWP应用程序中为元素添加鼠标悬停和按下/单击效果

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应用程序中使用。我还阅读了很多关于视觉状态的内容，但我不知道如何使用它，如果这是做这种效果的最佳方式。

提前致谢

Answer 1

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

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

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

默认情况下，ListView有自己的样式，可以轻松覆盖以匹配您已经拥有的样式。

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

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