Alignment of nested databinding with ItemsControl in C# WPF

Question

I have the following datatemplate:

<ItemsControl x:Name="Groups" ItemsSource="{Binding Groups}">
    <ItemsControl.ItemTemplate>
         <DataTemplate>
               <StackPanel x:Name="GroupStackPanel" Orientation="Horizontal">
                    <GroupBox Header="{Binding Path=GroupName}">
                         <ItemsControl ItemsSource="{Binding Buttons}">
                               <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                         <StackPanel x:Name="BtnStackPanel" Orientation="Horizontal">
                                               <Button Content="{Binding Path=LabelString}"
                                                                Command="{Binding Path=ButtonCommand}"/>
                                          </StackPanel>
                                     </DataTemplate>
                                </ItemsControl.ItemTemplate>
                           </ItemsControl>
                      </GroupBox>
                 </StackPanel>
           </DataTemplate>
     </ItemsControl.ItemTemplate>
</ItemsControl>

This includes some ButtonGroups and Buttons which are in this Group.

The class Group includes a string-property "GroupName" and an ObservableCollection-property "Buttons". The allocation of buttons and groups is working correctly.

So here is my problem: I want to have this buttongroups in a ribbontab in the dockpanel. But the alignment or the orientation is false, so the buttons are one below the other and not next to each other. Has anyone an idea what is wrong in my code?

Answer 1

At the moment, you're using a Stackpanel with horizontal orientation, which is the right idea, but the Stackpanel is in the wrong place (the ItemTemplate). The ItemTemplate is applied to every item in an ItemsControl, which means that your XAML represents a collection of buttons where each is surrounded by its very own StackPanel.

To have the desired effect, you instead need to specify the Stackpanel as the ItemsPanelTemplate of the ItemsControl.

Try changing your inner clause to:

<ItemsControl ItemsSource="{Binding Buttons}">
   <ItemsControl.ItemTemplate>
     <DataTemplate>
       <Button Content="{Binding Path=LabelString}" Command="{Binding Path=ButtonCommand}"/>
     </DataTemplate>
   <ItemsControl.ItemsPanel>
     <ItemsPanelTemplate>
       <StackPanel x:Name="BtnStackPanel" Orientation="Horizontal">
     </ItemsPanelTemplate>  
   <ItemsControl.ItemsPanel>
</ItemsControl>

Edit

If you want both groups and buttons to display horizontally, you can do the same thing to both:

 <ItemsControl x:Name="Groups" ItemsSource="{Binding Groups}">
   <ItemsControl.ItemTemplate>
     <DataTemplate>         
       <GroupBox Header="{Binding Path=GroupName}">
          <ItemsControl ItemsSource="{Binding Buttons}">
             <ItemsControl.ItemTemplate>
               <DataTemplate>
                 <Button Content="{Binding Path=LabelString}" Command="{Binding Path=ButtonCommand}"/>
               </DataTemplate>
             <ItemsControl.ItemsPanel>
               <ItemsPanelTemplate>
                 <StackPanel x:Name="BtnStackPanel" Orientation="Horizontal"/>
               </ItemsPanelTemplate>  
             <ItemsControl.ItemsPanel>
          </ItemsControl>
        </GroupBox>
     </DataTemplate>
   </ItemsControl.ItemTemplate>
   <ItemsControl.ItemsPanel>
     <ItemsPanelTemplate>
       <StackPanel x:Name="GroupStackPanel" Orientation="Horizontal"/>
     </ItemsPanelTemplate>
   <ItemsControl.ItemsPanel>
 </ItemsControl>