Hover Focus exceeding the ListViewItem width in UWP C#

Question

I have a simple horizontal ListView where it will show trending anime. It is a horizontal ListView. But as in this image, in the One-Piece anime, the hover is present. but due to screenshot, the hover is hidden. when the hovered ListViewItem is focused, it is showing some extra sapces on both sides of the main element, How do I rectify it??

Any Ideas...

My ListView is below:

<ListView ScrollViewer.IsHorizontalRailEnabled="True"
                              ScrollViewer.HorizontalScrollMode="Enabled"
                              ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                              ScrollViewer.VerticalScrollMode="Disabled"
                              ScrollViewer.IsVerticalRailEnabled="False"
                              SelectionMode="None"
                              IsSwipeEnabled="False"
                              IsItemClickEnabled="True"
                              x:Name="AnimeTrendingList"
                              ItemClick="AnimeTrendingList_ItemClick"
                              UseSystemFocusVisuals="False">
                            <ListView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VirtualizingStackPanel Orientation="Horizontal" />
                                </ItemsPanelTemplate>
                            </ListView.ItemsPanel>
                           
                            <ListView.ItemTemplate>
                                <DataTemplate x:DataType="data:MediaElement">
                                    <Grid 
                              Width="150"
                                    Height="300"
                              CornerRadius="10">
                                        <Grid.ContextFlyout>
                                            <MenuFlyout>
                                                <MenuFlyoutItem 
                                                x:Name="AnimeSaveImage" 
                                                Text="Save Image" 
                                                Click="AnimeSaveImage_Click"
                                                Tag="{x:Bind CoverImage.ExtraLarge.AbsoluteUri}"/>
                                                <MenuFlyoutItem 
                                                x:Name="AnilistUrlCopy" 
                                                Text="Copy AniList URL"
                                                Click="AnilistUrlCopy_Click"
                                                Tag="{x:Bind SiteUrl.ToString()}"/>
                                                <MenuFlyoutItem
                                                x:Name="AnilistOpenUrl"
                                                Text="Open in Browser"
                                                Click="AnilistOpenUrl_Click"
                                                Tag="{x:Bind SiteUrl.ToString()}"/>
                                                <MenuFlyoutItem 
                                                    x:Name="EmbedableBannerSave"
                                                    Text="Save Embeddable Image"
                                                    Click="EmbedableBannerSave_Click"
                                                    Tag="{x:Bind Id.ToString()}"/>
                                            </MenuFlyout>
                                        </Grid.ContextFlyout>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*"/>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <Grid Width="150">
                                            <Image Stretch="UniformToFill">
                                                <Image.Source>
                                                    <BitmapImage UriSource="{x:Bind CoverImage.Large.AbsoluteUri}"/>
                                                </Image.Source>
                                            </Image>
                                            <!--<Canvas ToolTipService.ToolTip="Currently Airing">
                                    <Rectangle Canvas.Top="5"
                                               Canvas.Left="5"
                                               Width="25"
                                               Height="25"
                                               Fill="{StaticResource CustomAcrylicInAppLuminosity}"/>
                                    <Ellipse Width="15"
                                             Height="15"
                                             Canvas.Left="10"
                                             Canvas.Top="10"
                                             Fill="LightGreen"/>
                                </Canvas>-->
                                        </Grid>
                                        <StackPanel 
                                        Width="150"
                                                Background="{ThemeResource SystemAltLowColor}"
                                                Grid.Row="1"
                                            BorderThickness="1"
                                            Canvas.ZIndex="2">
                                            <TextBlock Text="{x:Bind Title.UserPreferred}"
                                           TextTrimming="CharacterEllipsis"
                                           FontSize="15"
                                           FontWeight="Bold"
                                           Margin="5, 15, 5, 2"
                                           ToolTipService.ToolTip="{x:Bind Title.UserPreferred}"/>
                                            <TextBlock Text="{x:Bind Studios.Nodes[0].Name}"
                                           FontStyle="Italic"
                                           FontSize="12"
                                           Margin="5, 0, 5, 5"
                                           Foreground="{ThemeResource SystemBaseMediumHighColor}"/>
                                            <TextBlock Text="{x:Bind sys:String.Format(x:Null, '{0} • {1} Episodes', Format, Episodes)}"
                                           FontSize="12"
                                           Margin="5, 2, 5, 5"/>
                                            <Grid Margin="5, 0">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="*"/>
                                                    <ColumnDefinition Width="*"/>
                                                </Grid.ColumnDefinitions>
                                                <StackPanel Grid.Column="0"
                                                Orientation="Horizontal"
                                                Margin="5">
                                                    <FontIcon Glyph="&#xE249;"
                                                  FontSize="12"
                                                  Foreground="Yellow"/>
                                                    <TextBlock Text="{x:Bind Trending.ToString()}"
                                                   FontSize="12"
                                                   Margin="5, 0, 0, 0"
                                                   VerticalAlignment="Center"/>
                                                </StackPanel>
                                                <StackPanel Grid.Column="1"
                                                Orientation="Horizontal"
                                                Margin="5"
                                                HorizontalAlignment="Left">
                                                    <FontIcon Glyph="&#xE00B;"
                                                  FontSize="12"
                                                  Foreground="Red"/>
                                                    <TextBlock Text="{x:Bind Favourites.ToString()}"
                                                   FontSize="12"
                                                   Margin="5, 0, 0, 0"
                                                   VerticalAlignment="Center"/>
                                                </StackPanel>
                                            </Grid>
                                        </StackPanel>
                                    </Grid>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>

Answer 1

Hover Focus exceeding the ListViewItem width in UWP C#

It looks the default ListViewItem background, and it will highlight when point over or point pressed. you could set them as Transparent to disable this behavior. please refer to the following code taht place in the app resource dictionary.

<Application.Resources>
    <SolidColorBrush x:Key="ListViewItemBackgroundPointerOver" Color="Transparent" />
    <SolidColorBrush x:Key="ListViewItemBackgroundPressed" Color="Transparent" />
</Application.Resources>