Question

我需要在Xamarin Forms中制作CarouselView，其中每张幻灯片都有不同的DataTemplate。

我尝试过：

DataTemplateSelector.cs：

    class DataTemplateSelector : DataTemplateSelector
    {
        public DataTemplate MatchEventsTemplate { get; set; }
        public DataTemplate CommentsTemplate { get; set; }

        public DataTemplateSelector()
        {
            MatchEventsTemplate = new MatchEventsTemplate(typeof(MatchEventsUC));
            CommentsTemplate = new CommentsTemplate(typeof(CommentsUC));
        }

        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {

        }
    }
}

MatchEventsUC.XAML：

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FodboldApp.View.UserControl.MatchEventsUC">
    <ContentView .Content>
        <flv:FlowListView x:Name="flowListView" FlowColumnCount="1" Grid.Row="1"
                                  SeparatorVisibility="None" HasUnevenRows="True" 
                                  FlowItemsSource="{Binding EventList}" BackgroundColor="White" >
            <flv:FlowListView.FlowColumnTemplate>
                <DataTemplate>
                    <Grid ColumnSpacing="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="0.5*"/>
                            <ColumnDefinition Width="0.005*"/>
                            <ColumnDefinition Width="0.5*"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Label Text="{Binding PlayerName}" Grid.Column="{Binding Team}" VerticalOptions="Center" 
                                       HorizontalOptions="FillAndExpand" 
                                       HorizontalTextAlignment="{Binding Team, Converter={StaticResource teamConverter}}"/>
                        <Image Source="{Binding ImageURL}" HorizontalOptions="Center" Grid.Column="{Binding Team, Converter={StaticResource imageConverter}}" Aspect="AspectFill" VerticalOptions="Center"/>
                        <BoxView BackgroundColor="Black" Grid.Column="2" HeightRequest="20" VerticalOptions="Center"/>
                    </Grid>
                </DataTemplate>
            </flv:FlowListView.FlowColumnTemplate>
        </flv:FlowListView>
    </ContentView.Content>
</ContentView>

CommentsUC.XAML：

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FodboldApp.View.UserControl.CommentsUC">
    <ContentView.Content>
        <flv:FlowListView x:Name="flowListView2" FlowColumnCount="1" 
                                  HasUnevenRows="True" HeightRequest="180"
                                  FlowItemsSource="{Binding CommentList}" SeparatorVisibility="Default" SeparatorColor="Black">
            <flv:FlowListView.FlowColumnTemplate>
                <DataTemplate>
                    <Grid RowSpacing="5">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="2.5*"/>
                            <ColumnDefinition Width="20*"/>
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding ImageURL}" HorizontalOptions="Start" 
                                       Grid.Row="0" Grid.Column="0" Aspect="AspectFit" Margin="0,10,0,0" VerticalOptions="Start"/>
                        <Label Text="{Binding UserName}" Grid.Row="0" Grid.Column="1" VerticalOptions="Start" 
                                       HorizontalOptions="Start" FontSize="Medium" FontAttributes="Bold" HorizontalTextAlignment="Start" Margin="0,10,0,5" />
                        <Label Text="{Binding UserComment}" Grid.Row="1" Grid.Column="0" VerticalOptions="Start" 
                                       HorizontalOptions="StartAndExpand" FontSize="Medium" HorizontalTextAlignment="Start" Grid.ColumnSpan="2" Margin="0,0,0,10" />
                    </Grid>
                </DataTemplate>
            </flv:FlowListView.FlowColumnTemplate>
        </flv:FlowListView>
    </ContentView.Content>
</ContentView>

在我添加CarouselView的页面中：

<control:CarouselView ItemTemplate="{StaticResource templateSelector}" />

我的问题是我不知道如何控制必须显示哪个模板（OnSelectTemplate）。如何使用幻灯片在模板之间切换？我有想法使用here中的数据模板选择器。我想要实现的是显示两个不同的列表视图。

Answer 1

由于内容是静态的，因此您实际上并不关心项目的数据。因此，您可以将List绑定到CarouselView，然后将它们用作索引。

在ViewModel中定义一个属性：

public List<int> Items { get; set; } = new List<int>() { 0, 1 };

将此属性绑定到您的CarouselView：

<control:CarouselView ItemsSource="{Binding Items}" ItemTemplate="{StaticResource templateSelector}" />

在OnSelectTemplate中，您可以检查索引：

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
         var index = int.Parse(item.ToString());
         switch(index)
         {
             case 0:
                 return MatchEventsTemplate;
             case 1:
                 return CommentsTemplate;
         }
         throw new Exception($"The template {index} isn't implemented")
    }

在Xamarin Forms

1 个答案: