Windows Phone 8.1 Layout

Question

I have the following code:

<PivotItem
    x:Uid="PivotDraw"
    Margin="19,14.5,0,0"
    Header="drawx"
    DataContext="{Binding Draw}"
    d:DataContext="{Binding Draws[0], Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:DataSource}}"
    CommonNavigationTransitionInfo.IsStaggerElement="True">
    <!--Double line list with text wrapping-->
    <ListView
        ItemsSource="{Binding Rounds}"
        IsItemClickEnabled="True"
        ItemClick="ItemView_ItemClick"
        ContinuumNavigationTransitionInfo.ExitElementContainer="True">
        <ListView.ItemTemplate>
            <DataTemplate>
                <StackPanel Margin="0,0,0,9.5">
                    <TextBlock
                        Text="{Binding RoundNumber}"
                        TextWrapping="Wrap"
                        Pivot.SlideInAnimationGroup="1"
                        CommonNavigationTransitionInfo.IsStaggerElement="True"
                        Style="{ThemeResource ListViewItemTextBlockStyle}"
                        Margin="0,0,19,0"/>
                    <ListView ItemsSource="{Binding Formations}">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding Shorthand}"></TextBlock>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</PivotItem>

Which gives me all the data I am trying to return, but not the layout I want. I am getting (in brackets is the biding property:

1 (round number)
A (formation shorthand)
B (formation shorthand)
C (formation shorthand)

2
D
E
F

When I am looking for:

Round 1 
A, B, C

Round 2  
D, E, F

Obviously the ListView is the wrong thing to use, might work for the individual rounds but not to display the formations on a single line, was mainly worried about getting the data I needed displayed at this point, but I am now unsure what control I am after to get the result I want.

Answer 1

You can set ListView.ItemsPanel of your inner ListView to StackPanel with Horizontal Orientation to get the result you want.

  <ListView ItemsSource="{Binding Formations}">
        <ListView.ItemsPanel>
          <ItemsPanelTemplate>
              <StackPanel Orientation="Horizontal"></StackPanel>
          </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Shorthand}"></TextBlock>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>