Xamarin: Using Telerik TabView with Data Trigger Colors

Xamarin TelerikThe Telerik TabView for Xamarin is a great tool to hold and alter the content of several pages. One of the downsides is that the styles offered are a bit limited. I wanted to change the Text color fo the Tab Header Text to be white or off-white depending on the selected state.

No problem as Xamarin as Data Triggers that can change the property of an item depending on the value of data.

Step 1: Add a custom TabViewItem header

<telerikPrimitives:TabViewItem.Header>
	<telerikPrimitives:TabViewHeaderItem>
	   <telerikPrimitives:TabViewHeaderItem.Content>
                <Label Text="SAVED SEARCHES" />
           </telerikPrimitives:TabViewHeaderItem.Content>
	 </telerikPrimitives:TabViewHeaderItem>
</telerikPrimitives:TabViewItem.Header>

In the above, we now have a label for the header. the next step is to add Data Triggers to that Label so that when IsSelected is changed, the Data Trigger will change the Label’s color

Step 2: Attach a Data Trigger to the Label

<Label Text="SAVED SEARCHES">
  <Label.Triggers>
     <DataTrigger TargetType="Label" Binding="{TemplateBinding IsSelected}" Value="True">
	 <Setter Property="TextColor" Value="White"></Setter>
     </DataTrigger>
     <DataTrigger TargetType="Label" Binding="{TemplateBinding IsSelected}" Value="False">
         <Setter Property="TextColor" Value="#aaffffff"></Setter>
     </DataTrigger>
</Label.Triggers>

A Data Trigger is like a sentence. you can read it like this:

WHEN the IsSelected IS true THEN change the TEXTCOLOR to white.

WHEN the IsSelected IS faflseTHEN change the TEXTCOLOR to off-white.

Here’s the result with several tabs:

2019-10-18 11_31_18-iPhone 11 iOS 13.1.png

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s