StackPanel within ItemsControl: Netflix poster style - xaml

Question

I would like to have a layout like Netflix when showing the movie posters:
Category
Poster1 Poster2 Poster3
Category 2
Poster1 Poster2 Poster3
I came up with this:
<ItemsControl Name="dataControl" ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel>
<TextBlock Width="100" Height="50" FontSize="14" Text="{Binding Key}"></TextBlock>
<ItemsControl Name="dataControl" ItemsSource="{Binding Value}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Content="{Binding MovieName}" Width="100" Height="100"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
It's bound to a Dictionary that's why you have Key and Value as bindings for the controls. Sadly, the end result is this:
Note that the "movie posters" instead of being aligned horizontally, they are aligned vertically.
It seems to create a stack of one item per "row", but I don't know how to tell it to create a one horizontal stack for all the related items.
This is the source:
Dictionary<string, List<Movie>> Source;
And this is the Movie class:
public class Movie
{
public string MovieName { get; set; }
}
And the control is binded this way:
dataControl.ItemsSource = Source;

Answer 1

To align the "movie posters" horizontally, you need to change the ItemsPanel like the following.
<ItemsControl Name="dataControl" ItemsSource="{Binding Value}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Content="{Binding MovieName}" Width="100" Height="100"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
ItemsPanel is used to defines the panel to use for the layout of the items. The default value for the ItemsControl is an ItemsPanelTemplate that specifies a StackPanel. And for StackPanel, it's Orientation is set to Vertical by default. That's why your items are aligned vertically.
The StackPanel under DataTemplate controls the layout inside each item, not the layout of items inside ItemsControl. So setting its Orientation to Horizontal won't work. And as you only have one Button for each item, you can just comment out the StackPanel.

Answer 2

The way your code is right now, you are telling each button to be inside it's own horizontally aligned StackPanel. You need to contain all the buttons inside one horizontal StackPanel. Try doing
<TextBlock Width="100" Height="50" FontSize="14" Text="{Binding Key}"></TextBlock>
<StackPanel Orientation="Horizontal">
<ItemsControl Name="dataControl" ItemsSource="{Binding Value}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Button Content="{Binding MovieName}" Width="100" Height="100"/>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>