Windows8 ListView and space between items

Question

I want to change spacing between items in listView (maybe i should use another View-element?) Code looks like this:

    <ListView SelectionMode="None" HorizontalContentAlignment="Left" >
        <ListView.Items>
            <TextBlock Text="Item 1" />
            <TextBlock Text="Item 2" />
            <TextBlock Text="Item 3" />
            <TextBlock Text="Item 4" />
        </ListView.Items>
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapGrid Orientation="Horizontal" HorizontalChildrenAlignment="left"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
    </ListView>

I want to imitate as much as possible normal stackpanel (wchich can wrap elements). Currently spaces (horizontal space) beetween items are far too big. My previous question -> Windows 8 WrapPanel

Thanks in advance

Iris Classon · Accepted Answer · 2015-09-26T23:27:36.350

30

You will need to make changes to the default template. If you just want to make simple changes such as the padding and margins then you can do this: (tested the code and should work)

            <ListView>
        <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Horizontal" HorizontalChildrenAlignment="left"/>
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
        <ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Margin" Value="0"/>
                </Style>
            </ListView.ItemContainerStyle>
            <ListViewItem>
                <TextBlock Foreground="Wheat">hej</TextBlock>
            </ListViewItem>
            <ListViewItem>
                <TextBlock Foreground="Wheat">hej</TextBlock>
            </ListViewItem>
        </ListView>

For more control make a copy of the whole default template by selecting a listviewitem in the designer and rightclicking. select edit template, edit copy. This will generate the default template and you can make your changes there. You can do the same for the listviewcontainer. You can also do this by using Blend.

I've added a description and images here (how you can edit a default template)

Let me know how it goes, and if you have more questions! Good luck!

EDIT:

MemeDeveloper mentioned below that he still had issues and solved it by tweaking some other properties- he posted a code and answer here, make sure to take a look.

edited Sep 26 '15 at 23:27

answered Jul 22 '12 at 00:43

Iris Classon

5,752
3
33
52

Thanks for help :) One more question. I was almost sure that it should be done int his way but I couldn't find any tool where i could edit that styles. How can I do this in Blend for example? – Krzysztof Kaczor Jul 22 '12 at 12:08
2

I've posted a blog-post where I've included description and images for how to do it in VS or blend :) Hope it helps! Don't hesitate to ask more questions etc. Link: http://www.irisclasson.com/2012/07/22/example-winrtmetro-app-how-to-edit-default-template-in-visual-studio-2012-and-blend/ – Iris Classon Jul 22 '12 at 16:01
NP, glad to be able to help :) Have fun programming :) – Iris Classon Jul 22 '12 at 20:42
1

I had to do to get this to work for me. – swinefeaster Aug 10 '13 at 05:52
I think the "proper" / best way to do this is in my answer http://stackoverflow.com/a/23817931/661584 I had problems with all the other solutions I've seen. – MemeDeveloper Aug 20 '15 at 04:23
This works very well for ListBox too (if you change the TargetType to ListBoxItem of course! – henon Nov 28 '16 at 14:03

MemeDeveloper · Answer 2 · 2016-01-30T10:01:20.870

As far as I know (windows8.1 xaml store app), after setting these two to zero

<ListView.ItemContainerStyle>
                <Style TargetType="ListViewItem">
                    <Setter Property="Padding" Value="0"/>
                    <Setter Property="Margin" Value="0"/>

I still had frustrating gaps I seemingly could not get rid of.

Using negative margins here might do it for you but... its hacky, hard to work with, and will not always lead to expected results

After pulling my hair out I found the issue was resolved with these guys i.e.

ContentMargin="0" Padding="0"

In the ListViewItemPresenter as follows :

        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="Padding" Value="0" />
                <Setter Property="Margin" Value="0" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="VerticalContentAlignment" Value="Top" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <ListViewItemPresenter ContentMargin="0" Padding="0" />
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>

Hope that saves someone else from smashing their head repeatedly on their keyboard ;)

You saved my day, mate :-):-). I was trying to find this since many days. — Kinjan Bhavsar, Apr 15 '15 at 12:19
I've spent hours on this, and would have spent days if I hand't found this! — Stephen Hosking, Feb 26 '18 at 07:11
I still needed a negative ContentMargin to reduce the margins further. — Stephen Hosking, Feb 26 '18 at 07:42

score 13 · Answer 3 · answered Nov 10 '15 at 06:18

13

I think the correct ItemContainerStyle Property to modify here is MinHeight, not Margin or Padding.

answered Nov 10 '15 at 06:18

Peter Meinl

2,566
25
39

1

Spot on! This worked for me after a whole bunch of trial and error. – Ash May 09 '18 at 08:06
1

Wow, not only it works great for original purpose, but also it works wonderfully when the window size is reduced: previously, the some bottom list items were clipped, and now, it doesn't! – Brian Hong Oct 23 '20 at 19:33

score 2 · Answer 4 · answered Jul 21 '12 at 20:28

2

You need to edit the ListBox.ItemContainerTemplate property. Blend or VS visual designer helps extract it for modification.

answered Jul 21 '12 at 20:28

Filip Skakun

31,624
6
74
100

...yes and particularly, within it the ListViewItemPresenter's ContentMargin and Padding properties – MemeDeveloper May 23 '14 at 06:35

score 1 · Answer 5 · answered Nov 19 '14 at 10:19

Solution for eleminating margins in GridView items for Windows 8.1 Store App. Inspired by above ListView solution.

<GridView.ItemContainerStyle>
<Style TargetType="GridViewItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewItem">
                <GridViewItemPresenter ContentMargin="0" Padding="0"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
</GridView.ItemContainerStyle>

score 0 · Answer 6 · answered Dec 20 '22 at 22:09

For WinUI3 these few lines helped me to get rid of space between rows:

                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="MinHeight" Value="0" />
                    </Style>
                </ListView.ItemContainerStyle>

I hope to help someone.

Windows8 ListView and space between items

6 Answers6

Linked