Listview项目横向以xamarin形式

Question

我想在我的应用中列出水平项目。 我在展示xamarin时看到了Printerest App，它有相同的情况。

我使用CarouselView但显示为fullsceen。

请给我一个解决方案。 感谢。

Answer 1

您可以使用ScrollView和StackLayout创建自己的水平列表。

这样的事情：

public class HorizontalList : Grid
{
    private ICommand innerSelectedCommand;
    private ScrollView scrollview;
    private StackLayout mainPanel;
    public event EventHandler SelectedItemChanged;
    public static readonly BindableProperty SelectedCommandProperty =
        BindableProperty.Create("SelectedCommand", typeof(ICommand), typeof(HorizontalList), null);

    public static readonly BindableProperty ItemsSourceProperty =
        BindableProperty.Create("ItemsSource", typeof(IEnumerable), typeof(HorizontalList), default(IEnumerable<object>), BindingMode.TwoWay, propertyChanged: ItemsSourceChanged);

    public static readonly BindableProperty SelectedItemProperty =
        BindableProperty.Create("SelectedItem", typeof(object), typeof(HorizontalList), null, BindingMode.TwoWay, propertyChanged: OnSelectedItemChanged);

    public static readonly BindableProperty ItemTemplateProperty =
        BindableProperty.Create("ItemTemplate", typeof(DataTemplate), typeof(HorizontalList), default(DataTemplate));

    public ICommand SelectedCommand
    {
        get { return (ICommand)GetValue(SelectedCommandProperty); }
        set { SetValue(SelectedCommandProperty, value); }
    }

    public IEnumerable ItemsSource
    {
        get { return (IEnumerable)GetValue(ItemsSourceProperty); }
        set { SetValue(ItemsSourceProperty, value); }
    }

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

    public DataTemplate ItemTemplate
    {
        get { return (DataTemplate)GetValue(ItemTemplateProperty); }
        set { SetValue(ItemTemplateProperty, value); }
    }

    private static void ItemsSourceChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var itemsLayout = (HorizontalList)bindable;
        itemsLayout.SetItems();
    }

    public HorizontalList()
    {
        scrollview = new ScrollView();
        mainPanel = new StackLayout
        {
            Orientation = StackOrientation.Horizontal;
            HorizontalOptions = LayoutOptions.FillAndExpand
        };
        scrollview.Content = mainPanel;
        scrollview.Orientation = ScrollOrientation.Horizontal
        Children.Add(scrollview);
    }

    protected virtual void SetItems()
    {
        mainPanel.Children.Clear();

        if (ItemsSource == null)
        {
            return;
        }

        innerSelectedCommand = new Command<View>(view =>
        {
            SelectedItem = view.BindingContext;
            SelectedItem = null; // Allowing item second time selection
        });

        foreach (var item in ItemsSource)
        {
            mainPanel.Children.Add(GetItemView(item));
        }

        SelectedItem = null;
    }

    protected virtual View GetItemView(object item)
    {
        var content = ItemTemplate.CreateContent();
        var view = content as View;

        if (view == null)
        {
            return null;
        }

        view.BindingContext = item;

        var gesture = new TapGestureRecognizer
        {
            Command = innerSelectedCommand,
            CommandParameter = view
        };

        AddGesture(view, gesture);

        return view;
    }

    private void AddGesture(View view, TapGestureRecognizer gesture)
    {
        view.GestureRecognizers.Add(gesture);

        var layout = view as Layout<View>;

        if (layout == null)
        {
            return;
        }

        foreach (var child in layout.Children)
        {
            AddGesture(child, gesture);
        }
    }

    private static void OnSelectedItemChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var itemsView = (HorizontalList)bindable;
        if (newValue == oldValue && newValue != null)
        {
            return;
        }

        itemsView.SelectedItemChanged?.Invoke(itemsView, EventArgs.Empty);

        if (itemsView.SelectedCommand?.CanExecute(newValue) ?? false)
        {
            itemsView.SelectedCommand?.Execute(newValue);
        }
    }
}

Here就是类似方法的例子。

Answer 2

您可以使用ListView并将“旋转”设置为270度。

This就是一个例子。

请注意，您可能需要更改要求的高度和宽度

This可能对您有用。