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 Manager of the Progress .NET UI & Tools division, which develops the UI for WPF, UI for WinForms, UI for UWP and UI for Xamarin products. She started her career on the Telerik ASP.NET team in 2006 as a support officer and passed through the position of software developer to the position of senior manager. Off work, she enjoys cooking, watching movies and reading books.

Related Posts

Comments

Comments are disabled in preview mode.