如何在carouselview xamarin.forms中为每个视图显示不同的内容

问题描述

这是我的初始代码

<CarouselView x:Name="BGcarousel" >
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <Grid RowSpacing="0">
                    <Grid.RowDeFinitions>
                        <RowDeFinition Height="*"/>
                    </Grid.RowDeFinitions>

                    <Image Grid.Row="0" Grid.Column="0"
                    Source="{Binding BackgroundImage}"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand" 
                    Aspect="AspectFill" />
                    <Frame 
                        Grid.Row="0" 
                        Grid.Column="0"
                        VerticalOptions="Center" 
                        HorizontalOptions="Center" 
                        HeightRequest="30" 
                        WidthRequest="120" 
                        CornerRadius="60" 
                        HasShadow="True"
                        BackgroundColor="BlueViolet">
                        <Label 
                            Text="{Binding Icon}" 
                            TextColor="Black" 
                            VerticalOptions="Center" 
                            HorizontalOptions="Center" 
                            FontAttributes="Bold" 
                            FontSize="23" 
                            Padding="0"  />
                    </Frame>
                    <Label Grid.Row="0" Grid.Column="0"
                        Text="{Binding Quot}" 
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand"
                        HorizontalTextAlignment="Center"
                        VerticalTextAlignment="End"
                        Padding="0,50"
                        TextColor="White" 
                        FontSize="30"/>
                </Grid>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>

这看起来每个页面都有相同的内容，但是我只需要在最后添加一个按钮并控制其行为 微软刚刚添加了carouselview作为功能，对此我是陌生的 任何人都可以帮助我

解决方法

解决方案1 ​​：如果您要对carouselview xamarin.forms中的每个视图使用其他不同的布局，建议您使用DataTemplateSelector至achieve it。

首先，您可以为DataTemplate创建两个CarouselView（如果需要，您可以创建很多DataTemplate）。

 <ContentPage.Resources>
        <DataTemplate x:Key="AmericanMonkeyTemplate">
            <StackLayout>
                <Frame HasShadow="True"
                       BorderColor="DarkGray"
                       CornerRadius="5"
                       Margin="20"
                       HeightRequest="300"
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand">
            <StackLayout>
                <!--Add layout that you want-->
                
                    <Label Text="{Binding Name}"
                               FontAttributes="Bold"
                               FontSize="Large"
                               HorizontalOptions="Center"
                               VerticalOptions="Center" />

                <Label Text="{Binding Location}"
                               HorizontalOptions="Center" />
                <Label Text="{Binding Details}"
                               FontAttributes="Italic"
                               HorizontalOptions="Center"
                               MaxLines="5"
                               LineBreakMode="TailTruncation" />
               

               </StackLayout>
              </Frame>
            </StackLayout>
        </DataTemplate>

        <DataTemplate x:Key="OtherMonkeyTemplate">
            <!--Add layout that you want-->
            <StackLayout>
                <Frame HasShadow="True"
                       BorderColor="DarkGray"
                       CornerRadius="5"
                       Margin="20"
                       HeightRequest="300"
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand">
                <StackLayout>
                    <Label Text="{Binding Name}"
                               FontAttributes="Bold"
                               FontSize="Large"
                               HorizontalOptions="Center"
                               VerticalOptions="Center" />

                    <Label Text="{Binding Location}"
                               HorizontalOptions="Center" />
                    <Label Text="{Binding Details}"
                               FontAttributes="Italic"
                               HorizontalOptions="Center"
                               MaxLines="5"
                               LineBreakMode="TailTruncation" />
                    <Button
                                    Text="Click"
                                   
                                    />
                    <Button
                                    Text="Click"
                                  
                                    />
                    <Button
                                    Text="Click"
                                  
                                    />
                </StackLayout>
               </Frame>
            </StackLayout>
        </DataTemplate>

        <controls:MonkeyDataTemplateSelector x:Key="MonkeySelector"
                                             AmericanMonkey="{StaticResource AmericanMonkeyTemplate}"
                                             OtherMonkey="{StaticResource OtherMonkeyTemplate}" />
    </ContentPage.Resources>
    <StackLayout>
        <CarouselView ItemsSource="{Binding Monkeys}" ItemTemplate="{StaticResource MonkeySelector}">
            
        </CarouselView>
    </StackLayout>

</ContentPage>

然后创建一个DataTemplateSelector，您可以依赖一个属性来显示哪个DataTemple布局。例如，如果Location是Eurp，我将其设置为OtherMonkey DataTemple，其他人将其设置为America DataTemple。

public class MonkeyDataTemplateSelector : DataTemplateSelector
    {
        public DataTemplate AmericanMonkey { get; set; }
        public DataTemplate OtherMonkey { get; set; }

        protected override DataTemplate OnSelectTemplate(object item,BindableObject container)
        {
            return ((Monkey)item).Location.Contains("Eurp") ? OtherMonkey  : AmericanMonkey;
        }
    }

解决方案2 ，请与Jason达成协议，您可以使用IsVisible作为按钮，将属性与ButtonIsVisable绑定在一起，如下例所示。

 <Button
        Text="Click"
        IsVisible="{Binding ButtonIsVisable}"
         />

然后在模型中添加ButtonIsVisable属性。

   public class Monkey
    {
        public string Name { get; set; }
        public string Location { get; set; }
        public string Details { get; set; }
        public bool ButtonIsVisable { get; set; }
    }

在ViewModel中，您可以控制Button是否可见。

   public class MyViewModel
    {
        public ObservableCollection<Monkey> Monkeys { get; set; }
        public MyViewModel()
        {
            Monkeys =new ObservableCollection<Monkey>();
            Monkeys.Add(new Monkey() { ButtonIsVisable=false,Details="Details1",Location="Usa",Name="Test1" });
            Monkeys.Add(new Monkey() { ButtonIsVisable = false,Details = "Details2",Location = "Asia",Name = "Test2" });
            Monkeys.Add(new Monkey() { ButtonIsVisable = true,Details = "Details3",Location = "Eurp",Name = "Test3" });
        }

    }

在布局中添加按钮。

  <CarouselView ItemsSource="{Binding Monkeys}">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Frame HasShadow="True"
                       BorderColor="DarkGray"
                       CornerRadius="5"
                       Margin="20"
                       HeightRequest="300"
                       HorizontalOptions="Center"
                       VerticalOptions="CenterAndExpand">
                            <StackLayout>
                                <Label Text="{Binding Name}"
                               FontAttributes="Bold"
                               FontSize="Large"
                               HorizontalOptions="Center"
                               VerticalOptions="Center" />

                                <Label Text="{Binding Location}"
                               HorizontalOptions="Center" />
                                <Label Text="{Binding Details}"
                               FontAttributes="Italic"
                               HorizontalOptions="Center"
                               MaxLines="5"
                               LineBreakMode="TailTruncation" />
                                <Button
                                    Text="Click"
                                    IsVisible="{Binding ButtonIsVisable}"
                                    />

                               

                            </StackLayout>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>

这是布局背景代码。

   public MainPage()
        {
            InitializeComponent();
            this.BindingContext = new MyViewModel();
        }

此处正在运行GIF。