)
We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change the template of TabItem at runtime

Platform: UWP |
Control: SfTabControl |
Published Date: November 25, 2016 |
Last Revised Date: June 23, 2019

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

2X faster development

The ultimate UWP UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon