Question

我一直在寻找自定义所选矩形的方法，该矩形显示在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中设置属性似乎给我一个错误。

Answer 1

如果要更改所选矩形的行为，可以使用{strong> generic.xaml 中的默认样式随附的GridViewItemExpanded模板。

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

GridViewItemExpanded模板和您的GridViewItemContainerStyle1模板均为ItemContainerStyle，它们不能同时使用。因此，您需要在GridViewItemExpanded模板中再次设置所选矩形的颜色。

您需要找到VisualState名称Selected，PointerOverSelected和PressedSelected，并更改其 Storyboard.TargetName的ObjectAnimationUsingKeyFrames属性的值。 是MultiSelectSquare（MultiSelectSquare是所选矩形的Name），而 Storyboard.TargetProperty 是Background作为Black，像这样：

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

要获得粉红色的背景，可以更改Setter为Property的{{1}}的值，如下所示：

Background

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

您需要在<Setter Property="Background" Value="Pink" />模板中找到名为Border的{{1}}并添加属性MultiSelectSquare，值GridViewItemExpanded可以根据大小进行调整CornerRadius="10"控件中。

当我将鼠标悬停或选中时，如何更改图标的背景？

您可以找到"10"名称Border和VisualState，并更改 Storyboard.TargetName 为{{1} }和 Storyboard.TargetProperty 设置为您目标颜色的PointerOver。

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

1 个答案: