Tabcontrol contentTemplate positioning

Question

A happy newyear to all! thanks for reading this!

I'm having problems positioning dynamic content for the contentTemplate, I have the following:

<TabControl ItemsSource="{Binding Cats}">
            <TabControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Name}" FontSize="16" FontWeight="Bold"></TextBlock>
                </DataTemplate>                
            </TabControl.ItemTemplate>
            <TabControl.ContentTemplate>
                <DataTemplate>
                    <WrapPanel>
                        <ItemsControl ItemsSource="{Binding Products}">
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Button Content="{Binding Name}" Height="25" Width="100"></Button>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </WrapPanel>
                </DataTemplate>
            </TabControl.ContentTemplate>
        </TabControl>

the itemsSource binding cats returns a list of Categories and in each Categories there is a property returning a list of products

Currently is displaying all the buttons stacked vertically, but I need the buttons to fill the wrapPanel. An illustration of what I am looking for the contentTemplate:

Any ideas would be much appreciated!

Answer 1

You need to use a WrapPanel as the ItemsPanel template. See this question for a reference. Basically, you need to add this XAML in:

<ItemsControl ItemsSource="{Binding Products}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Button Content="{Binding Name}" Height="25" Width="100"></Button>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Note: You don't actually need to set the Orientation property of the WrapPanel, it's simply there for the sake of explicity.