水平ListView Xamarin.Forms

Question

任何方法来创建ListView与horizontal scroll在Xamarin.Forms类似图像

这就是我为垂直所做的

var myListView = new ListView
{
    ItemTemplate = new DataTemplate(typeof(ImageCell))
};

Answer 1

是的,你在技术上可以.将"旋转"设置为270(所有VisualElements都具有"旋转BindableProperty").然而,这看起来像一个次优的解决方案,因为在顶部和底部有空白区域,你必须左右拖动视图才能完全看到所有内容.

public static readonly BindableProperty RotationProperty;
public static readonly BindableProperty RotationXProperty;
public static readonly BindableProperty RotationYProperty;

上面的代码来自VisualElement类.下面的代码是我自己的一小部分样本.

                                              ???                                                  
<ListView x:Name="MessagesListView" Rotation="270" ItemsSource="{Binding Items}" RowHeight="40">
  <ListView.ItemTemplate>
    <DataTemplate>
      <ViewCell>
        <ViewCell.View>
          <StackLayout>
            <!--mylayouthere-->
          </StackLayout>
        </ViewCell.View>
      </ViewCell>
    </DataTemplate>
  </ListView.ItemTemplate>
</ListView>

Answer 2

正如其他人所说的那样,没有 - 在Xamarin.Forms中没有一个可用的开箱即用.

但是 - 它并没有阻止任何人编写自己的自定义渲染器来实现这种类型的控制.

正如Stephane Delcroix所提到的,您可以创建一个ScrollView,然后创建一个StackLayout作为子项来创建相同的效果.

然后,您需要实施: -

*)bindable属性接受需要创建的(IEnumerable)ItemsSource属性.

*)bindable属性接受需要创建的(DataTemplate)ItemTemplate属性.

*)绑定代码以实例化ItemTemplate的实例,获取特定的数据源项并将其呈现到StackLayout中.您还必须考虑删除的项目等.

*)附加事件处理程序/点击手势以进行项目选择.

*)实现选定状态/停用其他所选项目.

......等等,以获得完整的实施.

所有上述问题都存在于相对较小的项目列表中.

但是,如果您要查找一长串条目,那么在您创建所有视图时,上面的内容会有点不受欢迎.

即使你延迟加载这些,你仍然需要考虑所有视图的内存占用.

然后,这将导致另一个可能的实现,处理虚拟化项目,这是一个完整的不同的故事要考虑.

Answer 3

如上所述,没有标准的方法可以做到这一点,但是有一种方法可以使用标准ListView和@MillieSmiths方法.

该解决方案需要多层嵌套布局.从ListViewwe开始将旋转270度,但是也会旋转我们的项目内容,因此我们需要将其旋转90度.

旋转ListView创建了大量的空白,通过将ListView包装在绝对布局中我们可以解决这个问题(我们需要一个额外的内容视图来解决一些剪辑问题).

最后在代码隐藏中我们需要渲染布局剪辑

看到完整的解决方案:

<AbsoluteLayout x:Name="MessagesLayoutFrame" Padding="0" HorizontalOptions="FillAndExpand">
  <ContentView x:Name="MessagesLayoutFrameInner"  Padding="0"  HorizontalOptions="FillAndExpand">
    <ListView x:Name="MessagesListView"
              ItemsSource="{Binding Images}"
              RowHeight="240"
              VerticalOptions="Start"
              HeightRequest="240"
              WidthRequest="240"
              SeparatorVisibility="None"
              Rotation="270"
              HorizontalOptions="Center">
      <ListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <ContentView Rotation="90" Padding="12">
              <Image Source="{Binding Source}" Aspect="AspectFill" />
            </ContentView>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </ContentView>
</AbsoluteLayout>

对于背后的代码,我们只需要检查我们之前是否已经设置好了,如果有的话,就放手吧.基本上我们找出页面的宽度是什么(NameGrid只是其他地方的全宽容器)然后将直接ListView容器向上移动一半的空白,并将其剪切到底部的另一半)

    bool hasAppearedOnce = false;
    protected override void OnAppearing() {
        base.OnAppearing();

        if (!hasAppearedOnce) {

            hasAppearedOnce = true;
            var padding = (NameGrid.Width - MessagesListView.Height) / 2;

            MessagesListView.HeightRequest = MessagesLayoutFrame.Width;
            MessagesLayoutFrameInner.WidthRequest = MessagesLayoutFrame.Width;
            MessagesLayoutFrameInner.Padding = new Thickness(0);
            MessagesLayoutFrame.Padding = new Thickness(0);
            MessagesLayoutFrame.IsClippedToBounds = true;
            Xamarin.Forms.AbsoluteLayout.SetLayoutBounds(MessagesLayoutFrameInner, new Rectangle(0, 0 - padding, AbsoluteLayout.AutoSize, MessagesListView.Height - padding));
            MessagesLayoutFrameInner.IsClippedToBounds = true;
             // */
        } 
    }

警告 请勿使用<FRAMES>布局移动和旋转.它将在Windows Phone上崩溃.

PS我相信这可以包含在一个很好的UserControl中供所有人使用.

Answer 4

从Xamarin Forms 2.3开始CarouselView,就是这样,等等.在这里阅读更多.

<ContentView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
  <CarouselView ItemsSource="{Binding MyDataSource}">
    <CarouselView.ItemTemplate>
      <DataTemplate>
        <Label Text="{Binding LabelText}" />
      </DataTemplate>
    </CarouselView.ItemTemplate>
  </CarouselView>
</ContentView>

Answer 5

在 Xamarin.Forms 4.0-pre 中，您可以使用CollectionView，这简化了获取此类布局的过程。

样本：

<CollectionView ItemsSource="{Binding Monkeys}">
    <CollectionView.ItemsLayout>
        <ListItemsLayout>
            <x:Arguments>
                <ItemsLayoutOrientation>Horizontal</ItemsLayoutOrientation>    
            </x:Arguments>
        </ListItemsLayout>
    </CollectionView.ItemsLayout>
</CollectionView>

Answer 6

就像其他人所说的那样,ListView不可能,我认为Xamarin对Forms有很大的疏忽.我们需要动态显示数据驱动对象,而不仅仅是列表中的内容....来吧你好!

但是,在Xamarin Labs项目中,您可以使用GridView.它仍然有点粗糙,人们正在通过选择项目来解决一些错误.

https://github.com/XForms/Xamarin-Forms-Labs

有人似乎有解决这个问题的方法:

https://github.com/XForms/Xamarin-Forms-Labs/issues/236

Answer 7

不,没有办法横向ListView.您可以将水平StackLayout包装在水平ScrollView中以获得相同的视觉效果,但这并不完全相同,因为您不会使用DataTemplating.