Exercise 3: Clean up the XAML and tailor the UI to the platform

In this exercise we will continue modifying our Calculator application. We will consolidate the colors used in our UI by placing them into a shared common location and refine the UI per platform.

To complete the exercise, you will need Visual Studio for Windows or macOS with the Xamarin development tools installed. You will also need either an emulator/simulator or a device to run the exercise on. Please see the setup page if you need help installing the Xamarin development environment.

Create a static C# resource class

First, create a C# static class to hold our shared values.

1. Add a new source file to the project - name it SharedResources.
2. Make the class static and remove the constructor if one was created for you (static classes cannot have instance constructors).

public static class SharedResources
{
}

Consolidate duplicate color values into the resource class

1. Locate one of the operator buttons in MainPage.xaml - these all have an orange BackgroundColor defined as a hex string.
2. Create a new Color public static property in the SharedResources class - name it OpButtonBkColor and set the value to the color defined in XAML (Color.FromRgb(0xff, 0xa5, 0)).

The Color class is available in the Xamarin.Forms namespace, so you will need to either add a using statement or fully qualify the class.

using Xamarin.Forms;

public static class SharedResources
{
    public static Color OpButtonBkColor
    {
        get { return Color.FromRgb(0xff, 0xa5, 0); }
    }
}

Use the {x:Static} markup extension

We need to use the {x:Static} Markup Extension to get the value from the property on each of the operator buttons.

1. Open MainPage.xaml.
2. Use the {x:Static} markup extension to get the value from the new property in SharedResources and assign it as the Background property on each of the operator buttons.
3. You will need to define the namespace in XAML to access the properties in SharedResources. The lab solution has it in the namespace "Calculator", but check your C# source file to verify you are using the correct namespace.

// One example of adding the background color to an operator button
<ContentPage x:Class="Calculator.MainPage"
            ...
            xmlns:local="clr-namespace:Calculator">
    ...
    <Button Text="/" Grid.Row="1" Grid.Column="3"
        BackgroundColor="{x:Static local:SharedResources.OpButtonBkColor}" TextColor="White"
        Font="36" BorderRadius="0" Clicked="OnSelectOperator" />
    ...
</ContentPage>

Add other values to your resource class

1. Try moving some of the other values into your shared resource class - for example the Font or other colors.
2. Run the application on your platform of choice and verify the UI displays correctly.

Define platform-specific values

If you run the application on iOS, you will notice it obscures the status bar. This can be corrected by adjusting the Padding property of MainPage; however we only need this change on iOS - it's not required for Android or Windows.

• Use the OnPlatform<T> tag to set the ContentPage.Padding property to a valid Thickness.

Set the <T> of OnPlatform<T> to a Thickness value using the x:TypeArguments property. You can set the iOS specific value by setting an On element with a Platform="iOS" attribute. (Android is Platform="Android", Windows is Platform="UWP", and there are several others pre-defined for us). If you don't need to change the value (i.e. you want a default value) then you don't need to supply that platform's On override element.

• Run the application on iOS to see the carrier bar now be visible.
• Run the application on Android or Windows to verify it does not include the padding.

<ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness">
        <On Platform="iOS">0,20,0,0</On>
    </OnPlatform>
</ContentPage.Padding>

Compile the XAML pages

As a final step, let's turn on the XAML compiler XAMLC to compile our XAML pages.

1. Add the XamlCompilation attribute to App.cs
2. Pass in the option to compile XamlCompilationOptions.Compile.
3. Build and run the application.

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]

namespace Calculator
{
   public class App : Application
   ...

Exercise summary

In this final exercise, you have utilized a few built-in Markup Extension's to move consolidate resources and specify platform-specific values for the UI to customize it per-platform.

You can view the completed solution in the Exercise 3 > Completed folder of your copy of the cloned or downloaded course materials.