UWP Gridviewitem hover border is not shaped

Question

I'm having a simple GridView which its items have corner radius.
The presentation of the items is fine, but when hovering with the mouse the corner radius is not applied and it doesn't look good.

in the example above, item B2. I'd like to keep the reveal effect when hovering.

this is my code:

<Page.Resources>
    <DataTemplate x:Key="PersonDataTemplate" x:DataType="local:Person">
        <Border
            Width="200"
            Height="50"
            Background="AliceBlue"
            BorderBrush="#D0D0D0"
            BorderThickness="1"
            CornerRadius="90">
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Text="{x:Bind FullName}" />
        </Border>
    </DataTemplate>


</Page.Resources>

<Grid Padding="64">

    <GridView ItemTemplate="{StaticResource PersonDataTemplate}" ItemsSource="{x:Bind Persons, Mode=OneWay}" />
</Grid>

how can I implement that?

Answer 1

UWP Gridviewitem hover border is not shaped

The pointer hove rectangle like the above screenshot is GridViewItem's ListViewItemPresenter style. if you want to remove them, you could custom GridViewItem style and set the related part as Transparent. And you could use the following style directly.

<Style x:Key="GridViewItemRevealStyle" TargetType="GridViewItem">
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
            <Setter Property="Background" Value="{ThemeResource GridViewItemBackground}" />
            <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"
                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                            CheckBoxBrush="{ThemeResource GridViewItemCheckBoxBrush}"
                            CheckBrush="{ThemeResource GridViewItemCheckBrush}"
                            CheckMode="{ThemeResource GridViewItemCheckMode}"
                            ContentMargin="{TemplateBinding Padding}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            Control.IsTemplateFocusTarget="True"
                            DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                            DragBackground="{ThemeResource GridViewItemDragBackground}"
                            DragForeground="{ThemeResource GridViewItemDragForeground}"
                            DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                            FocusBorderBrush="{ThemeResource GridViewItemFocusBorderBrush}"
                            FocusSecondaryBorderBrush="{ThemeResource GridViewItemFocusSecondaryBorderBrush}"
                            FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                            PlaceholderBackground="{ThemeResource GridViewItemPlaceholderBackground}"
                            PointerOverBackground="Transparent"
                            PointerOverForeground="{ThemeResource GridViewItemForegroundPointerOver}"
                            PressedBackground="{ThemeResource GridViewItemBackgroundPressed}"
                            ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
                            RevealBackground="{ThemeResource GridViewItemRevealBackground}"
                            RevealBorderBrush="{ThemeResource GridViewItemRevealBorderBrush}"
                            RevealBorderThickness="{ThemeResource GridViewItemRevealBorderThemeThickness}"
                            SelectedBackground="Transparent"
                            SelectedForeground="{ThemeResource GridViewItemForegroundSelected}"
                            SelectedPointerOverBackground="Transparent"
                            SelectedPressedBackground="{ThemeResource GridViewItemBackgroundSelectedPressed}"
                            SelectionCheckMarkVisualEnabled="{ThemeResource GridViewItemSelectionCheckMarkVisualEnabled}"
                            >
                            <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" />
                                        </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>
<Style
            x:Key="GridViewItemContainerStyle1"
            BasedOn="{StaticResource GridViewItemRevealStyle}"
            TargetType="GridViewItem"
            />

Usage

<Grid Padding="64">
    <GridView
        IsTabStop="False"
        ItemContainerStyle="{StaticResource GridViewItemContainerStyle1}"
        ItemTemplate="{StaticResource PersonDataTemplate}"
        />
</Grid>

Answer 2

That’s because the hover border of the GridViewItem is defined in its Style! By setting the DataTemplate, you are only setting the content of the GridViewItem, without modifying the presenting Style of the control itself!

You need to create a new Style, inherited from the default one from the GridViewItem and, from there, customizing the hover border and all the properties of the “box” that presents the “content”.

Regards