Article Tags - sftabview

sftabview (32)

articleGrid_header_table

How to Use DataTemplateSelector with Content Template in .NET MAUI Tab View?

This article provides a comprehensive guide on utilizing a DataTemplateSelector with the ContentItemTemplate property in the .NET MAUI Tab View control. By following the steps below, you can create a flexible tab view that supports varying content for each tab based on its associated data model. Step 1: Create a CustomTabView Extend the Tab View control to add a ContentItemTemplateSelector property. Handle the SelectionChanged and Loaded events to dynamically set the content template. public class CustomTabView : SfTabView { // Dependency property for ItemTemplateSelector public static readonly BindableProperty ContentItemTemplateSelectorProperty = BindableProperty.Create( nameof(ContentItemTemplateSelector), typeof(DataTemplateSelector), typeof(CustomTabView), null, propertyChanged: OnContentItemTemplateSelectorChanged); // Property wrapper public DataTemplateSelector ContentItemTemplateSelector { get => (DataTemplateSelector)GetValue(ContentItemTemplateSelectorProperty); set => SetValue(ContentItemTemplateSelectorProperty, value); } // Handle changes to the template selector private static void OnContentItemTemplateSelectorChanged(BindableObject bindable, object oldValue, object newValue) { var tabView = bindable as CustomTabView; if (tabView != null) { tabView.SetInitialTemplate(); } } // Constructor public CustomTabView() { // Wire up selection changed event SelectionChanged += OnSelectionChanged; Loaded += OnLoaded; } // Loaded event handler private void OnLoaded(object? sender, EventArgs e) { SetInitialTemplate(); } // Selection changed handler private void OnSelectionChanged(object? sender, TabSelectionChangedEventArgs e) { if (e.NewIndex != -1 && ItemsSource != null && ContentItemTemplateSelector != null) { var selectedItem = ItemsSource.Cast<object>().ElementAt((Index)e.NewIndex); HandleTabSelection(selectedItem); } } // Method to set initial template private void SetInitialTemplate() { // Ensure both ItemsSource and ContentItemTemplateSelector are available if (ItemsSource != null && ContentItemTemplateSelector != null) { // Try to get the first item var items = ItemsSource.Cast<object>().ToList(); if (items.Any()) { var firstItem = items.First(); // Select template for the first item var selectedTemplate = ContentItemTemplateSelector.SelectTemplate(firstItem, this); // Directly set the ContentItemTemplate ContentItemTemplate = selectedTemplate; } } } // Dynamic template selection method private void HandleTabSelection(object selectedItem) { // Directly use the ContentItemTemplateSelector if available if (ContentItemTemplateSelector != null) { ContentItemTemplate = ContentItemTemplateSelector.SelectTemplate(selectedItem, this); } } } Step 2: Create a DataTemplateSelector Implement a class that inherits from DataTemplateSelector. Define templates and logic to select the appropriate one based on the data type. public class TabItemTemplateSelector : DataTemplateSelector { public DataTemplate? TextTemplate { get; set; } public DataTemplate? ImageTemplate { get; set; } public DataTemplate? ComplexTemplate { get; set; } protected override DataTemplate? OnSelectTemplate(object item, BindableObject container) { return item switch { TextTabItem => TextTemplate, ImageTabItem => ImageTemplate, ComplexTabItem => ComplexTemplate, _ => TextTemplate }; } } Step 3: Define Data Models Create data models to represent the different types of content that need to be displayed in the Tab View. public abstract class BaseTabItem { public string? Title { get; set; } } public class TextTabItem:BaseTabItem { public string? Content { get; set; } } //Implement other data models. Step 4: ViewModel Create a view model to provide the items for the tabs and bind it to your view. public class TabViewModel { public List<BaseTabItem> TabItems { get; set; } public TabViewModel() { TabItems = new List<BaseTabItem> { new TextTabItem { Title = "Employee", Content = "Alex" }, new ImageTabItem { Title = "Profile Picture", ImageSource = "user.png" }, new ComplexTabItem { Title = "Description", DetailedContent = new { Text = "Employee Details: ", Description = "Alex is a software developer ..." } } }; } } Step 5: XAML Define templates for each data model type in the ResourceDictionary. Assign the TabItemTemplateSelector and templates in XAML. Bind the CustomTabView to the ItemsSource and set the ContentItemTemplateSelector. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TabViewItemsSource.MainPage" xmlns:local="clr-namespace:TabViewItemsSource" xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView"> <ContentPage.BindingContext> <local:TabViewModel/> </ContentPage.BindingContext> <ContentPage.Resources> <ResourceDictionary> <local:TabItemTemplateSelector x:Key="TabItemSelector"> <local:TabItemTemplateSelector.TextTemplate> <DataTemplate> <Label Text="{Binding Content}"/> </DataTemplate> </local:TabItemTemplateSelector.TextTemplate> <local:TabItemTemplateSelector.ImageTemplate> <DataTemplate> <Image Source="{Binding ImageSource}" /> </DataTemplate> </local:TabItemTemplateSelector.ImageTemplate> <local:TabItemTemplateSelector.ComplexTemplate> <DataTemplate> <StackLayout > <Label Text="{Binding DetailedContent.Text}" /> <Label Text="{Binding DetailedContent.Description}" /> </StackLayout> </DataTemplate> </local:TabItemTemplateSelector.ComplexTemplate> </local:TabItemTemplateSelector> <DataTemplate x:Key="headerItemTemplate"> <StackLayout Margin="10"> <Label Text="{Binding Title}" VerticalOptions="Center"/> </StackLayout> </DataTemplate> </ResourceDictionary> </ContentPage.Resources> <local:CustomTabView ItemsSource="{Binding TabItems}" HeaderItemTemplate="{StaticResource headerItemTemplate}" ContentItemTemplateSelector="{StaticResource TabItemSelector}"> </local:CustomTabView> </ContentPage> Output Download the complete sample from GitHub. Conclusion I hope you enjoyed learning how to use DataTemplateSelector with a content template in .NET MAUI Tab View. You can refer to our .NET MAUI Tab View feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our .NET MAUI Tab View example to understand how to create and manipulate data. For current customers, our components are available on the License and Download page. If you are new to Syncfusion®, try our 30-day free trial to try our other controls. Please let us know in the comments section if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

No articles found