Telerik blogs
ColorfulXamarinWPF-and-WinForms_870x220

Learn how to easily create a custom colorful Telerik theme for Xamarin apps with this quick how-to guide.

When I stepped in to the mobile world coming from the world of pretty and slick WPF apps, I was really surprised to see how different my app looked on different devices and platforms. An app you'd build on iOS would look totally different on Android or UWP. Much of this is attributed to the user experience and design patterns embodied by these platforms and I understand that. Still, I wanted to achieve a consistent look and feel on all platforms and "control" how my app will look.   

I wanted to create a good-looking colorful app easily. I missed that feeling.

To solve this problem for every mobile developer that feels the same, we introduced a theming mechanism and a predefined theme in Telerik UI for Xamarin that addresses this challenge - the Telerik Blue theme.

Colors and Complementary Colors

After this theme was released, we received plenty of positive feedback and several questions:

  • "Are you planning to release more themes?"
  • "I would love to see another theme to the suite!"
  • "I have two questions: how much? And, give it to me."

Okay, well, as a developer I know - we love themes. So don't be shy and let us know what themes you need.

Note: Please let us know what UI and theme you would like to use in your app.

In this article, I'll show you how to customize the current theme and change its colors in an app that uses Telerik UI for Xamarin. As an example, I'll modify the Calendar's look and feel, but the same approach is valid for the whole suite.

First, let's apply the default theme by simply adding the ResourceDictionary entries for the needed assembly. An entry for the BlueResources dictionary is required for all components. I will also add an entry for the TelerikThemesStyles for the Input assembly (this assembly is holding the Calendar component):

<telerikCommon:RadResourceDictionary>
  <telerikCommon:RadResourceDictionary.MergedDictionaries>
    <ResourceDictionary MergedWith="telerikCommon:BlueResources" />
    <ResourceDictionary MergedWith="telerikInput:TelerikThemeStyles" />
  </telerikCommon:RadResourceDictionary.MergedDictionaries>
</telerikCommon:RadResourceDictionary>

Next, we'll set the StyleClass property of the control:

<telerikInput:RadCalendar x:Name="calendar" StyleClass="TelerikTheme" />

If we run this example, the Calendar control is displayed as follows:

BlueCalendar

Now, let's change the blue to a sunnier color, like yellow. To do that, we'll create a custom theme based on existing blue.

First, we'll define a new ResourceDictionary:

<ResourceDictionary
  xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  x:Class="Examples.YellowResources ">
</ResourceDictionary>

Here's the accompanying class definition:

public partial class YellowResources : ResourceDictionary
{
  public YellowResources ()
  {
    InitializeComponent ();
  }
}

Next, let's find the specific brushes for the control of existing theme and add them to the dictionary. You can find them described here. Let's apply the color Orange:

<ResourceDictionary
  xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  x:Class="App1.YellowResources">
  <!-- Calendar -->
  <Color x:Key="CalendarBasicFontColor">Orange</Color>
  <Color x:Key="CalendarAlternativeFontColor">#919191</Color>
  <Color x:Key="CalendarGridColor">Orange</Color>
  <Color x:Key="CalendarMenuBarColor">Yellow</Color>
  <Color x:Key="CalendarAccentColor1">Yellow</Color>
  <Color x:Key="CalendarAccentColor2">Yellow</Color>
  <Color x:Key="CalendarBackgroundColor1">#3D5AFE</Color>
  <Color x:Key="CalendarBackgroundColor2">Orange</Color>
  <Color x:Key="CalendarBackgroundColor3">Yellow</Color>
  <Color x:Key="CalendarComplementaryColor1">Yellow</Color>
  <Color x:Key="CalendarComplementaryColor2">Yellow</Color>
</ResourceDictionary>

Now, go back to the app and replace telerikCommon:BlueResources resource dictionary with the new local:YellowResources:

<telerikCommon:RadResourceDictionary>
  <telerikCommon:RadResourceDictionary.MergedDictionaries>
    <ResourceDictionary MergedWith="local:YellowResources"/>
    <ResourceDictionary MergedWith="telerikInput:TelerikThemeStyles"/>
    <ResourceDictionary MergedWith="primitives:TelerikThemeStyles"/>
  </telerikCommon:RadResourceDictionary.MergedDictionaries>
</telerikCommon:RadResourceDictionary>

And voila, here is the yellow calendar:

SunnyCalendar

You can learn more bout the theme and how to customize it here.

Download a Free Trial

Providing you with the reliable, customizable and good-looking components you need is our mission, and the mission of Telerik UI for Xamarin. But don't take our word for it. download a free trial today and see it for yourself!

Start My Trial


Rossitza-Fakalieva
About the Author

Rossitza Fakalieva

Rossitza Fakalieva is a Technical Manager, Microsoft MVP in Developer Technologies and a Director of the Bulgarian chapter of the global Women Who Code organization. She previously worked on the Telerik engineering team and defines herself as .NET enthusiast. She loves to empower others to grow in their career and in the tech field—by teaching, by delivering courses and presentations, and as part of her daily job.

Related Posts

Comments

Comments are disabled in preview mode.