XAML GridView di GridView dengan orientasi berbeda

Anda menggunakan ListView hanya ketika Anda perlu memiliki elemen dalam arah vertikal, jika tidak, GridView akan menyajikan semua yang Anda perlukan. Ini menyajikan item dalam arah horizontal.

Sebagian besar fungsi keduanya sama.

Jika saya memahami kebutuhan Anda dengan benar, Anda dapat memiliki kotak dengan dua sel. Di sel kiri akan ada scrollviewer dengan stackpanel, di sel kedua akan ada scrollviewer dengan wrappanel dengan orientasi vertikal.

Jika Anda perlu menggabungkan data ke beberapa sumber item, gunakan kontrol item dengan ItemsPanelTemplate khusus - panel tumpukan, panel pembungkus, kisi seragam, kanvas, atau panel apa pun yang Anda perlukan.

EDIT: contoh kode menggunakan dua sel dengan ListView dan IntemsControl, masing-masing dalam scrollviewernya sendiri:

<ScrollViewer HorizontalScrollBarVisibility="Disabled">
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition />
        </Grid.ColumnDefinitions>

        <ListView x:Name="StudentsListView"  ItemsSource="{Binding Students}">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Border Background="#484" Height="90"  Width="200">
                        <TextBlock Text="{Binding Name}" FontSize="24"  HorizontalAlignment="Center" VerticalAlignment="Center"  />
                    </Border>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        <ScrollViewer Grid.Column="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" ZoomMode="Disabled">
            <ItemsControl ItemsSource="{Binding Students}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <ItemsControl ItemsSource="{Binding Markings}">
                            <ItemsControl.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Horizontal" />
                                </ItemsPanelTemplate>
                            </ItemsControl.ItemsPanel>
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Border Background="#888" Height="90" Width="90" Margin="5">
                                        <TextBlock Text="{Binding }" FontSize="48" HorizontalAlignment="Center" VerticalAlignment="Center"  />
                                    </Border>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ScrollViewer>


    </Grid>
</ScrollViewer>

public class ViewModel
{
    public ViewModel()
    {
        Students = Enumerable.Range(0, 25)
            .Select(i => new Student
            {
                Name = "Student " + i,
                Markings = Enumerable.Range(1, 30).Select(j => (j + i) % 5 + 1).ToList()
            }).ToList();
    }

    public List<Student> Students { get; set; }
}

public class Student
{
    public string Name { get; set; }
    public List<int> Markings { get; set; }
}

dan hasilnya:

Anda dapat membuat ini berfungsi dengan memasukkan seluruh baris ke dalam templat data dan menggunakan kolom kisi untuk mengatur lebarnya:

    <ListView Width="500" Height="500" ItemsSource="{Binding Data}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="{Binding Item}" Grid.Column="0"/>
                    <ListView ItemsSource="{Binding SubItems}" Grid.Column="1"
                                ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                ScrollViewer.HorizontalScrollMode="Enabled"
                                SelectionMode="None">
                        <ListView.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel
                                    Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </ListView.ItemsPanel>
                    </ListView>
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Contoh kerja sederhana: Menautkan hanya offset vertikal dari dua scrollviewer

Dan saya menemukan contoh lanjutan dalam sampel ke-5 dari "input dan manipulasi XAML - konsep lanjutan": https://code.msdn.microsoft.com/windowsapps/XAML-input-and-manipulation-44125241