Exercise 1: Create a XAML-based calculator

This exercise will take an existing Xamarin.Forms application (a calculator app) and convert the user interface definition from C# to XAML.

You will start with an application that displays a calculator and allows you to perform simple calculations. In the starter solution, the UI is completely defined in C# as you have done up to this point. Our goal is to convert this UI into XAML. This is a standard Xamarin.Forms application with a Portable Class Library for the shared UI and logic, and platform-specific projects for iOS, Windows, and Android.

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.

Add a new XAML ContentPage to the PCL

We'll replace the existing code based MainPage with a new XAML version.

1. Start by opening the Exercise 1 > Start Calculator project from your copy of the cloned or downloaded course materials and verify it builds and runs in your environment (any platform is fine).
2. Open the MainPage.cs file. This is the existing UI definition which is done in C# code.

4. Compile the app and make sure it builds - you don't need to run it, just make sure nothing is broken before you continue.

Add a grid

Take a look at the images below as guidance for the grid we will create. We'll use a Grid to layout the required controls.

1. Start by opening MainPage.xaml. This is the markup file which we will use to describe our UI.
2. Add a Grid as the first child tag in the ContentPage, if there is an existing Label just replace it with the Grid.

Note: Depending on the version of the IDE you are using, it may have a tag named ContentPage.Content as the first child tag, or it might be a Label. As you will see a bit later, the default child property for the ContentPage is Content, which means you can just place the child right into the ContentPage and omit the ContentPage.Content value. The below code block has removed the tag, but it's ok to leave it in place - just make sure your Grid is in between the open and close tags.

3. Set the following properties on the Grid

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage x:Class="Calculator.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    
    <Grid Padding="5,0" RowSpacing="1" ColumnSpacing="1" BackgroundColor="Black">
    </Grid>
</ContentPage>

Customize the grid

• Add RowDefinition and ColumnDefinition elements to create a 4x6 grid.
• We want 4 columns and 6 rows, with the first row being 2X the size of all the others.
• All of the columns should be equally sized.

Here's the first row and column definition to show you the syntax:

<Grid ...>
   <Grid.RowDefinitions>
      <RowDefinition Height="2*" />
   </Grid.RowDefinitions>

   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
   </Grid.ColumnDefinitions>
</Grid>

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage x:Class="Calculator.MainPage"
            xmlns="http://xamarin.com/schemas/2014/forms" 
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    
    <Grid Padding="5,0" RowSpacing="1" ColumnSpacing="1" BackgroundColor="Black">
       <Grid.RowDefinitions>
          <RowDefinition Height="2*" />
          <RowDefinition Height="*" />
          <RowDefinition Height="*" />
          <RowDefinition Height="*" />
          <RowDefinition Height="*" />
          <RowDefinition Height="*" />
       </Grid.RowDefinitions>

       <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="*" />
       </Grid.ColumnDefinitions>
    </Grid>

</ContentPage>

Add a label

• Add a Label into the first row; have it span all four columns by setting the Grid.ColumnSpan property, and set the following properties:

<Label FontAttributes="Bold" FontSize="48" BackgroundColor="Black" Text="0"
              TextColor="White" HorizontalTextAlignment="End" VerticalTextAlignment="Center"
              LineBreakMode="NoWrap" Grid.ColumnSpan="4" />

Add buttons

• Add all of the buttons into the UI, placing them into each row and column of the Grid as appropriate.
• Set the BackgroundColor and TextColor of each Button based on the screenshots shown earlier.
• For each button set the FontSize to "36" and the BorderRadius to "0".

<Button Text="7" Grid.Row="1" Grid.Column="0"
       BackgroundColor="White" TextColor="Black"
       FontSize="36" BorderRadius="0" />
<Button Text="8" Grid.Row="1" Grid.Column="1"
       BackgroundColor="White" TextColor="Black"
       FontSize="36" BorderRadius="0" />
<Button Text="9" Grid.Row="1" Grid.Column="2"
       BackgroundColor="White" TextColor="Black"
       FontSize="36" BorderRadius="0" />

<Button Text="4" Grid.Row="2" Grid.Column="0"
       BackgroundColor="White" TextColor="Black"
       FontSize="36" BorderRadius="0" />
<Button Text="5" Grid.Row="2" Grid.Column="1"
       BackgroundColor="White" TextColor="Black"
       FontSize="36" BorderRadius="0" />
<Button Text="6" Grid.Row="2" Grid.Column="2"
       BackgroundColor="White" TextColor="Black"
       FontSize="36" BorderRadius="0" />

<Button Text="1" Grid.Row="3" Grid.Column="0"
       BackgroundColor="White" TextColor="Black"
       FontSize="36" BorderRadius="0" />
<Button Text="2" Grid.Row="3" Grid.Column="1"
       BackgroundColor="White" TextColor="Black"
       FontSize="36" BorderRadius="0" />
<Button Text="3" Grid.Row="3" Grid.Column="2"
       BackgroundColor="White" TextColor="Black"
       FontSize="36" BorderRadius="0" />
<Button Text="0" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3"
       BackgroundColor="White" TextColor="Black"
       FontSize="36" BorderRadius="0" />

<Button Text="/" Grid.Row="1" Grid.Column="3"
        BackgroundColor="#FFA500" TextColor="White"
        FontSize="36" BorderRadius="0" />
<Button Text="X" Grid.Row="2" Grid.Column="3"
        BackgroundColor="#FFA500" TextColor="White"
        FontSize="36" BorderRadius="0" />
<Button Text="-" Grid.Row="3" Grid.Column="3"
        BackgroundColor="#FFA500" TextColor="White"
        FontSize="36" BorderRadius="0" />
<Button Text="+" Grid.Row="4" Grid.Column="3"
        BackgroundColor="#FFA500" TextColor="White"
        FontSize="36" BorderRadius="0" />

<Button Text="C" Grid.Row="5" Grid.Column="0"
        BackgroundColor="#808080" TextColor="White"
        FontSize="36" BorderRadius="0" />

<Button Text="=" Grid.Row="5" Grid.Column="1" Grid.ColumnSpan="3"
        BackgroundColor="#FFA500" TextColor="White"
        FontSize="36" BorderRadius="0" />

Display the XAML ContentPage

• Open the App.cs in the Portable Class Library (PCL) project.
• Instantiate a new instance of MainPage in the constructor and assign it to the MainPage property. This should replace the existing OldMainPage instantiation.
• Run the application and make sure it displays the calculator UI - it won't be functional yet since we've not wired up any behavior, but it should look identical to how we started.

public class App : Application
{
    public App()
    {
        MainPage = new MainPage();
    }
}

I'm getting a build error about ContentPageViewModel

public MainPage()
{
    InitializeComponent();
    // BindingContext = new ContentPageViewModel();
}

Exercise summary

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