Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Too much spacing between StackPanel items in Windows Store app

I'd like to arrange some TextBlocks horizontally without any margins. I can see that my TextBlock is as small as it should be, but for some reason a lot of space is added around it. I think it has something to do with the ListView or its styling, but I don't know what.

enter image description here

I have a following layout:

<ListView Width="Auto" SelectionMode="None" Background="#654321" ItemsSource="{Binding}">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <Border Background="Black">
               <TextBlock Text="{Binding}" Margin="0,0,0,0"/>
            </Border>
        </DataTemplate>
    </ListView.ItemTemplate>
    <x:String>A</x:String>
    <x:String>B</x:String>
    <x:String>C</x:String>
    <x:String>D</x:String>
    <x:String>E</x:String>
</ListView>
like image 379
Axarydax Avatar asked Apr 21 '14 18:04

Axarydax


Video Answer


2 Answers

What you need to change is the ItemContainerStyle. You can get the Style from here.

The big thing to notice is that the default Margin of the Style is:

<Setter Property="Margin" Value="0,0,18,2"/>

Which explains the large gap. Change it to:

<Setter Property="Margin" Value="0,0,0,2"/>

And that should help solve your issue.

One last thing to note is that they also have a default ContentMargin="4" (if using the ListViewItemsPresenter) or a bunch of Margins of 4 spread throughout the style (especially on the Borders), which you may need to change as well.

like image 52
Nate Diamond Avatar answered Sep 19 '22 21:09

Nate Diamond


The other way to look at it - ListView is really designed as a control where you can tap, select, drag and otherwise interact with the items. I think if you want to remove all the features that ensure the sizes are touchable with fat fingers - you might just be better off using something like the base ItemsControl or ListBox which might not have these limitations. If you get rid of all the margins and leave your items so small - there's no point in using the ListView and it will just complicate things and make performance bad.

like image 32
Filip Skakun Avatar answered Sep 21 '22 21:09

Filip Skakun