Why default border comes for list view in UWP?

Question

I am using list view template in Universal windows platform, I hope i am doing everything right, but when the app loads for the first time , in the list view first item is having a black border.

What i did in UI is

         <Page
x:Class="ListViewExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ListViewExample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:data="using:ListViewExample.Model" 
mc:Ignorable="d">

<Page.Resources>

    <DataTemplate x:Key="BookListDataTemplate" x:DataType="data:Book">
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
            <Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
            <StackPanel Margin="20,20,0,0"  Width="100">
                <TextBlock TextWrapping="Wrap" Text="{x:Bind Title}" HorizontalAlignment="Center" FontSize="16" Width="auto" />
                <TextBlock TextWrapping="Wrap" Text="{x:Bind Author}" HorizontalAlignment="Center" FontSize="10" Width="auto" />
            </StackPanel>
        </StackPanel>
    </DataTemplate>
    <Style TargetType="ListViewItem" x:Key="stylez">
        <Setter Property="FocusVisualPrimaryThickness" Value="0" />
        <Setter Property="FocusVisualSecondaryThickness" Value="0" />
    </Style>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">


    <Grid.RowDefinitions>
        <RowDefinition Height="auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>

    <RelativePanel >

        <Button Name="hambergerbutton" FontSize="36" RelativePanel.AlignLeftWithPanel="True"
                FontFamily="Segoe MDL2 Assets" Content="&#xE700;" Click="hambergerbutton_Click" ></Button>
        <StackPanel Background="Gray"></StackPanel>
        <TextBlock  RelativePanel.AlignHorizontalCenterWithPanel="True"
                    RelativePanel.AlignVerticalCenterWithPanel="True" 
                    FontSize="24">Books</TextBlock>

    </RelativePanel>


    <SplitView Grid.Row="1" Name="myspliview"
               DisplayMode="CompactInline"  OpenPaneLength="200" 
               CompactPaneLength="56" HorizontalAlignment="Stretch">
        <SplitView.Pane>
            <ListBox SelectionMode="single" Name="listicons" SelectionChanged="listicons_SelectionChanged">
                <ListBoxItem >
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xe72D;" FontSize="36" />
                        <TextBlock Text="share" FontSize="24" Margin="20,0,0,0"></TextBlock>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xe724;" FontSize="36" />
                        <TextBlock Text="favourites" FontSize="24" Margin="20,0,0,0"></TextBlock>
                    </StackPanel>
                </ListBoxItem>
                <ListBoxItem></ListBoxItem>
            </ListBox>
        </SplitView.Pane>

        <SplitView.Content>
            <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Margin="0,20,20,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="100" />
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="1" 
               Name="ResultTextBlock" 
               FontSize="24" 
               Foreground="Red" 
               FontWeight="Bold" 
               Margin="20,20,0,0" />
                <!--<ListView ItemsSource="{x:Bind Books}" 
              ItemClick="ListView_ItemClick" 
              IsItemClickEnabled="True" 
              ItemTemplate="{StaticResource BookListDataTemplate}">
                </ListView>-->

                <ListView ItemsSource="{x:Bind Books}" 
              ItemClick="ListView_ItemClick" 
              IsItemClickEnabled="True"
            Width="auto" Grid.Column="0" 
                              RelativePanel.AlignRightWithPanel="True">
                    <ListView.ItemTemplate IsTabStop="true" Style="{StaticResource  stylez}" >
                        <DataTemplate  x:DataType="data:Book"  >
                            <StackPanel   Orientation="Horizontal" HorizontalAlignment="Left" BorderThickness="0" >
                                <Image Name="image" Source="{x:Bind CoverImage}" HorizontalAlignment="Center" Width="150" />
                                <StackPanel Margin="20,20,0,0" >
                                    <TextBlock Text="{x:Bind Title}" HorizontalAlignment="Right" FontSize="16" MinWidth="100" />
                                    <TextBlock Text="{x:Bind Author}" HorizontalAlignment="Right" FontSize="10" MinWidth="100"/>
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

            </Grid>



        </SplitView.Content>


    </SplitView>


</Grid>

Why this border is coming how to get rid of these? i was following this tutorial https://channel9.msdn.com/Series/Windows-10-development-for-absolute-beginners/UWP-040-Data-Binding-to-the-GridView-and-ListView-Controls

How to fix this problem, i dont want any default border

Answer 1

This dark border you see comes from the default Style of the ListViewItem.

By default, system focus visuals are in use with UseSystemFocusVisuals set to True. Setting it to False will make the control use control-level focus visual (dotted lines by default) instead.

So there are a few ways to remove/hide them all together. Normally I just change the thickness of the system visuals to 0, like this -

<ListView TabNavigation="Cycle">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="FocusVisualPrimaryThickness" Value="0" />
            <Setter Property="FocusVisualSecondaryThickness" Value="0" />
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

Also setting <Setter Property="IsTabStop" Value="False" /> will hide the focus visuals however keep in mind tab naviation will stop working after doing so.

If your app is on XBox or expected to be used with keyboards, I'd recommand to leave the focus visuals as they are or maybe change the FocusVisualPrimaryBrush and FocusVisualSecondaryBrush to more subtle colors.

Answer 2

When an app starts the first UI element in the layout that can a have focus gets it. In your case it's the first item of your ListView, that's why there's a black border around it.

Focus is used to enable user interaction with an app using a keyboard: e.g. by pressing arrow keys on your keyboard you're be able to pick different items in your list. If you run this app on a phone that doesn't have a physical keyboard there won't be a border around the first list item.

There's no way to change the focus behaviour for UWP apps but there are some workarounds you might want to look at:
Stackoverflow - Remove focus on first textbox
Stackoverflow - How to not focus element on application startup?