UWP：如何修改选定矩形的形状以在 GridView 中具有圆角边缘？答案

【问题标题】：UWP : How to modify shape of Selected rectangle to have rounded edges in a GridView?UWP：如何修改选定矩形的形状以在 GridView 中具有圆角边缘？
【发布时间】：2020-10-27 15:45:42
【问题描述】：

我正在寻找自定义出现在 UWP 应用中的 GridViewItem 上的选定矩形。

Main.xaml

 <Page.Resources>
    <DataTemplate x:Key="DemoImages" x:DataType="vm:DemoImages">
        <Border
            VerticalAlignment="Center">
                <Image
                    Source="{x:Bind PathOfImage, Mode=OneWay}"  //Path of image is defines in class DemoImages as a string which takes the path to an image
                    Height="10"
                    Width="10"/>
            </Border>
    </DataTemplate>
    <Style x:Key="GridViewItemContainerStyle1" TargetType="GridViewItem">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="Background" Value="Pink"/>
        <Setter Property="Foreground" Value="{ThemeResource GridViewItemForeground}"/>
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Margin" Value="0,0,4,4"/>
        <Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}"/>
        <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}"/>
        <Setter Property="AllowDrop" Value="False"/>
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
        <Setter Property="FocusVisualMargin" Value="-2"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewItem">
                    <ListViewItemPresenter x:Name="Root" 
                                           CheckBrush="{ThemeResource GridViewItemCheckBrush}" 
                                           ContentMargin="{TemplateBinding Padding}" 
                                           CheckBoxBrush="{ThemeResource GridViewItemCheckBoxBrush}" 
                                           ContentTransitions="{TemplateBinding ContentTransitions}" 
                                           CheckMode="{ThemeResource GridViewItemCheckMode}" 
                                           DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}" 
                                           DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}" 
                                           DragBackground="{ThemeResource GridViewItemDragBackground}" 
                                           DragForeground="{ThemeResource GridViewItemDragForeground}" 
                                           FocusBorderBrush="{ThemeResource GridViewItemFocusBorderBrush}" 
                                           FocusVisualMargin="{TemplateBinding FocusVisualMargin}" 
                                           FocusSecondaryBorderBrush="{ThemeResource GridViewItemFocusSecondaryBorderBrush}" 
                                           HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                           Control.IsTemplateFocusTarget="True" PressedBackground="{ThemeResource GridViewItemBackgroundPressed}" 
                                           PlaceholderBackground="{ThemeResource GridViewItemPlaceholderBackground}" 
                                           PointerOverForeground="{ThemeResource GridViewItemForegroundPointerOver}" 
                                           PointerOverBackground="{ThemeResource GridViewItemBackgroundPointerOver}" 
                                           RevealBorderThickness="{ThemeResource GridViewItemRevealBorderThemeThickness}" 
                                           ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
                                           RevealBorderBrush="{ThemeResource GridViewItemRevealBorderBrush}" 
                                           RevealBackground="{ThemeResource GridViewItemRevealBackground}" 
                                           SelectedForeground="{ThemeResource GridViewItemForegroundSelected}" 
                                           SelectionCheckMarkVisualEnabled="{ThemeResource GridViewItemSelectionCheckMarkVisualEnabled}" 
                                           SelectedBackground="Black" 
                                           SelectedPressedBackground="Black" 
                                           SelectedPointerOverBackground="Black"
                                           MinHeight="10"
                                           MinWidth="10"
                                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Selected"/>
                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="PointerOver"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOverSelected">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="PointerOver"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOverPressed">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="Pressed"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="Pressed"/>
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PressedSelected">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="Pressed"/>
                                        <Setter Target="Root.()" Value="Pressed"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="DisabledStates">
                                <VisualState x:Name="Enabled"/>
                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="Root.RevealBorderThickness" Value="0"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </ListViewItemPresenter>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>



      <Grid>
        <GridView ItemContainerStyle="{StaticResource GridViewItemContainerStyle1}"
            HorizontalAlignment="Center"
            ItemsSource="{x:Bind ViewModel.DemoIcons}"
            SelectionMode="single"
            ItemTemplate="{StaticResource DemoImages}">
        </GridView>
    </Grid>

我修改了 Visual 状态管理器，使选定的矩形显示为黑色并具有粉红色背景。我如何在这里得到一个圆形而不是矩形？我试图拐角半径，但这会使矩形消失。另外，当我悬停或选择图标时，如何更改图标的背景？在视觉状态管理器中设置属性似乎给了我一个错误。

【问题讨论】：

这能回答你的问题吗？ uwp win10 Listview SelectedItem Style

标签： uwp uwp-xaml

【解决方案1】：

如果你想改变选中矩形的行为，你可以使用GridViewItemExpanded模板，它包含在generic.xaml中的默认样式中。

我修改了 Visual 状态管理器，使选定的矩形显示为黑色，背景为粉红色。

GridViewItemExpanded 模板和你的GridViewItemContainerStyle1 模板都是ItemContainerStyle，它们不是同时使用的。因此，您需要在GridViewItemExpanded模板中重新设置选中矩形的颜色。

您需要找到VisualState名称Selected、PointerOverSelected和PressedSelected，并更改Storyboard.TargetName为MultiSelectSquare的ObjectAnimationUsingKeyFrames属性的值（@ 987654332@ 是选中矩形的Name)，Storyboard.TargetProperty 是Background 为Black，像这样：

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MultiSelectSquare" Storyboard.TargetProperty="Background">
        <DiscreteObjectKeyFrame KeyTime="0" Value="Black" />
</ObjectAnimationUsingKeyFrames>

要获得粉红色背景，您可以更改Setter 的值，其Property 为Background，如下所示：

<Setter Property="Background" Value="Pink" />

我如何在这里得到一个圆形而不是矩形？

您需要在GridViewItemExpanded模板中找到名为MultiSelectSquare的Border并添加属性CornerRadius="10"，"10"的值可以根据您的Border控件的大小进行调整。

当我悬停或选择图标时如何更改图标的背景？

您可以找到VisualState 名称PointerOver 和Selected 并更改ObjectAnimationUsingKeyFrames 的值，其Storyboard.TargetName 为MultiSelectSquare 和Storyboard.TargetProperty 是 Background 到您的目标颜色。

【讨论】：