Xamarin.forms 在Xamarn表单中加载CarouseView中的ContentView

我正在尝试使用本文指定的CollectionView和CarouselView在Xamarin.Forms中创建一个可滚动的选项卡。我需要根据标题中选择的选项卡在CarouseView中加载不同的ContentView

我尝试如下所示，但ContentView未显示

下面是xaml代码：

<Grid x:DataType="{x:Null}" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="45" />
        <RowDefinition Height="45" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <CollectionView
        x:Name="CustomTabsView"
        Grid.Row="1"
        HorizontalScrollBarVisibility="Never"
        ItemSizingStrategy="MeasureAllItems"
        ItemsSource="{Binding TabVms}"
        ItemsUpdatingScrollMode="KeepItemsInView"
        SelectedItem="{Binding CurrentTabVm, Mode=TwoWay}"
        SelectionMode="Single"
        VerticalScrollBarVisibility="Never">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Horizontal" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="local:TabViewModel">
                <Grid RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="3" />
                    </Grid.RowDefinitions>
                    <Label
                        x:Name="TitleLabel"
                        Grid.Row="0"
                        Padding="15,0"
                        FontAttributes="Bold"
                        FontSize="Small"
                        HeightRequest="50"
                        HorizontalTextAlignment="Center"
                        Text="{Binding Title}"
                        TextColor="White"
                        VerticalTextAlignment="Center" />
                    <BoxView
                        x:Name="ActiveIndicator"
                        Grid.Row="1"
                        BackgroundColor="Red"
                        IsVisible="{Binding IsSelected, Mode=TwoWay}" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
    <CarouselView
        Grid.Row="2"
        CurrentItem="{Binding CurrentTabVm, Mode=TwoWay}"
        CurrentItemChanged="CarouselView_CurrentItemChanged"
        HorizontalScrollBarVisibility="Never"
        IsScrollAnimated="True"
        IsSwipeEnabled="True"
        ItemsSource="{Binding TabVms}"
        VerticalScrollBarVisibility="Never">
        <CarouselView.ItemTemplate>
            <DataTemplate x:DataType="local:TabViewModel">
                 <ContentView
                            x:Name="dynamiccontent"
                            BackgroundColor="White"
                            Content="{Binding DynamicContentView, Mode=TwoWay}" />
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
</Grid>

  class DymaicDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate Tab1Template { get; set; }

    public DataTemplate Tab2Template { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return ((TabViewModel)item).Header == "Tab1" ? Tab1Template : Tab2Template;
    
    }
}

 <ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="tab1Template" x:DataType="local:TabViewModel">
            <Grid Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Label
                    Grid.Row="0"
                    Margin="10"
                    LineBreakMode="WordWrap"
                    Text="{Binding Content}"
                    TextColor="Red"
                    VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="tab2Template" x:DataType="local:TabViewModel">
            <Grid Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Label
                    Grid.Row="0"
                    Margin="10"
                    LineBreakMode="WordWrap"
                    Text="{Binding Content}"
                    TextColor="Green"
                    VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
        <local:DymaicDataTemplateSelector
            x:Key="dymaicDataTemplateSelector"
            Tab1Template="{StaticResource tab1Template}"
            Tab2Template="{StaticResource tab2Template}" />
    </ResourceDictionary>
</ContentPage.Resources>

            <CarouselView
            Grid.Row="2"
            CurrentItem="{Binding CurrentTabVm, Mode=TwoWay}"
            CurrentItemChanged="CarouselView_CurrentItemChanged"
            HorizontalScrollBarVisibility="Never"
            IsScrollAnimated="True"
            IsSwipeEnabled="True"
            ItemTemplate="{StaticResource dymaicDataTemplateSelector}"
            ItemsSource="{Binding TabVms}"
            VerticalScrollBarVisibility="Never" />

---

感谢您的帮助

您可以使用

DataTemplateSelector

创建DataTemplateSelector:

<Grid x:DataType="{x:Null}" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="45" />
        <RowDefinition Height="45" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <CollectionView
        x:Name="CustomTabsView"
        Grid.Row="1"
        HorizontalScrollBarVisibility="Never"
        ItemSizingStrategy="MeasureAllItems"
        ItemsSource="{Binding TabVms}"
        ItemsUpdatingScrollMode="KeepItemsInView"
        SelectedItem="{Binding CurrentTabVm, Mode=TwoWay}"
        SelectionMode="Single"
        VerticalScrollBarVisibility="Never">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Horizontal" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="local:TabViewModel">
                <Grid RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="3" />
                    </Grid.RowDefinitions>
                    <Label
                        x:Name="TitleLabel"
                        Grid.Row="0"
                        Padding="15,0"
                        FontAttributes="Bold"
                        FontSize="Small"
                        HeightRequest="50"
                        HorizontalTextAlignment="Center"
                        Text="{Binding Title}"
                        TextColor="White"
                        VerticalTextAlignment="Center" />
                    <BoxView
                        x:Name="ActiveIndicator"
                        Grid.Row="1"
                        BackgroundColor="Red"
                        IsVisible="{Binding IsSelected, Mode=TwoWay}" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
    <CarouselView
        Grid.Row="2"
        CurrentItem="{Binding CurrentTabVm, Mode=TwoWay}"
        CurrentItemChanged="CarouselView_CurrentItemChanged"
        HorizontalScrollBarVisibility="Never"
        IsScrollAnimated="True"
        IsSwipeEnabled="True"
        ItemsSource="{Binding TabVms}"
        VerticalScrollBarVisibility="Never">
        <CarouselView.ItemTemplate>
            <DataTemplate x:DataType="local:TabViewModel">
                 <ContentView
                            x:Name="dynamiccontent"
                            BackgroundColor="White"
                            Content="{Binding DynamicContentView, Mode=TwoWay}" />
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
</Grid>

  class DymaicDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate Tab1Template { get; set; }

    public DataTemplate Tab2Template { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return ((TabViewModel)item).Header == "Tab1" ? Tab1Template : Tab2Template;
    
    }
}

 <ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="tab1Template" x:DataType="local:TabViewModel">
            <Grid Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Label
                    Grid.Row="0"
                    Margin="10"
                    LineBreakMode="WordWrap"
                    Text="{Binding Content}"
                    TextColor="Red"
                    VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="tab2Template" x:DataType="local:TabViewModel">
            <Grid Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Label
                    Grid.Row="0"
                    Margin="10"
                    LineBreakMode="WordWrap"
                    Text="{Binding Content}"
                    TextColor="Green"
                    VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
        <local:DymaicDataTemplateSelector
            x:Key="dymaicDataTemplateSelector"
            Tab1Template="{StaticResource tab1Template}"
            Tab2Template="{StaticResource tab2Template}" />
    </ResourceDictionary>
</ContentPage.Resources>

            <CarouselView
            Grid.Row="2"
            CurrentItem="{Binding CurrentTabVm, Mode=TwoWay}"
            CurrentItemChanged="CarouselView_CurrentItemChanged"
            HorizontalScrollBarVisibility="Never"
            IsScrollAnimated="True"
            IsSwipeEnabled="True"
            ItemTemplate="{StaticResource dymaicDataTemplateSelector}"
            ItemsSource="{Binding TabVms}"
            VerticalScrollBarVisibility="Never" />

使用XAML中的DataTemplateSelector:

<Grid x:DataType="{x:Null}" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="45" />
        <RowDefinition Height="45" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <CollectionView
        x:Name="CustomTabsView"
        Grid.Row="1"
        HorizontalScrollBarVisibility="Never"
        ItemSizingStrategy="MeasureAllItems"
        ItemsSource="{Binding TabVms}"
        ItemsUpdatingScrollMode="KeepItemsInView"
        SelectedItem="{Binding CurrentTabVm, Mode=TwoWay}"
        SelectionMode="Single"
        VerticalScrollBarVisibility="Never">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Horizontal" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="local:TabViewModel">
                <Grid RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="3" />
                    </Grid.RowDefinitions>
                    <Label
                        x:Name="TitleLabel"
                        Grid.Row="0"
                        Padding="15,0"
                        FontAttributes="Bold"
                        FontSize="Small"
                        HeightRequest="50"
                        HorizontalTextAlignment="Center"
                        Text="{Binding Title}"
                        TextColor="White"
                        VerticalTextAlignment="Center" />
                    <BoxView
                        x:Name="ActiveIndicator"
                        Grid.Row="1"
                        BackgroundColor="Red"
                        IsVisible="{Binding IsSelected, Mode=TwoWay}" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
    <CarouselView
        Grid.Row="2"
        CurrentItem="{Binding CurrentTabVm, Mode=TwoWay}"
        CurrentItemChanged="CarouselView_CurrentItemChanged"
        HorizontalScrollBarVisibility="Never"
        IsScrollAnimated="True"
        IsSwipeEnabled="True"
        ItemsSource="{Binding TabVms}"
        VerticalScrollBarVisibility="Never">
        <CarouselView.ItemTemplate>
            <DataTemplate x:DataType="local:TabViewModel">
                 <ContentView
                            x:Name="dynamiccontent"
                            BackgroundColor="White"
                            Content="{Binding DynamicContentView, Mode=TwoWay}" />
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
</Grid>

  class DymaicDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate Tab1Template { get; set; }

    public DataTemplate Tab2Template { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return ((TabViewModel)item).Header == "Tab1" ? Tab1Template : Tab2Template;
    
    }
}

 <ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="tab1Template" x:DataType="local:TabViewModel">
            <Grid Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Label
                    Grid.Row="0"
                    Margin="10"
                    LineBreakMode="WordWrap"
                    Text="{Binding Content}"
                    TextColor="Red"
                    VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="tab2Template" x:DataType="local:TabViewModel">
            <Grid Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Label
                    Grid.Row="0"
                    Margin="10"
                    LineBreakMode="WordWrap"
                    Text="{Binding Content}"
                    TextColor="Green"
                    VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
        <local:DymaicDataTemplateSelector
            x:Key="dymaicDataTemplateSelector"
            Tab1Template="{StaticResource tab1Template}"
            Tab2Template="{StaticResource tab2Template}" />
    </ResourceDictionary>
</ContentPage.Resources>

            <CarouselView
            Grid.Row="2"
            CurrentItem="{Binding CurrentTabVm, Mode=TwoWay}"
            CurrentItemChanged="CarouselView_CurrentItemChanged"
            HorizontalScrollBarVisibility="Never"
            IsScrollAnimated="True"
            IsSwipeEnabled="True"
            ItemTemplate="{StaticResource dymaicDataTemplateSelector}"
            ItemsSource="{Binding TabVms}"
            VerticalScrollBarVisibility="Never" />

将其分配给ItemTemplate属性：

<Grid x:DataType="{x:Null}" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="45" />
        <RowDefinition Height="45" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <CollectionView
        x:Name="CustomTabsView"
        Grid.Row="1"
        HorizontalScrollBarVisibility="Never"
        ItemSizingStrategy="MeasureAllItems"
        ItemsSource="{Binding TabVms}"
        ItemsUpdatingScrollMode="KeepItemsInView"
        SelectedItem="{Binding CurrentTabVm, Mode=TwoWay}"
        SelectionMode="Single"
        VerticalScrollBarVisibility="Never">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Horizontal" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="local:TabViewModel">
                <Grid RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="3" />
                    </Grid.RowDefinitions>
                    <Label
                        x:Name="TitleLabel"
                        Grid.Row="0"
                        Padding="15,0"
                        FontAttributes="Bold"
                        FontSize="Small"
                        HeightRequest="50"
                        HorizontalTextAlignment="Center"
                        Text="{Binding Title}"
                        TextColor="White"
                        VerticalTextAlignment="Center" />
                    <BoxView
                        x:Name="ActiveIndicator"
                        Grid.Row="1"
                        BackgroundColor="Red"
                        IsVisible="{Binding IsSelected, Mode=TwoWay}" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
    <CarouselView
        Grid.Row="2"
        CurrentItem="{Binding CurrentTabVm, Mode=TwoWay}"
        CurrentItemChanged="CarouselView_CurrentItemChanged"
        HorizontalScrollBarVisibility="Never"
        IsScrollAnimated="True"
        IsSwipeEnabled="True"
        ItemsSource="{Binding TabVms}"
        VerticalScrollBarVisibility="Never">
        <CarouselView.ItemTemplate>
            <DataTemplate x:DataType="local:TabViewModel">
                 <ContentView
                            x:Name="dynamiccontent"
                            BackgroundColor="White"
                            Content="{Binding DynamicContentView, Mode=TwoWay}" />
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
</Grid>

  class DymaicDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate Tab1Template { get; set; }

    public DataTemplate Tab2Template { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        return ((TabViewModel)item).Header == "Tab1" ? Tab1Template : Tab2Template;
    
    }
}

 <ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="tab1Template" x:DataType="local:TabViewModel">
            <Grid Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Label
                    Grid.Row="0"
                    Margin="10"
                    LineBreakMode="WordWrap"
                    Text="{Binding Content}"
                    TextColor="Red"
                    VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="tab2Template" x:DataType="local:TabViewModel">
            <Grid Margin="10">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Label
                    Grid.Row="0"
                    Margin="10"
                    LineBreakMode="WordWrap"
                    Text="{Binding Content}"
                    TextColor="Green"
                    VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
        <local:DymaicDataTemplateSelector
            x:Key="dymaicDataTemplateSelector"
            Tab1Template="{StaticResource tab1Template}"
            Tab2Template="{StaticResource tab2Template}" />
    </ResourceDictionary>
</ContentPage.Resources>

            <CarouselView
            Grid.Row="2"
            CurrentItem="{Binding CurrentTabVm, Mode=TwoWay}"
            CurrentItemChanged="CarouselView_CurrentItemChanged"
            HorizontalScrollBarVisibility="Never"
            IsScrollAnimated="True"
            IsSwipeEnabled="True"
            ItemTemplate="{StaticResource dymaicDataTemplateSelector}"
            ItemsSource="{Binding TabVms}"
            VerticalScrollBarVisibility="Never" />

感谢您的帮助。但是我需要根据标题中选择的选项卡在CarouseView中加载不同的ContentView，这在这种方法中是不可能的。我已经更新了回复。请检查一下。