Listview selection display with no padding and no checkmark

Question

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?

Inenarrable

Answer 1

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.

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.

Here's an annotated screenshot from Blend:

Alarise

Filip, this should be a blog article. Write it so I can link to it! – Neill

Why not just link to this answer - #14988245? :) – Alarise

Seriously there is so much good material on StackOverflow - I would gladly have some of my answers on my blog, but I am not sure of the value since everyone will look on here first anyway. – Alarise

Thanks. It solved most of the problem and it was a great answer. I just need now to get rid of this padding: dl.dropbox.com/u/5860252/Image362.png – Inenarrable

The horizontal StackPanel in your item template has the Width set to 230, but that is not how StackPanel.ActualWidth gets set. The Widths and Margins of the child items of that StackPanel add up to only 210, so you need to add 20 in there somewhere, for example change the Margin of that Border from 5 to 15,5. – Alarise

Just trying to edit the Generated Item Container (ItemContainerStyle) of my ListView, I find that I don't see all the elements as in your screenshot. I just see ListViewItemPresenter element, which doesn't help me much. Apart from removing background and check, I'd like to have different FontWeight on selected item. – Thorite

I believe the templates have changed a bit in 8.1, possibly at least in part for performance reasons. I think you need to ask a separate question for what you are looking for though. – Alarise

Unfortunately ItemContainerStyle template is not available under the Addition Templates menu in Visual Studio 2015 and Blend - where can I find the default template? – Vizard

If you search online for "listviewitem default template" - it will be the first result. You can also search for <Style TargetType="ListViewItem"> or <Style TargetType="ListViewItem" x:Key="ListViewItemExpanded"> in "c:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10586.0\Generic\generic.xaml" – Alarise