不同方向的 GridView 中的 XAML GridView答案

【问题标题】：XAML GridView in GridView with different orientation不同方向的 GridView 中的 XAML GridView
【发布时间】：2015-03-11 04:22:43
【问题描述】：

（标题已编辑）

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

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

【问题讨论】：

我找到了答案，它有效！ stackoverflow.com/questions/22812456/…

标签： xaml windows-runtime windows-store-apps

【解决方案1】：

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

两者的大部分功能是相同的。

【讨论】：

@Seema_Soam 谢谢，但问题还没有解决。即使我使用 GridView，我也找不到图示示例的示例

【解决方案2】：

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

如果您需要将数据绑定到某些项目源，请使用带有自定义 ItemsPanelTemplate 的项目控件 - 堆栈面板、包装面板、统一网格、画布或任何您需要的面板。

编辑：使用带有 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; }
}

结果：

【讨论】：

是的，但是如果我想滚动第一个垂直堆栈面板...第二个单元格呢？它会与第一个单元格一起滚动吗？反之亦然。
我不太明白。您将有两个滚动查看器，每个都单独滚动，具体取决于鼠标光标的位置。您是否需要一些额外的行为，例如当您滚动第一个单元格丢失并且到达最后时，第二个单元格应该开始滚动？
不，你能想象一下，我们有哪些学生名单，网格的第一个单元格，网格的第二个单元格中有日常标记？是的，这很容易想象，但我无法用 XAML 编写代码。
这种情况很简单。在第一个单元格中使用列表视图，在第二个单元格中使用网格视图。
请看我实现的图片：tinypic.com/r/24wyidj/8蓝色区域必须与橙色区域滚动。但是橙色区域可能有 30 天，并且此标记表无法在屏幕中显示，因此橙色区域必须是可滚动的，而蓝色区域必须是固定的

【解决方案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>

【讨论】：

例如，您可以在 Excel for windows phone 中看到它
我认为这就是你想要的。如果您希望它们全部同时滚动，那么 SO 上有很多这样的示例。

【解决方案4】：

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

我在“XAML 输入和操作 - 高级概念”的第 5 个示例中找到了高级示例：https://code.msdn.microsoft.com/windowsapps/XAML-input-and-manipulation-44125241

【讨论】：