当 PointerOver 和 Selected 时更改 CollectionView 项目的背景颜色

Question

我正在创建一个简单的 ProductManager 来学习 .NET MAUI。

在深色模式下，当指针悬停在 CollectionView 中的项目上以及选中它们时，CollectionView 中的项目具有清晰的背景色，如下图所示：

• 

但是，在浅色模式下，背景颜色对我来说显得不够清晰。所以，我想改变它。根据CollectionView#Change Selected Item Color，我使用这段代码来调整它（对此我感到非常抱歉！由于一些格式问题，StackOverflow将我下面的XAML代码标记为不正确，所以我不得不使用块引号来显示它）：

> <VisualStateManager.VisualStateGroups>
>     <VisualStateGroup Name="CommonStates">
>         <VisualState Name="Normal" />
>         <VisualState Name="PointerOver">
>             <VisualState.Setters>
>                 <Setter Property="BackgroundColor" Value="LightGray" />
>             </VisualState.Setters>
>         </VisualState>
>         <VisualState Name="Selected">
>             <VisualState.Setters>
>                 <Setter Property="BackgroundColor" Value="Blue" />
>             </VisualState.Setters>
>         </VisualState>
>     </VisualStateGroup>
> </VisualStateManager.VisualStateGroups>

此后，当我将鼠标悬停在某个项目上时，它会变成浅灰色。当我单击选择它时，背景变为蓝色。但是，当我将指针移到项目之外时，它会恢复为默认选定的背景颜色。

• 指针悬停

• 已选择且指针仍悬停

• 指针超出所选项目

这是我的代码问题还是 .NET MAUI 还不支持？

我想为 VisualState 中的 PointerOver 和 Selected 状态设置自定义背景颜色。

Answer 1

如果您使用 ContentView 构建自己的自定义控件，则可以添加 IsPointerOver 和 IsSelected 作为附加属性，例如

// CustomView.xaml.cs
public class CustomView : ContentView
{
    public static readonly BindableProperty IsPointerOver = BindableProperty.Create(...);
    public static readonly BindableProperty IsSelected = BindableProperty.Create(...);
}

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup Name="CommonStates">
        <VisualState Name="Normal" />
        <VisualState Name="PointerOver">
            <VisualState.Setters>
                <Setter Property="IsPointerOver" Value="True" />
            </VisualState.Setters>
        </VisualState>
        <VisualState Name="Selected">
            <VisualState.Setters>
                <Setter Property="IsSelected" Value="True" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

这样做将允许我使用 Binding 或 MultiBinding 进行一些创造性的 DataTrigger，将这些属性组合在一起，例如：

<!-- Setting BackgroundColor only when BOTH IsPointerOver and IsSelected are true -->
<DataTrigger Binding="{MultiBinding {Binding IsPointerOver}, {Binding IsSelected}, StringFormat='{0}-{1}'}" Value="True-True">
    <Setter Property="BackgroundColor" Value="LightBlue" />
</Setter>

还有其他选项可用，例如 MultiTrigger。基本上，一旦 VisualStates 映射到属性，您就可以很有创意地将值组合在一起。