[Solved] TextColor / TabTemplate

[Decisive Computing]

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);

[Stefan Nenchev]

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

[Pavariss]

How can i do like this in c# (code be hide) ?

[Yana]

Hello Pavariss,

You could create a class that represents the ControlTemplate, and the class should derive from the layout  being used for the template.  In the concrete case, you could define the sample template like this:

public class TabHeaderTemplate : Grid
{
    public TabHeaderTemplate()
    {
        var content = new Label();
        content.TextColor = Color.DarkGreen;
        content.FontSize = 10;
        content.HorizontalTextAlignment = TextAlignment.Center;
        content.Margin = new Thickness(0, 0, 0, 6);
        content.SetBinding(Label.TextProperty, new TemplateBinding("Text"));
        Children.Add(content, 0, 0);
    }
}

and then assign it to the TabViewHeaderItem like this:

tabViewItem.Header = new TabViewHeaderItem()
{
    Text = "HeaderText",
    ControlTemplate = new ControlTemplate(typeof(TabHeaderTemplate))
};

Hope this will be helpful.

Regards,
Yana
Progress Telerik