Question

我有一个MyClass列表：

 public class MyClass
        {
            public int Id { get; set; }
            public string Name { get; set; }
            public string Type { get; set; }
        }

我想在水平滚动视图中显示此列表。我在XAML中做这件事并且很难找到例子。我现在得到了这个：

<ScrollView Orientation="Horizontal">
      <ListView x:Name="MyClassList"
                  ItemsSource="{Binding MyClassList}"
                    RowHeight="210">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <Grid Padding="5">
            <Grid.RowDefinitions>
              <RowDefinition Height="20"></RowDefinition>
              <RowDefinition Height="20"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="1*"></ColumnDefinition>
              <ColumnDefinition Width="1*"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <Label Grid.Row="0" Grid.Column="0" Text="Name:" LineBreakMode="TailTruncation"></Label>
            <Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" LineBreakMode="TailTruncation"></Label>
            <Label Grid.Row="1" Grid.Column="0" Text="Type:" LineBreakMode="TailTruncation"></Label>
            <Label Grid.Row="1" Grid.Column="1" Text="{Binding Type}" LineBreakMode="TailTruncation"></Label>

          </Grid>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
    </ScrollView>

但是这会以垂直方式呈现列表。有关如何水平滚动此列表的任何提示？

Answer 1

我不完全确定我是否理解这个问题。我的解释是你希望ListView本身水平而不是垂直地添加元素。

这可以通过将ListViews ItemsPanel设置为水平StackPanel来实现。

试试这个：

<ScrollView Orientation="Horizontal">
    <ListView x:Name="MyClassList"
                  ItemsSource="{Binding MyClassList}"
                  RowHeight="210">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"></StackPanel>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Padding="5">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="20"></RowDefinition>
                            <RowDefinition Height="20"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*"></ColumnDefinition>
                            <ColumnDefinition Width="1*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>

                        <Label Grid.Row="0" Grid.Column="0" Text="Name:" LineBreakMode="TailTruncation"></Label>
                        <Label Grid.Row="0" Grid.Column="1" Text="{Binding Name}" LineBreakMode="TailTruncation"></Label>
                        <Label Grid.Row="1" Grid.Column="0" Text="Type:" LineBreakMode="TailTruncation"></Label>
                        <Label Grid.Row="1" Grid.Column="1" Text="{Binding Type}" LineBreakMode="TailTruncation"></Label>

                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ScrollView>

Answer 2

这已经通过一个名为ItemsView的自定义类（不要与Xamarin的ItemsView混淆，用于ListView中的数据模板）来实现ScrollView / StackPanel模式。请参阅代码：https://gist.github.com/fonix232/b88412a976f67315f915

XAML中的水平滚动视图

2 个答案: