0

我正在尝试使用此链接中指定的 CollectionView 和 CarouselView 在 Xamarin.Forms 中创建可滚动选项卡。我需要根据在标题中选择的选项卡在 CarouselView 中加载不同的 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>

.cs 文件代码

private void CarouselView_CurrentItemChanged(object sender, CurrentItemChangedEventArgs e)
        {
            var x = e.CurrentItem as TabItem;
            var viewModel = BindingContext as xxxViewModel;
            
            if(x.Header == Tab1)
            {
               viewModel.TabVms[0].DynamicContentView = new Page1(); 
            }
            if(x.Header == Tab2)
            {
               viewModel.TabVms[1].DynamicContentView = new Page2(); 
            }
      }

任何帮助表示赞赏！

4

1 回答 1

0

你可以使用DataTemplateSelector.

创建一个 DataTemplateSelector：

  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;
    
    }
}

在 XAML 中使用 DataTemplateSelector：

 <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>

将其分配给 ItemTemplate 属性：

            <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" />
于 2021-04-27T08:29:06.203 回答