UWP：如何在网格视图中修改选定矩形的形状，使其具有圆角边？

我想定制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 State manager中设置属性似乎给了我一个错误。

如果要更改选定矩形的行为，可以使用generic.xaml中默认样式包含的模板

我修改了可视状态管理器，使选定的矩形显示为黑色，并具有粉色背景

GridViewItemExpanded

模板和您的

GridViewItemContainerStyle1

模板都是

ItemContainerStyle

，它们不会同时使用。因此，您需要在

GridViewItemExpanded

模板中再次设置选定矩形的颜色

您需要找到

VisualState

name

Selected

，

pointer或overselected

和

pressed Selected

，并更改

ObjectAnimationUsingKeyFrames

属性的值，该属性的故事板。TargetName为

MultiSelectSquare

（

MultiSelectSquare

是选定矩形的

名称

）和情节提要。TargetProperty是

背景

为

黑色

，如下所示：

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

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

我怎么才能得到一个圆形而不是矩形呢

您需要在

GridViewItemExpanded

模板中找到名为

MultiSelectSquare

的

边框

，并添加属性

CornerRadius=“10”

，可以根据

边框

控件的大小调整值

还有，当我悬停或选择图标时，如何更改其背景

---

您可以找到

VisualState

名称

指针上方的
和
选定的
，并使用其情节提要的关键帧更改
对象动画的值。TargetName是
多选方
和情节提要。TargetProperty是
背景
为您的目标颜色。
这回答了你的问题吗？