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

Question

我想在 xamarin 表单的轮播视图上同时显示 3 个项目。

\n\n

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

\n\n

这是我所做的一个示例。

\n\n

  public class Example : INotifyPropertyChanged\n    {\n        public event PropertyChangedEventHandler PropertyChanged;\n\n\n        private string _titulo;\n        public string Titulo\n        {\n            get\n            {\n                return _titulo;\n            }\n            set\n            {\n                _titulo = value;\n                OnPropertyChanged(nameof(Titulo));\n            }\n        }\n\n        private Color _cor;\n        public Color Cor\n        {\n            get\n            {\n                return _cor;\n            }\n            set\n            {\n                _cor = value;\n                OnPropertyChanged(nameof(Cor));\n            }\n        }\n\n        public Example(string a, Color b)\n        {\n            Titulo = a;\n            Cor = b;\n        }\n\n        #region INotifyPropertyChanged Implementation\n        void OnPropertyChanged([CallerMemberName] string propertyName = "")\n        {\n            if (PropertyChanged == null)\n                return;\n\n            PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));\n        }\n        #endregion\n    }\n\n    public class TesteViewModel : INotifyPropertyChanged\n    {\n        public event PropertyChangedEventHandler PropertyChanged;\n\n        private ObservableCollection<Example> _fonte;\n        public ObservableCollection<Example> Fonte\n        {\n            get\n            {\n                return _fonte;\n            }\n            set\n            {\n                _fonte = value;\n                OnPropertyChanged(nameof(Fonte));\n            }\n        }\n\n        public TesteViewModel()\n        {\n            Fonte = new ObservableCollection<Example>()\n            {\n                new Example("Gratid\xc3\xa3o", Color.Red),\n                new Example("Vit\xc3\xb3rias", Color.Green),\n                new Example("Objectivos do ano", Color.Blue)\n            };\n        }\n\n        #region INotifyPropertyChanged Implementation\n        void OnPropertyChanged([CallerMemberName] string propertyName = "")\n        {\n            if (PropertyChanged == null)\n                return;\n\n            PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));\n        }\n        #endregion\n\n    }\n\n    [XamlCompilation(XamlCompilationOptions.Compile)]\n    public partial class teste : ContentPage\n    {\n\n        public teste()\n        {\n            BindingContext = new TesteViewModel();\n            InitializeComponent();\n            carrouusel.SetBinding(CardsView.ItemsSourceProperty, nameof(TesteViewModel.Fonte));\n        }\n\n    }\n\n

\n\n

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

\n\n

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

\n

Answer 1

如果你想每个视图并排显示3个项目，你可以自定义 of 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