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

Question

这是我的初始代码

<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,0,0,50"
                        TextColor="White" 
                        FontSize="30"/>
                </Grid>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>

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

Answer 1

解决方案1：如果你想为carouselview xamarin.forms中的每个视图使用其他不同的布局，我建议你使用DataTemplateSelector到achieve it。

首先，你可以为你的CarouselView创建两个DataTemplate（如果你愿意，你可以创建很多DataTemplates）。

 <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，我设置为OtherMonkeyDataTemple，其他设置AmericaDataTemple。

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。