StackPanel within ItemsControl: Netflix poster style

Question

I would like to have a layout like Netflix when showing the movie posters:

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;

My answer in [this one](https://stackoverflow.com/questions/27611135/setting-the-groupstyle-panel-of-a-listview-on-windows-phone) might help, although it's in WP8.1, the concept is similar. What you do currently will struggle when there's a lot of data as ItemsControl doesn't support virtualization. — Justin XL, Aug 02 '17 at 06:30

score 0 · Answer 1 · answered Aug 01 '17 at 20:39

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>

Sadly the result is the same, I edited the question adding more info. — Maximiliano Santa Cruz, Aug 01 '17 at 20:49

score 0 · Accepted Answer · answered Aug 02 '17 at 03:20

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.

StackPanel within ItemsControl: Netflix poster style

Category

Category 2

2 Answers2