Articles in this section
Category / Section

How to change the template of TabItem at runtime

2 mins read

ContentTemplateSelector property is used to load the TabItem content template dynamically. Different templates are applied to content based on tab item header by CustomDataTemplateSelector, which is bound to the ContentTemplateSelector property of SfTabControl. The same has been demonstrated in below code example:

Code snippet:

XAML:

    <Page.DataContext>
        <local:ViewModel/>
    </Page.DataContext>
    <Page.Resources>
        <DataTemplate x:Key="HeaderTemplate">
            <TextBlock Text="{Binding Header}"/>
        </DataTemplate>
        <local:CustomDataTemplateSelector x:Key="TabControlContentTemplateSelector">
            <local:CustomDataTemplateSelector.TextBlockTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Content}" TextWrapping="Wrap" 
                                  Margin="20 0 0 0" FontSize="16"/>
                </DataTemplate>
            </local:CustomDataTemplateSelector.TextBlockTemplate>
            <local:CustomDataTemplateSelector.ButtonTemplate>
                <DataTemplate>
                    <Button Content="{Binding Content}" FontWeight="Bold" 
                            VerticalAlignment="Top" HorizontalAlignment="Left" 
                            Margin="20 0 0 0" FontSize="16"/>
                </DataTemplate>
            </local:CustomDataTemplateSelector.ButtonTemplate>
            <local:CustomDataTemplateSelector.TextBoxTemplate>
                <DataTemplate>
                    <TextBox Text="{Binding Content}" VerticalAlignment="Top" 
                             HorizontalAlignment="Stretch" FontStyle="Italic"
                             Margin="20 0 0 0" FontSize="16"/>
                </DataTemplate>
            </local:CustomDataTemplateSelector.TextBoxTemplate>
        </local:CustomDataTemplateSelector>
    </Page.Resources>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <syncfusion:SfTabControl ItemsSource="{Binding TabItems}" Margin="20 20 0 0" 
                                 SelectedIndex="0"
                                 HeaderTemplate="{StaticResource HeaderTemplate}"
                                 ContentTemplateSelector="{StaticResource 
                                 TabControlContentTemplateSelector}"/>
    </Grid>

 

C#:

    public class CustomDataTemplateSelector : DataTemplateSelector
    {
        private DataTemplate textBlockTemplate;
        public DataTemplate TextBlockTemplate
        {
            get { return textBlockTemplate; }
            set { textBlockTemplate = value; }
        }
 
        private DataTemplate buttonTemplate;
        public DataTemplate ButtonTemplate
        {
            get { return buttonTemplate; }
            set { buttonTemplate = value; }
        }
 
        private DataTemplate textboxTemplate;
        public DataTemplate TextBoxTemplate
        {
            get { return textboxTemplate; }
            set { textboxTemplate = value; }
        }
 
        protected override DataTemplate SelectTemplateCore(object item, 
                                           DependencyObject container)
        {
            if(item != null && item is Model)
            {
                if ((item as Model).Header == "TextBlock")
                    return TextBlockTemplate;
                else if ((item as Model).Header == "Button")
                    return ButtonTemplate;
                else if ((item as Model).Header == "TextBox")
                    return TextBoxTemplate;
            }
            return base.SelectTemplateCore(item, container);
        }
    }

 

Model:

    public class Model
    {
        private string header;
 
        public string Header
        {
            get { return header; }
            set { header = value; }
        }
 
        private object content;
 
        public object Content
        {
            get { return content; }
            set { content = value; }
        }
 
    }

 

 

 

ViewModel:

    public class ViewModel
    {
        private ObservableCollection<Model> items;
 
        public ObservableCollection<Model> TabItems
        {
            get { return items; }
            set { items = value; }
        }
 
        public ViewModel()
        {
            items = new ObservableCollection<Model>();
            items.Add(new Model() { Header = "TextBlock" , Content = "The SfTabControl provides great flexibility for visual customization and provides many styling and templating properties. Use the ContentTemplateSelector property property to set a data template to affect the appearance of the elements that contain the data items." });
            items.Add(new Model() { Header = "Button", Content = "The SfTabControl provides great flexibility for visual customization and provides many styling and templating properties. Use the ContentTemplateSelector property property to set a data template to affect the appearance of the elements that contain the data items." });
            items.Add(new Model() { Header = "TextBox", Content = "The SfTabControl provides great flexibility for visual customization and provides many styling and templating properties. Use the ContentTemplateSelector property property to set a data template to affect the appearance of the elements that contain the data items." });
        }
    }

 

Output:

 TabItem at runtime in STabView

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied