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

                <Label Text="SAVED SEARCHES" />

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

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

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