Question

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

我在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更改为更精细的颜色。< / p>

Answer 2

当应用启动布局中的第一个UI元素时，可以有焦点获取它。在您的情况下，它是ListView的第一项，这就是为什么周围有黑色边框的原因。

焦点用于使用键盘实现用户与应用的互动：例如通过按键盘上的箭头键，您可以在列表中选择不同的项目。如果您在没有物理键盘的手机上运行此应用程序，则不会成为第一个列表项周围的边框。

无法更改UWP应用的焦点行为，但您可能需要查看一些解决方法：
Stackoverflow - Remove focus on first textbox
Stackoverflow - How to not focus element on application startup?

Answer 3

您需要将SelectionMode属性设置为None以禁用ListView的项目选择：

 <ListView SelectionMode="None" ... />

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

3 个答案: