Question

I have the following XAML for a databound items control to show a list of groups, with a label and button to add a new group appearing first:

<WrapPanel Orientation="Horizontal">
    <Label Content="Groups" />
    <Button x:Name="btnGroupAdd" Click="btnGroupAdd_Click" Content="+" />
    <ItemsControl ItemsSource="{Binding}" x:Name="_groupList" >
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel Orientation="Horizontal">
                </WrapPanel>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border Padding="3" BorderThickness="1">
                    <WrapPanel>
                        <CheckBox x:Name="_groupEnabled" Click="GroupEnabled_Click" IsChecked="{Binding Path=Checked}">
                            <TextBlock x:Name="_groupName" Text="{Binding Path=Group.Name}" ></TextBlock>
                        </CheckBox>
                        <Button x:Name="_deleteGroup" FontStyle="Normal" Click="DeleteGroup_Click" />
                    </WrapPanel>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

With a small number of groups, everything appears on one line.

Groups + Group1 Group2 Group3

When I add more groups, the wrap panel containing the items wraps, but the initial label and button to add a new group is on its own row, with the databound groups starting on the next row.

Groups +
Group1 Group2 Group3 Group4
Group5

I can understand why this is happening, as the wrap panels are nested. My question is: how do I include the first label and button in the inner wrap panel so that they aren’t on a row on their own?

Groups + Group1 Group2 Group3
Group4 Group5

Answer 1

If you’re happy with this:

Groups + Group1 Group2 Group3
                Group4 Group5

Then I would suggest using an outer Grid and an inner WrapPanel. Otherwise, your options are:

1. Include the other controls (Label and Button) or a view model reprenting those controls in the collection you’re binding to.
2. Write your own Panel.