Exercise - Add behavior to your XAML page - Training

15 minutes

Note

.NET MAUI is the next evolution of Xamarin and what we recommend you develop mobile and desktop apps with, and you can learn more about .NET MAUI in several training modules. This Xamarin training module will not be maintained going forward.

In this exercise, you'll move the phone word logic from the original MainPage source file. You will continue working from the preceding exercise, in which you renamed the MainPage source file OldMainPage.

This exercise is a continuation of the previous one. Use your existing solution, or begin from the exercise1 > final solution in your copy of the cloned or downloaded exercise repo.

Copy existing code

Open the OldMainPage.cs file.
Copy the following field from that file into your MainPage.xaml.cs code-behind file:
```
public class MainPage : ContentPage
{
    string translatedNumber;
    ...
}
```

Copy the following methods from OldMainPage.cs to MainPage.xaml.cs:

OnTranslate
OnCall

void OnTranslate(object sender, EventArgs e)
{
    ...
}

async void OnCall(object sender, System.EventArgs e)
{
    ...
}

Make sure you have a using Xamarin.Essentials; statement at the top of your class to use the dialer abstraction this code uses from the Xamarin.Essentials NuGet package.

Set EventHandlers

You do a phone word translation by pressing the translate button and then dialing the translated number. Wire up the behavior to the Button by using the methods you imported in the preceding step.

Open MainPage.xaml.
Wire up the Clicked event in XAML on the translate button to the OnTranslate method.

Wire up the Clicked event in XAML on the call button to the OnCall method:

<!-- Examples of wiring up a Clicked event -->
<Button x:Name="translateButton" ...
        Clicked="OnTranslate" />
<Button x:Name="callButton" ...
        Clicked="OnCall" />

Use x:Static for runtime values in XAML

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

Add a new source file to the project and name it SharedResources.cs.
Make the class static and remove the constructor if one was created for you. Static classes can't have instance constructors.
```
public static class SharedResources
{
}
```
Create a new Color public static property in the SharedResources class. Name it ButtonBkColor and set the value to Color.FromRgb(0xff, 0xa5, 0).

The Color class is available in the Xamarin.Forms namespace. You'll need to either add a using statement or fully qualify the class.

Create a second Color public static property in the SharedResources class. Name it ButtonTextColor, and set the value to Color.White.

using Xamarin.Forms;

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

    public static Color ButtonTextColor {
        get { return Color.White; }
    }
}

You need to use the {x:Static} markup extension to get the value from the property on each of the operator buttons.

Open MainPage.xaml.
To have access to our static code values, add a namespace to our XAML file. Insert the following xmlns:local attribute into the root ContentPage element to gain access to the resources under the namespace local.
```
<ContentPage ...
             xmlns:local="clr-namespace:Phoneword">
```
Use the {x:Static} markup extension to get the value from the ButtonBkColor property in SharedResources, and assign it as the Background property on each of the buttons.
You need to define the namespace in XAML to access the properties in SharedResources. The exercise solution has it in the namespace Phoneword, but check your C# source file to verify that you're using the correct namespace.

Use the {x:Static} markup extension to get the value from the ButtonTextColor property in SharedResources. Assign it as the TextColor property on each of the buttons.

// An example of adding the Background and TextColor colors to a button
<ContentPage ...
             xmlns:local="clr-namespace:Phoneword">
    ...
    <Button x:Name="translateButton" Text="Translate" Clicked="OnTranslate"
            TextColor="{x:Static local:SharedResources.ButtonTextColor}"
            BackgroundColor="{x:Static local:SharedResources.ButtonBkColor}" />
    ...
</ContentPage>

Add platform-specific customization

If you run the app on iOS, you'll notice it obscures the status bar. To correct this behavior, adjust the Padding property of MainPage. You need this change only on iOS; it's not required for Android.

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" and there are several others pre-defined for us). If you don't need to change the value (that is, you want a default value), then you don't need to supply that platform's On override element.
```
<ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness">
        <On Platform="iOS">0,40,0,0</On>
    </OnPlatform>
</ContentPage.Padding>
```
Run the app on iOS to see the content move down from the status bar and any notch, if your chosen simulator has one.

Note

This is a simple example of how to add platform-specific properties. To work around the status bar and device notch in iOS, specifically, the iOS safe area system is a better choice to use throughout your app.
Run the app on Android to verify that it doesn't include the padding.

In this exercise, you've added all the code-behind logic for the Phoneword app and wired it up to the views defined in XAML. If you look through the code, you can see it's primarily oriented around the behavior of the app and less concerned with the UI structure. The main benefit of using XAML to define our pages is that it allows us to focus the code portion of the app on the logic.

You also used a few built-in markup extensions to combine resources and specify platform-specific values for the UI to customize it per-platform.

You can view the completed solution in the exercise2 > final folder of your copy of the cloned or downloaded exercise repo.

Continue

Exercise - Add behavior to your XAML page

Copy existing code

Set EventHandlers

Use x:Static for runtime values in XAML

Add platform-specific customization

Feedback