为什么UWP中的列表视图带有默认边框？

Question

我在通用Windows平台中使用列表视图模板，希望我做的一切正确，但是当应用程序首次加载时，列表视图中的第一项具有黑色边框。

我在UI中所做的是

         <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>

为什么这个边界即将到来，如何摆脱这些？我正在遵循本教程 https://channel9.msdn.com/Series/Windows-10-development-for-absolute-beginners/UWP-040-Data-Binding-to-the-GridView-and-ListView-Controls

如何解决此问题，我不要任何默认边框

Answer 1

您看到的该黑色边框来自的默认Style设置ListViewItem。

默认情况下，使用系统焦点视觉效果并将其UseSystemFocusVisuals设置为True。将其设置为False会使控件使用可视控件级别的焦点（默认情况下为虚线）。

因此，有几种方法可以将它们一起删除/隐藏。通常，我只是将系统视觉效果的厚度更改为0，就像这样-

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

同样的设置<Setter Property="IsTabStop" Value="False" />将隐藏焦点视觉效果，但是请记住，标签导航将在这样做后停止工作。

如果您的应用程序在XBox上或希望与键盘一起使用，我建议您保留焦点视觉效果不变，或者将FocusVisualPrimaryBrush和更改FocusVisualSecondaryBrush为更微妙的颜色。