Theming with ControlTemplates

ControlTemplates allow separation of logical view hierarchy from visual hierarchy. Similar to a DataTemplate, a ControlTemplate will produce the visual hierarchy for your controller page. One advantage of ControlTemplates, is the concept of theming. Many software applications provide settings to change user interface styles (Visual Studio and Xamarin Studio offer a dark and light theme). We are going to implement two themes for the MainPage and provide a Button to switch between the two.

Let's start with opening the App.xaml page, and adding the first ControlTemplate for the black theme:

<ControlTemplate x:Key="MainBlackTemplate"> 
                <StackLayout x:Name="StackLayout" Spacing="10" Orientation="Vertical" Padding="10, 10, 10, 10" BackgroundColor="Black" 
            VerticalOptions="Center" HorizontalOptions="Center" > 
          <Image x:Name="Image" Source="stocklist.png" HeightRequest="120" WidthRequest="120"/> &...