Question

（标题编辑）

如何使用XAML执行此操作？水平宽度是固定的，必须可滚动。

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

enter image description here

Answer 1

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

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

Answer 2

如果我正确理解您的要求，您可以使用两个单元格。在左边的单元格中将是带有stackpanel的scrollviewer，在第二个单元格中将是带有垂直方向的wrappanel的scrollviewer。

如果你需要数据绑定到某个itemssource，请使用带有自定义ItemsPanelTemplate的itemscontrols - 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; }
}

结果：

enter image description here

Answer 3

您可以通过将整行放入datatemplate并使用网格列设置宽度来完成此工作：

    <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输入和操作 - 高级概念”的第5个示例中找到了高级示例：https://code.msdn.microsoft.com/windowsapps/XAML-input-and-manipulation-44125241

GridView中的XAML GridView具有不同的方向

4 个答案: