CODEWITHSUNDEEP
wpf
Alan Baljeu
Alan Baljeu

Reputation: 2433

How do I make my ItemsControl items appear in a staggered wrap

The code below gives me a grid of items, even though each item is naturally of a different height. Supposedly I'm supposed to set the height of something, but I don't know what that thing is, or where I get the value I need.

I want    I get
a  c      a c
a  c      a c
a  d      a .
b  d      b d
b  d      b d
          . d

code:

      <ItemsControl  ItemsSource="{Binding XPath=*}" Margin="20,0,0,0">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel 
                       Orientation="vertical" <!-- edit: adding this line solved it -->
                     />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
              <DataTemplate>
                <W3V:ControlChooser Content="{Binding}"/>
              </DataTemplate>
            </ItemsControl.ItemTemplate>
  </ItemsControl>

Upvotes: 0

Views: 214

Answers (1)

brunnerh
brunnerh

Reputation: 184296

If the item order does not need to be left-to-right, then changing WrapPanel.Orientation should be enough.

Edit: Just tested it and it works as i expected:

enter image description here

Underlying code:

<ItemsControl ItemsSource="{Binding Users}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Height" Value="{Binding Height}"></Setter>
            <Setter Property="Width" Value="200px"></Setter>
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Vertical"></WrapPanel>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

Upvotes: 1

Related Questions