Windows8 ListView and space between items

Krzysztof Kaczor picture Krzysztof Kaczor · Jul 21, 2012 · Viewed 16.4k times · Source

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

Answer

Iris Classon picture Iris Classon · Jul 22, 2012

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.