TextColor / TabTemplate

2 posts, 0 answers
  1. DecisiveComputing
    DecisiveComputing avatar
    11 posts
    Member since:
    Mar 2015

    Posted 10 May Link to this post

    One can easily change the background color of the TabHeader, but there is no easy way to change the Text (Foreground) color. The only do this, that I have seen, is to create (via code), custom tab header content (see bottom).

    This actually bring up another issue / question: there does not appear to be a way to declare a tab header template. I would prefer to declare my header template in XAML and have it applied to each tab. Am I missing something?

    var tab = new TabViewItem
    {
        BindingContext = item.OriginalValue
    };
    var tabLayout = new StackLayout
    {
        Spacing = 0,
        StyleClass = new[] { "SubTab" }
    };
    tabLayout.Children.Add(new Label()
    {
        Text = item.Name,
        StyleClass = new[] { "SubTabItemText" }
    });
    tab.Header.Content = tabLayout;
    Tabs.Items.Add(tab);

     

     

  2. Stefan Nenchev
    Admin
    Stefan Nenchev avatar
    498 posts

    Posted 15 May Link to this post

    Hello Brian,

    Thank you for providing the code implementation from your side.

    You can set the ControlTemplate property of the TabViewHeaderItem and eventually apply a Control Template with a structure of your choice. You can add an element whose TextColor property is set. 

     For example, the control template:
     
    <ControlTemplate x:Key="iconControlTemplate">
            <Grid BackgroundColor="Transparent" RowSpacing="0">
                <Label Grid.Row="0"
                 Text="{TemplateBinding Text}"
                 TextColor="DarkGreen"
                 FontSize="10"
                 HorizontalTextAlignment="Center"
                 Margin="0, 0, 0, 6" />
        </Grid>
      </ControlTemplate>

    And eventually, applying it to the TabViewHeaderItem:

    <telerikPrimitives:TabViewItem.Header>
        <telerikPrimitives:TabViewHeaderItem Text="{Binding Name}"
                                 ControlTemplate="{StaticResource iconControlTemplate}" >
        </telerikPrimitives:TabViewHeaderItem>
    </telerikPrimitives:TabViewItem.Header>

    I believe this is the behavior you are looking for. Please give it a try and update me whether it will work for you.

    Have a great rest of the week.

    Regards,
    Stefan Nenchev
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top