5

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.

ListView Selection with checkmark and padding

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

Filip Skakun
  • 31,624
  • 6
  • 74
  • 100
ppaulojr
  • 3,579
  • 4
  • 29
  • 56

1 Answers1

16

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: enter image description here

Filip Skakun
  • 31,624
  • 6
  • 74
  • 100
  • 5
    Filip, this should be a blog article. Write it so I can link to it! – Jerry Nixon Feb 21 '13 at 18:39
  • Why not just link to this answer - http://stackoverflow.com/questions/14987745/listview-selection-display-with-no-padding-and-no-checkmark/14990251#14990251? :) – Filip Skakun Feb 21 '13 at 18:45
  • 2
    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. – Filip Skakun Feb 21 '13 at 18:48
  • Thanks. It solved most of the problem and it was a great answer. I just need now to get rid of this padding: https://dl.dropbox.com/u/5860252/Image362.png – ppaulojr Feb 21 '13 at 20:21
  • 1
    The horizontal `StackPanel` in your item template has the `Width` set to 230, but that is not how `StackPanel.ActualWidth` gets set. The `Width`s and `Margin`s 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. – Filip Skakun Feb 21 '13 at 20:27
  • 2
    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. – anderZubi Nov 28 '13 at 23:03
  • 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. – Filip Skakun Nov 29 '13 at 05:15
  • Unfortunately `ItemContainerStyle` template is not available under the Addition Templates menu in Visual Studio 2015 and Blend - where can I find the default template? – Brendan May 18 '16 at 13:11
  • If you search online for "listviewitem default template" - it will be the first result. You can also search for – Filip Skakun May 19 '16 at 17:39