C# WPF XAML rotate list of records

Question

I am working through creating something that looks like the image below

I am reasonably sure I am on the right track with the XAML however I am struggling to get the images to rotate so they flow left to right. Ideally I would like to use a WrapPanel but a StackPanel would do too.

This is where I am at this point

and this is the XAML I have at this point

<UserControl x:Class="SAFEPanel.LatestDeal.LatestDeal"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:xpanels="clr-namespace:SAFEPanel.XPanel"
         mc:Ignorable="d" Width="575" Height="239">
<Grid>
    <ItemsControl ItemsSource="{Binding Deals}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Black" BorderThickness="4" CornerRadius="4">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="80*"/>
                            <ColumnDefinition Width="30*"/>
                            <ColumnDefinition Width="30*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel  Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Label x:Name="CompanyName" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Content="{Binding CompanyName}" Width="130" Height="32"/>
                            <Label x:Name="CandidateName" HorizontalContentAlignment="Left" HorizontalAlignment="Left" Content="{Binding CompanyName}" Width="130" Height="32"/>
                            <Label x:Name="Startdate" HorizontalContentAlignment="Left"  HorizontalAlignment="Left" Content="{Binding Startdate}" Width="130" Height="32"/>
                            <Label x:Name="Fees" HorizontalContentAlignment="Left"  HorizontalAlignment="Left" Content="{Binding Fees}" Width="130" Height="32"/>
                        </StackPanel>
                        <StackPanel Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Label x:Name="TitleCompanyName" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Content="Company" Width="130" Height="32"/>
                            <Label x:Name="TitleCandidateName" HorizontalAlignment="Left" Content="Candidate" Width="130" Height="32"/>
                            <Label x:Name="TitleStartdate" HorizontalAlignment="Left" Content="Start" Width="130" Height="32"/>
                            <Label x:Name="TitleFees" HorizontalAlignment="Left" Content="Fees" Width="130" Height="32"/>
                        </StackPanel>
                        <WrapPanel  Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Orientation="Horizontal">

                            <ItemsControl ItemsSource="{Binding Contributors}">
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Orientation="Vertical">
                                            <Image Source="{Binding ImagePathName}" MaxHeight="110" MaxWidth="110"/>
                                            <Label HorizontalAlignment="Center"  Grid.ColumnSpan="2" HorizontalContentAlignment="Left" Content="{Binding ContributorText}" Width="130" Height="32"/>
                                        </StackPanel>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>

                        </WrapPanel>

                    </Grid>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

Possible duplicate of [WrapPanel as ItemPanel for ItemsControl](http://stackoverflow.com/questions/3131919/wrappanel-as-itempanel-for-itemscontrol) — Massimiliano Kraus, Dec 09 '16 at 15:39

score 0 · Accepted Answer · answered Dec 09 '16 at 16:43

As Massimiliano Kraus suggests you should use a WrapPanel as the ItemsPanel of the inner ItemsControl, i.e. you don't put the entire inner ItemsControl itself in a WrapPanel but you use a WrapPanel as its ItemsPanel in order for the StackPanels in each of the ItemTemplates to be added to a WrapPanel and get wrapped from left to right:

    <ItemsControl ItemsSource="{Binding Deals}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Border BorderBrush="Black" BorderThickness="4" CornerRadius="4">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="80*"/>
                            <ColumnDefinition Width="30*"/>
                            <ColumnDefinition Width="30*"/>
                        </Grid.ColumnDefinitions>
                        <StackPanel  Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            ...
                        </StackPanel>
                        <ItemsControl ItemsSource="{Binding Contributors}" Grid.Column="0">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <WrapPanel />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Vertical">
                                        <Image Source="pic.png" MaxHeight="110" MaxWidth="110"/>
                                        <Label HorizontalAlignment="Center"  Grid.ColumnSpan="2" HorizontalContentAlignment="Left" Content="ContributorText" Width="130" Height="32"/>
                                    </StackPanel>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </Grid>
                </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>

C# WPF XAML rotate list of records

1 Answers1