CODEWITHSUNDEEP
c#wpfxaml
Tokfrans
Tokfrans

Reputation: 1959

WrapPanel with both horizontal and vertical orientation

I have a ListBox which holds three different sized types of items. The items' heights are the following:

I want the layout of the items with no padding or margin between them.

But I'm getting this result:

enter image description here

There is a margin between items with different height/width.

What I want to do is to remove this margin between these items and have them right next to each other, but I do not know what panel to use, or what to style.

Here is the XAML for the ListBox. The items are part of a viewmodel with an enum representing the aspect ratio (16:9, 1:1, 9:16)

<ListBox x:Name="previewList">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Width="525" IsItemsHost="True"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid Height="{Binding Path=previewSize, Converter={StaticResource sizeConverter}, ConverterParameter={StaticResource True}}"
                  Width="{Binding Path=previewSize, Converter={StaticResource sizeConverter}, ConverterParameter={StaticResource False}}" Background="Blue">

            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
            <Setter Property="Padding"
            Value="0"/>
        </Style>
    </ListBox.ItemContainerStyle>
</ListBox>

Upvotes: 1

Views: 304

Answers (2)

Emmanuel DURIN
Emmanuel DURIN

Reputation: 4913

Tokfrans,

You need to remove the border on the ListViewItems.

  1. Create a ListViewItemStyle resource ( you can right click on the Listbox/Edit Additional templates/Edit Copy)

enter image description here

  1. The created XAML follows with hand modification of the BorderThickness :

EDIT : ** ** Sorry the XAML solution not visible !

<Window.Resources>
    <Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Padding"
            Value="0"/>
        <Setter Property="BorderThickness"
            Value="0"/>
    </Style>
</Window.Resources>

And the style is assigned to the ListBox : 

<ListBox x:Name="previewList" ItemContainerStyle="{DynamicResource ListBoxItemStyle1}">

Regards

Upvotes: 2

Daniel Rose
Daniel Rose

Reputation: 17638

The standard styles of the various controls often have a small (1-2 pixel) built-in Margin and/or Padding. I'm guessing that this is what you are seeing here. You can try to fix this by:

  1. setting a zero or even negative Padding and/or Margin (you'll have to test what looks correct).
  2. creating your own ControlTemplate, removing the built-in Margin/Padding.

Upvotes: 1

Related Questions