This is my first ever blog post so it could be a little bit muddled. Today I’d like to present funny and maybe useful stuff for Xamarin.Forms (yes I like Xamarin.Forms). I will show how to implement theming in Xamarin.Forms.

Let’s start with this stylish page.

But we want our user to be really happy hence we add a second theme. So how can we define our theme and how can we switch between themes in the runtime? First we will add our themes to App.xaml. Of course I will be using XAML (oh, yeah, I love XAML!) and resource dictionaries.

<Application
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="ThemeTest.App">
  <Application.Resources>
	  <ResourceDictionary x:Name="Default">
	    <Style x:Key="labelStyle" TargetType="Label">
	      <Setter Property="TextColor" Value="#FFA500" />
        <Setter Property="Text" Value="Applejack" />
	    </Style>
      <Style x:Key="imageStyle" TargetType="Image">
        <Setter Property="Source" Value="Applejack.jpg" />
      </Style>
	  </ResourceDictionary>
  </Application.Resources>
  <ResourceDictionary x:Name="Second">
    <Style x:Key="labelStyle" TargetType="Label">
      <Setter Property="TextColor" Value="Pink" />
      <Setter Property="Text" Value="Fluttershy" />
    </Style>
    <Style x:Key="imageStyle" TargetType="Image">
      <Setter Property="Source" Value="Fluttershy.jpg" />
    </Style>
  </ResourceDictionary>
</Application>

Now we have two themes Default and Second. Let’s write some code to choose the theme we like.

namespace ThemeTest
{
    public partial class App
    {
        public App()
        {
            InitializeComponent();
            MainPage = new TestPage();
        }

        public void SetDefaultStyle()
        {
            Resources = Default;
        }

        public void SetSecondStyle()
        {
            Resources = Second;
        }
    }
}

And now we can easily switch between our themes. To test I will add this page (of course it will be XAML, have I told  that I love it?).

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ThemeTest.TestPage"
             BackgroundColor="White">
  <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
	  <Label Style="{x:DynamicResource labelStyle}" HorizontalOptions="Center" />
    <Image Style="{x:DynamicResource imageStyle}"></Image>
    <Button x:Name="BtnDefaultStyle" Clicked="BtnDefaultStyle_OnClicked"
      Text="Set default style"></Button>
    <Button x:Name="BtnSecondStyle" Clicked="BtnSecondStyle_OnClicked"
      Text="Set second style"></Button>
  </StackLayout>
</ContentPage>

One thing to remember. To be able to switch between our themes without restarting the app we will have to use x:DynamicResource instead of StaticResource to tell Xamarin that this resource could be changed during app’s life.

Now we will need just little code to breathe some life in our application.

using System;

namespace ThemeTest
{
    public partial class TestPage
    {
        public TestPage()
        {
            InitializeComponent();
        }

        private void BtnDefaultStyle_OnClicked(object sender, EventArgs e)
        {
            ((App)App.Current).SetDefaultStyle();
        }

        private void BtnSecondStyle_OnClicked(object sender, EventArgs e)
        {
            ((App)App.Current).SetSecondStyle();
        }
    }
}

And now we can choose our pony.

Of course this applications is primitive and we have no theming for buttons or the status bar, nor is the theme saved between sessions, but it gives an idea of how we can play with resource dictionaries in Xamarin.Forms. The same approach can be used for localisation but I won’t recommend doing that (there is much better way). I hope it was not that bad for the first time. Hope I’ll stop procrastinating (and playing Fallout NV, oh!, I have three more DLC!) and next post will be in this year.