是否可以在轮播视图中显示超过 1 个项目？

Question

我想在 xamarin forms 的轮播视图中一次显示 3 个项目。

我正在使用可在此处找到的自定义 CarouselView：https://github.com/AndreiMisiukevich/CardView。但是，它每次查看仅显示 1 个项目。

这是我所做的示例。

  public class Example : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;


        private string _titulo;
        public string Titulo
        {
            get
            {
                return _titulo;
            }
            set
            {
                _titulo = value;
                OnPropertyChanged(nameof(Titulo));
            }
        }

        private Color _cor;
        public Color Cor
        {
            get
            {
                return _cor;
            }
            set
            {
                _cor = value;
                OnPropertyChanged(nameof(Cor));
            }
        }

        public Example(string a, Color b)
        {
            Titulo = a;
            Cor = b;
        }

        #region INotifyPropertyChanged Implementation
        void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            if (PropertyChanged == null)
                return;

            PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion
    }

    public class TesteViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private ObservableCollection<Example> _fonte;
        public ObservableCollection<Example> Fonte
        {
            get
            {
                return _fonte;
            }
            set
            {
                _fonte = value;
                OnPropertyChanged(nameof(Fonte));
            }
        }

        public TesteViewModel()
        {
            Fonte = new ObservableCollection<Example>()
            {
                new Example("Gratidão", Color.Red),
                new Example("Vitórias", Color.Green),
                new Example("Objectivos do ano", Color.Blue)
            };
        }

        #region INotifyPropertyChanged Implementation
        void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            if (PropertyChanged == null)
                return;

            PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
        #endregion

    }

    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class teste : ContentPage
    {

        public teste()
        {
            BindingContext = new TesteViewModel();
            InitializeComponent();
            carrouusel.SetBinding(CardsView.ItemsSourceProperty, nameof(TesteViewModel.Fonte));
        }

    }

    <ContentPage.Content>
        <StackLayout>
            <card:CarouselView x:Name="carrouusel" VerticalOptions="Start">
                <card:CarouselView.ItemTemplate>
                    <DataTemplate>
                        <ContentView>
                            <Frame HeightRequest="100" WidthRequest="200" Padding="0" HasShadow="false" IsClippedToBounds="true" CornerRadius="0" BackgroundColor="{Binding Cor}">
                                <Label Text="{Binding Titulo}" TextColor="Black"/>
                            </Frame>
                        </ContentView>
                    </DataTemplate>
                </card:CarouselView.ItemTemplate>
            </card:CarouselView>
        </StackLayout>
    </ContentPage.Content>

我想在每个视图中并排显示 3 个项目。就像这张图片上显示的那样：https://ibb.co/nzphmFw

Answer 1

如果你想并排显示每个视图3个项目，你可以自定义card:CarouselView的contentView，现在你只放一个Frame里面，你可以改变它到：

<cards:CarouselView.ItemTemplate>
    <DataTemplate>
        <ContentView>

            <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" HeightRequest="100" WidthRequest="300">

                <Frame HeightRequest="100" WidthRequest="100" Padding="0" HasShadow="false" IsClippedToBounds="true" CornerRadius="0" BackgroundColor="Red">
                    <Label Text="Titulo" TextColor="Black"/>
                </Frame>

                <Frame HeightRequest="100" WidthRequest="100" Padding="0" HasShadow="false" IsClippedToBounds="true" CornerRadius="0" BackgroundColor="Green">
                    <Label Text=" Titulo" TextColor="Black"/>
                </Frame>

                <Frame HeightRequest="100" WidthRequest="100" Padding="0" HasShadow="false" IsClippedToBounds="true" CornerRadius="0" BackgroundColor="Yellow">
                    <Label Text="Titulo" TextColor="Black"/>
                </Frame>

            </StackLayout>

        </ContentView>
    </DataTemplate>
</cards:CarouselView.ItemTemplate>

这将在每个视图中显示 3 个标签。让我知道它是否有效。

更新：

我编辑了 CoverFlowView 的代码，我认为它几乎成功了。你可以在这里查看我的样本：cards-View-xamarin.forms

我改了：

PositionShiftValue="250"

并给图像一个 widthrequest 和 heightRequest。

Answer 2

我在这里创建的 HorizontalListView 处理这种情况：

https://github.com/roubachof/Sharpnado.Presentation.Forms#horizontallistview-and-grid-mode

您只需将 ColumnCount 设置为 3 并按您喜欢的方式开始或居中：

<renderedViews:HorizontalListView Grid.Row="3"
                                  Margin="-16,8"
                                  CollectionPadding="8,8"
                                  ItemSpacing="8"
                                  ColumnCount="3"
                                  ItemsSource="{Binding SillyPeopleLoader.Result}"
                                  SnapStyle="Start">

您还可以在此处找到博客 post 的详细信息：

https://www.sharpnado.com/carousel-layout-happy-new-horizontallistview/

是否可以在轮播视图中显示超过 1 个项目？

Is it possible to display more than 1 item on carousel view?

c#

carousel

xamarin.forms