net maui how to create collection view as menu and carouselview as content working like tabs ?

Question

net maui how to create collection view menu and carouselview content working like tabs ?

Platform Android and Ios

Answer 1

Hello,

Your main purpose is to scroll the item in CarouselView when the title is selected on the top CollectionView, and change the CollectionView's selected item when the CarouselView's current item is changed. You could try to get the index when the title is selected on top CollectionView, then call CarouselView's ScrollTo method to scroll an item at an index into view, and invoke CurrentItemChanged method to response to the CarouselView's current item changing.

Update
ContentView named "CustomCarouselCollectionView"

//If you don't set HeightRequest for CollectionView, it will display confusingly on iOS.

<ContentView ...
              x:Name="this">
    <Grid BindingContext="{x:Reference this}" >
        <Grid.RowDefinitions>
            <RowDefinition Height="60" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

       <StackLayout Grid.Row="0" >
            <CollectionView HeightRequest="60"  x:Name="MyCollectionView" ItemsSource="{Binding ItemSource}" ItemsLayout="HorizontalList" SelectionMode="Single"
                SelectionChanged ="CollectionView_SelectionChanged">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Label
                       Text="{Binding Name}" />
                    </DataTemplate>

               </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
        <StackLayout Grid.Row="1">
            <CarouselView x:Name="MyCarouselView" ItemsSource="{Binding ItemSource}"  CurrentItemChanged="OnCurrentItemChanged" >
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <local:OrdersView Item ="{Binding ContentItem.ContentString}">
                        </local:OrdersView>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>
        </StackLayout>
    </Grid>
</ContentView>

Code Behind BindableProperty and Selected method

public partial class CustomCarouselCollectionView : ContentView
{
    public static readonly BindableProperty ItemSourceProperty =
  BindableProperty.Create("ItemSource", typeof(ObservableCollection<MenuItem>), typeof(CustomCarouselCollectionView), new ObservableCollection<MenuItem>());

   public ObservableCollection<MenuItem> ItemSource
    {
        get => (ObservableCollection<MenuItem>)GetValue(ItemSourceProperty);
        set => SetValue(ItemSourceProperty, value);
    }

   public CustomCarouselCollectionView()
    {
        InitializeComponent();
   }
    private void CollectionView_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        MenuItem current = (e.CurrentSelection.FirstOrDefault()) as MenuItem;
        if (current != null)
        {
            MyCarouselView.ScrollTo(current.Index);// scrolling CarouselView based on index
        }
    }
   void OnCurrentItemChanged(object sender, CurrentItemChangedEventArgs e)
    {
        if (e.CurrentItem != null)
        {
            MenuItem currentItem = e.CurrentItem as MenuItem;
            MyCollectionView.SelectedItem = currentItem;// setting SelectedItem of CollectionView
            MyCollectionView.ScrollTo(currentItem.Index);
        }
    }

}

ContentView named OrdersView

<ContentView ...
             x:Class="XXX.OrdersView"
             x:Name="this">
   <Label  BindingContext="{Reference this}" Text="{Binding Item}"></Label>
</ContentView>

Code Behind

public partial class OrdersView : ContentView
{
    public static readonly BindableProperty ItemProperty =
BindableProperty.Create("Item", typeof(string), typeof(OrdersView), "");
    public string Item
    {
        get => (string)GetValue(ItemProperty);
        set => SetValue(ItemProperty, value);
    }
    public OrdersView()
    {
        InitializeComponent();
    }
}

Model

public class MenuItem
{
    public int Index { get; set; }
    public ContentItem ContentItem { get; set; }
    public string Name { get; set; }
}

public class ContentItem //this model will be bind to CarouselView
{
    public string ContentString { get; set; }//the value will display in Label
}

Using CustomCarouselCollectionView in a Page and seeting BindingContext

<ContentPage.BindingContext>
        <local:MenuViewModel></local:MenuViewModel>
    </ContentPage.BindingContext>
    <local:CustomCarouselCollectionView ItemSource="{Binding MenuTitles}"> </local:CustomCarouselCollectionView>

ViewModel(Binding context of Page)

public class MenuViewModel
{
    public ObservableCollection<MenuItem> MenuTitles { get; set; } = new ObservableCollection<MenuItem>()
    {
        new MenuItem()
        {
            Name = "aaaaaaaaaaaaa",
            ContentItem = new ContentItem()
            {
                ContentString = "first"
            },
            Index = 0
        },
        new MenuItem()
        {
            Name = "bbbbbbbbbbbbbbbbb",
           ContentItem = new ContentItem()
            {
                ContentString = "second"
            },
            Index = 1
        },
        new MenuItem()
        {
            Name = "cccccccccccccccccc",
            ContentItem = new ContentItem()
            {
                ContentString = "third"
            } ,
            Index = 2
        },
        new MenuItem()
        {
            Name = "dddddddddddddddddddddd",
             ContentItem = new ContentItem()
            {
                ContentString = "fourth"
            } ,
            Index = 3
        }
    };
}

Best Regards,

Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.