XAML GridView ใน GridView ที่มีการวางแนวต่างกัน

คุณใช้ ListView เฉพาะเมื่อคุณต้องการให้องค์ประกอบต่างๆ ในแนวตั้ง ไม่เช่นนั้น GridView จะแสดงสิ่งที่คุณต้องการทั้งหมด นำเสนอรายการในแนวนอน

การทำงานส่วนใหญ่ของทั้งสองก็เหมือนกัน

ถ้าฉันเข้าใจความต้องการของคุณถูกต้อง คุณสามารถมีตารางที่มีสองเซลล์ได้ ในเซลล์ด้านซ้ายจะเป็น scrollviewer พร้อม stackpanel ในเซลล์ที่สองจะเป็น scrollviewer พร้อม wrappanel ในแนวตั้ง

หากคุณต้องการรวมข้อมูลกับบางแหล่งรายการ ให้ใช้ itemscontrols กับ ItemsPanelTemplate แบบกำหนดเอง - stackpanel, wrappanel, Uniform grid, Canvas หรือแผงใดก็ได้ที่คุณต้องการ

แก้ไข: โค้ดตัวอย่างโดยใช้สองเซลล์ที่มี ListView และ IntemsControl โดยแต่ละเซลล์อยู่ใน scrollviewer ของตัวเอง:

<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; }
}

และผลลัพธ์:

คุณสามารถดำเนินการนี้ได้โดยใส่ทั้งแถวลงในเทมเพลตข้อมูล และใช้คอลัมน์ตารางเพื่อกำหนดความกว้าง:

    <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>

ตัวอย่างการทำงานง่ายๆ: การเชื่อมโยงเฉพาะออฟเซ็ตแนวตั้งของ scrollviewers สองตัวเท่านั้น

และฉันพบตัวอย่างขั้นสูงในตัวอย่างที่ 5 ของ "อินพุตและการจัดการ XAML - แนวคิดขั้นสูง": https://code.msdn.microsoft.com/windowsapps/XAML-input-and-manipulation-44125241