XAML 不同方向的 GridView 中的 GridView

Question

（标题已编辑）

如何用 XAML 做到这一点？水平宽度是固定的，必须是可滚动的。

可能是 GridView 或其他控件，如 ItemsControl 或 StackPanel。

Answer 1

仅当您需要垂直方向的元素时才使用 ListView，否则 GridView 会显示您需要的所有内容。它在水平方向上呈现项目。

两者大部分功能相同

Answer 2

如果我对您的要求理解正确，您可以使用包含两个单元格的网格。在左侧单元格中将是带有堆栈面板的滚动查看器，在第二个单元格中将是带有垂直方向的包装面板的滚动查看器。

如果您需要将数据绑定到某些项目源，请将项目控件与自定义 ItemsPanelTemplate - stackpanel、wrappanel、uniform grid、canvas 或您需要的任何面板一起使用。

编辑：使用带有 ListView 和 IntemsControl 的两个单元格的示例代码，每个单元格都在其自己的滚动查看器中：

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

结果：

Answer 3

您可以通过将整行放入数据模板并使用网格列设置宽度来实现此目的：

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

Answer 4

简单的工作示例：Linking only vertical offset of two scrollviewers

我在 "XAML input and manipulations - advanced concepts" 的第 5 个示例中找到了高级示例：https://code.msdn.microsoft.com/windowsapps/XAML-input-and-manipulation-44125241

XAML 不同方向的 GridView 中的 GridView

XAML GridView in GridView with different orientation

xaml

windows-runtime

windows-store-apps