Question

I am trying to do an interface in WPF where a list of item is displayed, taking as little vertical space as possible:

My instinct was to use an ItemsControl to bind my list, and to put the UI for each item into a WrapPanel. Unfortunately by default, each item starts at a new line regardless of the window’s size. Adding a StackPanel with Orientation="Horizontal" makes all items in a single line, regardless of the size…

    <!--<ScrollViewer Grid.Row="0" Grid.Column="0"
          VerticalScrollBarVisibility="Auto">-->
        <ItemsControl  Margin="0,4" ItemsSource="{Binding Path=Watchers}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"></StackPanel>
            </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.Resources>
                <DataTemplate DataType="{x:Type Core:Watcher}">
                    <WrapPanel Orientation="Horizontal">
                        <TextBlock Margin="0,2" Text="{Binding Path=Name}"
                        Width="250px" />
                        <TextBox Text="{Binding Path=Value, Mode=OneWay}" 
                        Width="300px">
                        </TextBox>
                    </WrapPanel>
                </DataTemplate>
            </ItemsControl.Resources>
        </ItemsControl>
    <!--</ScrollViewer>-->

Any pointers?

Bonus point: Where should I add a ScrollViewer in order to have the behavior shown in my mockup?

Thanks a lot!

Answer 1

The WrapPanel has, as well as the StackPanel, an Orientation property, which defaults to Vertical. So your list should wrap (assuming you have enough space at hand) if your ItemsPanelTemplate looks like this:

<ItemsPanelTemplate>
    <WrapPanel Orientation="Horizontal" />
</ItemsPanelTemplate>

About the ScrollViewer:

The desired behavior should be achieved by defining it like follows (not tested though, and I omitted all for this example unnecessary stuff):

<ScrollViewer HorizontalAlignment="Stretch">
    <ItemsControl MinWidth="550" Width="{Binding ActualWidth, Mode=OneWay, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ScrollViewer}}}" />
</ScrollViewer>