Chapter 4 An Architecture to Suit You

This completes the work to add the ClockWidget into your codebase. Now you need modify your application so that you can see this widget in action!

Viewing Your Widget

In order to view your widget in your application, you need to make some changes to the MainPage.xaml and MainPage.xaml.cs files that were generated when you first created your project.

Modifying MainPage.xaml

Simply replace the contents of the file with the following.

<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/ dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/

winfx/2009/xaml" xmlns:views="clr-namespace:WidgetBoard.Views" x:Class="WidgetBoard.MainPage">

<views:ClockWidgetView />

</ContentPage>

The original file had a basic example that ships with the .NET MAUI template, but it wasn’t of much use in this application.

Modifying MainPage.xaml.cs

You need to modify the contents of this file because you deleted some controls from the MainPage.xaml file. If you don’t update this file, Visual Studio will report compilation errors. You can replace the entire contents

99

Chapter 4 An Architecture to Suit You

of the MainPage.xaml.cs file with the following to remove references to the controls you deleted from XAML file:

namespace WidgetBoard;

public partial class MainPage : ContentPage

{

public MainPage()

{

InitializeComponent();

}

}

This concludes the changes that you need to make in your application. Let’s see what your application looks like now!

Taking the Application for a Spin

If you build and run your application just like you learned to in Chapter 2, you can see that it renders the ClockWidget just as I originally designed. Figure 4-4 shows the clock widget rendered in the application running on macOS.

100