Question

我正在尝试在Xamarin表单中实现水平滚动列表视图，我尝试了几个库，但找不到好的解决方案。这可能是Xamrin表格（没有渲染），是否有可以使用的工作库？

Answer 1

为了获得水平滚动列表视图，您必须创建一个自定义scrollView，如下所示，并在XAML中使用此自定义控件

public class ImageGallery：ScrollView { readonly StackLayout _imageStack;

    public ImageGallery()
    {
        this.Orientation = ScrollOrientation.Horizontal;

        _imageStack = new StackLayout
        {
            Orientation = StackOrientation.Horizontal
        };

        this.Content = _imageStack;
    }

    public IList<View> Children
    {
        get
        {
            return _imageStack.Children;
        }
    }


    public static readonly BindableProperty ItemsSourceProperty =
        BindableProperty.Create<ImageGallery, IList>(
            view => view.ItemsSource,
            default(IList),
            BindingMode.TwoWay,
            propertyChanging: (bindableObject, oldValue, newValue) => {
                ((ImageGallery)bindableObject).ItemsSourceChanging();
            },
            propertyChanged: (bindableObject, oldValue, newValue) => {
                ((ImageGallery)bindableObject).ItemsSourceChanged(bindableObject, oldValue, newValue);
            }
        );

    public IList ItemsSource
    {
        get
        {
            return (IList)GetValue(ItemsSourceProperty);
        }
        set
        {

            SetValue(ItemsSourceProperty, value);
        }
    }
    void ItemsSourceChanging()
    {
        if (ItemsSource == null)
            return;
    }
    void ItemsSourceChanged(BindableObject bindable, IList oldValue, IList newValue)
    {
        if (ItemsSource == null)
            return;

        var notifyCollection = newValue as INotifyCollectionChanged;
        if (notifyCollection != null)
        {
            notifyCollection.CollectionChanged += (sender, args) => {
                if (args.NewItems != null)
                {
                    foreach (var newItem in args.NewItems)
                    {

                        var view = (View)ItemTemplate.CreateContent();
                        var bindableObject = view as BindableObject;
                        if (bindableObject != null)
                            bindableObject.BindingContext = newItem;
                        _imageStack.Children.Add(view);
                    }
                }
                if (args.OldItems != null)
                {
                    // not supported
                    _imageStack.Children.RemoveAt(args.OldStartingIndex);
                }
            };
        }
    }
    public DataTemplate ItemTemplate
    {
        get;
        set;
    }
    public static readonly BindableProperty SelectedItemProperty =
        BindableProperty.Create<ImageGallery, object>(
            view => view.SelectedItem,
            null,
            BindingMode.TwoWay,
            propertyChanged: (bindable, oldValue, newValue) => {
                ((ImageGallery)bindable).UpdateSelectedIndex();
            }
        );

    public object SelectedItem
    {
        get
        {
            return GetValue(SelectedItemProperty);
        }
        set
        {
            SetValue(SelectedItemProperty, value);
        }
    }

    void UpdateSelectedIndex()
    {
        if (SelectedItem == BindingContext)
            return;

        SelectedIndex = Children
            .Select(c => c.BindingContext)
            .ToList()
            .IndexOf(SelectedItem);

    }

    public static readonly BindableProperty SelectedIndexProperty =
        BindableProperty.Create<ImageGallery, int>(
            carousel => carousel.SelectedIndex,
            0,
            BindingMode.TwoWay,
            propertyChanged: (bindable, oldValue, newValue) => {
                ((ImageGallery)bindable).UpdateSelectedItem();
            }
        );

    public int SelectedIndex
    {
        get
        {
            return (int)GetValue(SelectedIndexProperty);
        }
        set
        {
            SetValue(SelectedIndexProperty, value);
        }
    }

    void UpdateSelectedItem()
    {
        SelectedItem = SelectedIndex > -1 ? Children[SelectedIndex].BindingContext : null;
    }
}`

现在，您可以在XAML中使用自定义ScrollView来获取水平滚动列表

<custom:ImageGallery ItemsSource="{Binding ImageList}" HeightRequest="100"> <custom:ImageGallery.ItemTemplate> <DataTemplate>＆lt; - 布局及相关内容 - ＆gt; </DataTemplate> </custom:ImageGallery.ItemTemplate> </custom:ImageGallery>

Answer 2

尝试https://www.nuget.org/packages/HorizontalListView1.1/

样本用法：（XAML）

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
x:Class="test.ListPage" xmlns:Controls="clr-namespace:test;assembly=test"> 

<Controls:HorizontalListView ItemsSource="{Binding Categories}" ListOrientation="Horizontal"> 
  <Controls:HorizontalListView.ItemTemplate> 
    <DataTemplate> 
    <Label Text="{Binding Name}" Grid.Row="0" YAlign="Center" /> 
    </DataTemplate> 
  </Controls:HorizontalListView.ItemTemplate> 
  </Controls:myControl>

Answer 3

一些人通过旋转ListView创建水平ListViews，然后旋转元素。

这是一个黑客，你必须确保它不会弄乱你的布局（不要把它放在网格中）。但它运作正常。

水平列表查看Xamarin表单

3 个答案: