Question

我想在xamarin表单的轮播视图中一次显示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个项目，则可以自定义contentView中的card:CarouselView，现在只需在其中放置一个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">

您还可以在此处找到详细的博客文章：

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

轮播视图上可以显示多个项目吗？

2 个答案: