Listview 选择显示，无填充且无复选标记 [英] Listview selection display with no padding and no checkmark

问题描述

我有这个 XAML 来在 C++/CX 代码中显示一个 ListView.ListView 将用作选择菜单.

I have this XAML to display a ListView in a C++/CX code. The ListView will be used as a selection menu.

<ListView x:Name="itemsListView"
 ItemsSource="{Binding Source={StaticResource MenuDataSourceCVS}}"
 HorizontalAlignment="Stretch"
 Width="230"
 Margin="0,45,0,0"
 VerticalAlignment="Top"
 Grid.Row="1"
 SelectionChanged="itemsListView_SelectionChanged" SelectionMode="Single"
 HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"
 FontFamily="Global User Interface">
 <ListView.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal" Height="40" Width="230">
            <TextBlock Text="{Binding Name}"
                Margin="10,5" Width="150" Height="30"
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"/>
            <Border Height="30" Width="30" Margin="5">
                <Image Source="{Binding ImageSrc}" Stretch="Fill"/>
            </Border>
        </StackPanel>
    </DataTemplate>
 </ListView.ItemTemplate>
</ListView>

如下图所示，所选内容并未占据所有列，并在选中时显示一个复选标记.

As you can see in the figure bellow the selection does not occupy all the column and displays a checkmark when selected.

有没有办法消除这个填充和复选标记?

Is there a way to eliminate this padding and the checkmark?

推荐答案

您需要在 Blend 中打开您的视图，然后右键单击列表并选择编辑附加模板"/编辑生成的项目容器 (ItemContainerStyle)"/"编辑副本".然后，您可以编辑 ListView 生成的 ListViewItem 的 Style，当它填充您的项目时.在左侧的状态"选项卡中，您可以看到 ListViewItem 使用的状态.当您选择其中之一时 - 设计图面会显示 ListViewItem 在该状态下的外观，并且还会切换到记录模式，您可以在其中定义模板的各种元素属性的属性值.然后您可以查看哪些元素受到视觉状态动画的影响，并修改这些动画或删除元素本身.如果您删除 Blend 中的元素 - 所有相关的视觉状态动画都将自动删除，因此在您的情况下，您可以在 SelectionStates VisualStatesGroup 中看到 Selected 状态将 SelectionBackground 元素的 Opacity 更改为 1.您可以修改所有状态中的目标 Opacity 值，将其修改为另一个所需的值或简单地通过在对象和时间轴"面板中选择它来删除 SelectionBackground 元素(它实际上将从所有状态的模板中删除它并删除影响它的所有动画).那么您可能同样想要删除 HintGlyphBorder、SelectingGlyph、SelectedCheckMarkOuter.

You need to open your view in Blend, then right click the list and select "Edit Additional Templates"/"Edit Generated Item Container (ItemContainerStyle)"/"Edit a Copy". Then you can edit the Style for the ListViewItem generated by the ListView when it is populated with your items. In the "States" tab on the left you can see the states used by the ListViewItem. When you select one of them - the design surface shows what the ListViewItem looks like in that state and it also switches to recording mode where you can define the property values of various element properties of the template. Then you can see which elements are affected by visual state animations and either modify these animations or remove the elements themselves. If you remove an element in Blend - all related visual state animations will be deleted automatically, so in your case you can see that in the SelectionStates VisualStatesGroup the Selected state changes the SelectionBackground element's Opacity to 1. You can either modify that target Opacity value in all states that modify it to another desired value or simply remove the SelectionBackground element by selecting it in the "Objects and Timeline" panel (it will actually remove it from the template for all states and remove all animations that affect it). Then you may similarly want to remove HintGlyphBorder, SelectingGlyph, SelectedCheckMarkOuter.

要删除填充 - 确保通过单击微小的红色录制按钮或将状态"选项卡中当前显示的状态切换回基础"，确保禁用状态录制，然后选择 ContentBorder 并将其在属性"选项卡中的 Margin 更改为 0,0,0,0 并对 SelectedBorder 执行相同操作.

To remove the padding - make sure to disable recording for the state either by clicking the tiny red recording button or by switching the currently displayed state in the "States" tab back to "Base", then select ContentBorder and change its Margin in the "Properties" tab to 0,0,0,0 and do the same for SelectedBorder.

这是来自 Blend 的带注释的屏幕截图:

Here's an annotated screenshot from Blend:

这篇关于Listview 选择显示，无填充且无复选标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！