UWP : How to modify shape of Selected rectangle to have rounded edges in a GridView?

Question

I was looking to customize the selected rectangle which appears over a GridViewItem in a UWP App.

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>

I modified the Visual state manager so that the selected rectangle appears black and has a pink backgound. How do I get a Circle instead of the rectangle here ? I tried to Corner Radius but that makes the rectangle disappear. Also how do i change the background of my icon when I Hover or select it ? Setting property in Visual State manager seems to be giving me an error.

Answer 1

If you want to change the behavior about the selected rectangle, you could use the GridViewItemExpanded template which included with the default styles in generic.xaml.

I modified the Visual state manager so that the selected rectangle appears black and has a pink backgound.

The GridViewItemExpanded template and your GridViewItemContainerStyle1 template are both ItemContainerStyle, they are not used at the same time. Therefore, you need to set the selected rectangle’ color again in the GridViewItemExpanded template.

You need to find the VisualState name Selected, PointerOverSelected and PressedSelected and change the the value of ObjectAnimationUsingKeyFrames property whose Storyboard.TargetName is MultiSelectSquare (MultiSelectSquare is the selected rectangle’s Name) and Storyboard.TargetProperty is Background as Black, like this:

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

To get a pink background, you can change the value of a Setter whose Property is Background, like this:

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

How do I get a Circle instead of the rectangle here ?

You need to find the Border named MultiSelectSquare in GridViewItemExpanded template and add a property CornerRadius="10", the value "10" can be adjusted based on the size of your Border control.

Also how do i change the background of my icon when I Hover or select it ?

You could find the VisualState name PointerOver and Selected and change the value of ObjectAnimationUsingKeyFrames whose Storyboard.TargetName is MultiSelectSquare and Storyboard.TargetProperty is Background to your targeted color.