Maintain style with custom header content

[Rob]

 

My custom TabView header content looks like:

<Label>
    <Label.FormattedText>
        <FormattedString>
            <Span Text="{StaticResource MyIcon}" FontFamily="{StaticResource MyIconFont}"/>
            <Span Text="Some Text"/>
        </FormattedString>
    </Label.FormattedText>
</Label>

As you can see it just allows me to add an font icon to the header.  However doing this completely loses the standard styling on the header.  Is there an easy way to maintain the header style so that it match the standard TabView header with the custom content?  Or is there a way to achieve what I want without the the custom header?

 

 

[Lance | Manager Technical Support]

Hello Rob,

Try using the TabViewHeaderItem approach instead. You can find an example of it here: TabViewHeaderItem.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik

[Rob]

I'm clearly misunderstanding how you think I would implement this.  I tried just copying the Label I posted above into a ControlTemplate and using that but it looks exactly the same and I wouldn't really expect otherwise.  Can you give more detail on how using a ControlTemplate might allow me to get the default style? 

[Lance | Manager Technical Support]

Hello Rob,

My apologies for not being more descriptive. There isn't a theme to inherit as we don't use implicit styles for the header elements. This is intentional because once you replace the ControlTemplate, you're declaring intention to start over.

The only themed resource for the TabView is the following:

<Color x:Key="TelerikTabViewHeaderItemSelectedColor">#3148CA</Color>

This key name is compiled into the products's ThemeDictionaries, so you can't use it in StaticResource or DynamicResource extension. However, there is a way to expose that key for use directly..

You can create a custom theme and merge it into your application. Once those resources are available to your app, you can use the "TelerikTabViewHeaderItemSelectedColor" in your custom header template because that key is now defined in App's Resources..


Demo

I've built you a demo to clarify this further, open the demo and take the following steps:

1 - Go to MyBlueResources.xaml ResourceDictionary and scroll down to line 125

Notice I've set TelerikTabViewHeaderItemSelectedColor to a custom color DeepSkyBlue


2 - Go to App.xaml and see that I've merged my ResourceDictionary, along with the other Telerik ResourceDictionaries, into Application.Resources

This is necessary for the keys to be available to objects in the scope of your application


3 - Go to MainPage.xaml and review the page's resources

Notice that I can now use that Key value in my custom ControlTemplate

<ContentPage.Resources>
    <ResourceDictionary>
        <ControlTemplate x:Key="HeaderControlTemplate">
            <Grid BackgroundColor="Transparent"
                  StyleClass="TelerikTheme">
                <BoxView IsVisible="{TemplateBinding IsSelected}"
                         BackgroundColor="DarkBlue"
                         VerticalOptions="End"
                         HeightRequest="5" />
                <StackLayout Orientation="Horizontal"
                             Margin="0, 0, 0, 8">
                    <Label Text="{TemplateBinding Text}"
                           FontSize="15"
                           TextColor="{StaticResource TelerikTabViewHeaderItemSelectedColor}"
                           HorizontalTextAlignment="Start" />
                    <Label>
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="MyIcon" TextColor="{StaticResource TelerikTabViewHeaderItemSelectedColor}" />
                                <Span Text="Some Text" TextColor="{StaticResource TelerikTabViewHeaderItemSelectedColor}"  />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </StackLayout>
            </Grid>
        </ControlTemplate>
    </ResourceDictionary>
</ContentPage.Resources>

<telerikPrimitives:RadTabView x:Name="tabView"
                 HeaderPosition="Top"
                 StyleClass="TelerikTheme">
    <telerikPrimitives:RadTabView.Items>
        <telerikPrimitives:TabViewItem>
            <telerikPrimitives:TabViewItem.Header>
                <telerikPrimitives:TabViewHeaderItem Text="Tab 1"
                                   ControlTemplate="{StaticResource HeaderControlTemplate}" />
            </telerikPrimitives:TabViewItem.Header>
        </telerikPrimitives:TabViewItem>
        <telerikPrimitives:TabViewItem>
            <telerikPrimitives:TabViewItem.Header>
                <telerikPrimitives:TabViewHeaderItem Text="Tab 2"
                                   ControlTemplate="{StaticResource HeaderControlTemplate}" />
            </telerikPrimitives:TabViewItem.Header>
        </telerikPrimitives:TabViewItem>
        <telerikPrimitives:TabViewItem>
            <telerikPrimitives:TabViewItem.Header>
                <telerikPrimitives:TabViewHeaderItem Text="Tab 3"
                                    ControlTemplate="{StaticResource HeaderControlTemplate}" />
            </telerikPrimitives:TabViewItem.Header>
        </telerikPrimitives:TabViewItem>
    </telerikPrimitives:RadTabView.Items>
</telerikPrimitives:RadTabView>

Here's the result at runtime:




Final Comment

I see that the template you're using doesn't have any TemplateBindings. Without {TemplateBinding Text} or {TemplateBinding IsSelected}, there is no way for the template to use properties exposed by the TabView.

In my demo, you'll see this here:

<ControlTemplate x:Key="HeaderControlTemplate">
    <Grid BackgroundColor="Transparent">
        <BoxView IsVisible="{TemplateBinding IsSelected}" BackgroundColor="DarkBlue" VerticalOptions="End" HeightRequest="5" />
        <StackLayout Orientation="Horizontal" Margin="0, 0, 0, 8">
            <Label Text="{TemplateBinding Text}" FontSize="15" TextColor="{StaticResource TelerikTabViewHeaderItemSelectedColor}" HorizontalTextAlignment="Start" />
            <Label>
                <Label.FormattedText>
                    <FormattedString>
                        <Span Text="MyIcon" TextColor="{StaticResource TelerikTabViewHeaderItemSelectedColor}" />
                        <Span Text="Some Text" TextColor="{StaticResource TelerikTabViewHeaderItemSelectedColor}"  />
                    </FormattedString>
                </Label.FormattedText>
            </Label>
        </StackLayout>
    </Grid>
</ControlTemplate>

- IsSelected is set by the TabView selection mechanism

- Text is set by you in the TabViewHeaderItem definition

<telerikPrimitives:TabViewItem>
    <telerikPrimitives:TabViewItem.Header>
        <telerikPrimitives:TabViewHeaderItem Text="Tab 1" ControlTemplate="{StaticResource HeaderControlTemplate}" />
    </telerikPrimitives:TabViewItem.Header>
</telerikPrimitives:TabViewItem>

If you have any further trouble, feel free to open a Support Ticket here and attach the code you're using so we can investigate directly (you have a Priority Support license and support tickets allows ZIP attachments).

I hope this helps you move forward in getting the header styling you want.

Regards,
Lance | Tech Support Engineer, Sr.
Progress Telerik