
- •Table of Contents
- •About the Author
- •About the Technical Reviewer
- •Acknowledgments
- •Introduction
- •What is .NET MAUI?
- •Digging a Bit Deeper
- •Where Did It Come From?
- •How It Differs From the Competition
- •Why Use .NET MAUI?
- •Supported Platforms
- •Code Sharing
- •Developer Freedom
- •Community
- •Fast Development Cycle
- •.NET Hot Reload
- •XAML Hot Reload
- •Performance
- •Strong Commercial Offerings
- •Limitations of .NET MAUI
- •No Web Assembly (WASM) Support
- •No Camera API
- •Apps Won’t Look Identical on Each Platform
- •Lack of Media Playback Out of the Box
- •The Glass Is Half Full, Though
- •How to Build .NET MAUI Applications
- •Visual Studio
- •Visual Studio (Windows)
- •Visual Studio for Mac
- •Rider
- •Visual Studio Code
- •Summary
- •Setting Up Your Environment
- •macOS
- •Visual Studio for Mac
- •Xcode
- •Remote Access
- •Windows
- •Visual Studio
- •Visual Studio to macOS
- •Troubleshooting Installation Issues
- •.NET MAUI Workload Is Missing
- •Visual Studio Installer
- •Command Line
- •Creating Your First Application
- •Creating in Visual Studio
- •Creating in the Command Line
- •Building and Running Your First Application
- •Getting to Know Your Application
- •WidgetBoard
- •Summary
- •Source Code
- •Project Structure
- •/Platforms/ Folder
- •Android
- •MacCatalyst
- •Tizen
- •Windows
- •Summary
- •/Resources/ Folder
- •Fonts
- •Images
- •Generic Host Builder
- •What Is Dependency Injection?
- •Registering Dependencies
- •AddSingleton
- •AddTransient
- •AddScoped
- •Application Lifecycle
- •Application States
- •Lifecycle Events
- •Handling Lifecycle Events
- •Cross-Platform Mappings to Platform Lifecycle Events
- •Platform-Specific Lifecycle Events
- •Android
- •Windows
- •Summary
- •A Measuring Stick
- •Prerequisites
- •Model View ViewModel (MVVM)
- •Model
- •View
- •XAML
- •C# (Code-Behind)
- •ViewModel
- •Model View Update (MVU)
- •Getting Started with Comet
- •Adding Your MVU Implementation
- •XAML vs. C# Markup
- •Plain C#
- •C# Markup
- •Chosen Architecture for This Book
- •Adding IWidgetViewModel
- •Adding BaseViewModel
- •Adding ClockWidgetViewModel
- •Adding Views
- •Adding IWidgetView
- •Adding ClockWidgetView
- •Viewing Your Widget
- •Modifying MainPage.xaml
- •Modifying MainPage.xaml.cs
- •Taking the Application for a Spin
- •MVVM Enhancements
- •MVVM Frameworks
- •Magic
- •Summary
- •Source Code
- •Prerequisites
- •Models
- •BaseLayout.cs
- •FixedLayout.cs
- •Board.cs
- •Pages
- •BoardDetailsPage
- •FixedBoardPage
- •ViewModels
- •AppShellViewModel
- •BoardDetailsPageViewModel
- •FixedBoardPageViewModel
- •App Icons
- •Adding Your Own Icon
- •Platform Differences
- •Android
- •Splash Screen
- •XAML
- •Dissecting a XAML File
- •Building Your First XAML Page
- •Layouts
- •AbsoluteLayout
- •FlexLayout
- •Grid
- •HorizontalStackLayout
- •VerticalStackLayout
- •Data Binding
- •Binding
- •BindingContext
- •Path
- •Mode
- •Source
- •Applying the Remaining Bindings
- •MultiBinding
- •Command
- •Compiled Bindings
- •Shell
- •ShellContent
- •Navigation
- •Registering Pages for Navigation
- •Performing Navigation
- •Navigating Backwards
- •Passing Data When Navigating
- •Flyout
- •FlyoutHeader
- •FlyoutContent
- •Selected Board
- •Navigation to the Selected Board
- •Setting the BindingContext of Your AppShell
- •Register AppShell with the MAUI App Builder
- •Resolve the AppShell Instead of Creating It
- •Tabs
- •Search
- •Taking Your Application for a Spin
- •Summary
- •Source Code
- •Extra Assignment
- •Placeholder
- •ILayoutManager
- •BoardLayout
- •BoardLayout.xaml
- •BindableLayout
- •BoardLayout.xaml.cs
- •Adding the LayoutManager Property
- •Adding the ItemsSource Property
- •Adding the ItemTemplateSelector Property
- •Handling the ChildAdded Event
- •Adding Remaining Bits
- •FixedLayoutManager
- •Accepting the Number of Rows and Columns for a Board
- •Adding the NumberOfColumns Property
- •Adding the NumberOfRows Property
- •Building the Board Layout
- •Setting the Correct Row/Column Position for Each Widget
- •Using Your Layout
- •Allowing for the Registration of Widget Views and View Models
- •Creation of a Widget View
- •Creation of a Widget View Model
- •Registering the Factory with MauiAppBuilder
- •Registering Your ClockWidget with the Factory
- •WidgetTemplateSelector
- •Registering the Template Selector with MauiAppBuilder
- •Updating FixedBoardPageViewModel
- •Finally Using the Layout
- •Summary
- •Source Code
- •Extra Assignment
- •What Is Accessibility?
- •Why Make Your Applications Accessible?
- •What to Consider When Making Your Applications Accessible
- •How to Make Your Application Accessible
- •Screen Reader Support
- •SemanticProperties
- •SemanticProperties.Description
- •SemanticProperties.Hint
- •SemanticProperties.HeadingLevel
- •SemanticScreenReader
- •AutomationProperties
- •AutomationProperties.ExcludedWithChildren
- •AutomationProperties.IsInAccessibleTree
- •Suitable Contrast
- •Dynamic Text Sizing
- •Avoiding Fixed Sizes
- •Preferring Minimum Sizing
- •Font Auto Scaling
- •Testing Your Application’s Accessibility
- •Android
- •macOS
- •Windows
- •Accessibility Checklist
- •Summary
- •Source Code
- •Extra Assignment
- •Adding the Ability to Add a Widget to a Board
- •Possible Ways of Achieving Your Goal
- •Showing a Modal Page
- •The Chosen Approach
- •Adding Your Overlay View
- •Updating Your View Model
- •Showing the Overlay View
- •Styling
- •Examining the Default Styles
- •TargetType
- •ApplyToDerivedTypes
- •Setter
- •AppThemeBinding
- •Further Reading
- •Triggers
- •Creating ShowOverlayTriggerAction
- •Using ShowOverlayTriggerAction
- •Further Reading
- •Animations
- •Basic Animations
- •Combining Basic Animations
- •Chaining Animations
- •Concurrent Animations
- •Cancelling Animations
- •Easings
- •Complex Animations
- •Recreating the ScaleTo Animation
- •Creating a Rubber Band Animation
- •Combining Triggers and Animations
- •Summary
- •Source Code
- •Extra Assignment
- •Animate the BoxView Overlay
- •Animate the New Widget
- •What Is Local Data?
- •File System
- •Cache Directory
- •App Data Directory
- •Database
- •Repository Pattern
- •Listing Your Boards
- •SQLite
- •Installing SQLite-net
- •Using Sqlite-net
- •Connecting to an SQLite database
- •Mapping Your Models
- •Creating Your Tables
- •Inserting into an SQLite Database
- •Reading a Collection from an SQLite Database
- •Reading a Single Entity from an SQLite Database
- •Deleting from an SQLite Database
- •Updating an Entity in an SQLite Database
- •LiteDB
- •Installing LiteDB
- •Using LiteDB
- •Connecting to a LiteDB database
- •Mapping Your Models
- •Creating Your Tables
- •Inserting into a LiteDB Database
- •Reading a Collection from a LiteDB Database
- •Reading a Single Entity from a LiteDB Database
- •Deleting from a LiteDB Database
- •Updating an Entity in a LiteDB Database
- •Database Summary
- •Application Settings (Preferences)
- •What Can Be Stored in Preferences?
- •Setting a Value in Preferences
- •Getting a Value in Preferences
- •Checking if a Key Exists in Preferences
- •Secure Storage
- •Storing a Value Securely
- •Reading a Secure Value
- •Removing a Secure Value
- •Platform specifics
- •Android
- •Windows
- •Summary
- •Source Code
- •Extra Assignment
- •What Is Remote Data?
- •Considerations When Handling Remote Data
- •Loading Times
- •Failures
- •Security
- •Webservices
- •The Open Weather API
- •Creating an Open Weather Account
- •Creating an Open Weather API key
- •Using System.Text.Json
- •Creating Your Models
- •Connecting to the Open Weather API
- •Registering Your Widget
- •Testing Your Widget
- •Adding Some State
- •Converting the State to UI
- •Displaying the Loading State
- •Displaying the Loaded State
- •Displaying the Error State
- •Simplifying Webservice Access
- •Prebuilt Libraries
- •Code Generation Libraries
- •Adding the Refit NuGet Package
- •Further Reading
- •Polly
- •Summary
- •Source Code
- •Extra Assignment
- •TODO Widget
- •Quote of the Day Widget
- •NASA Space Image of the Day Widget
- •.NET MAUI Essentials
- •Permissions
- •Checking the Status of a Permission
- •Requesting Permission
- •Handling Permissions in Your Application
- •Using the Geolocation API
- •Registering the Geolocation Service
- •Using the Geolocation Service
- •Displaying Permission Errors to Your User
- •Configuring Platform-Specific Components
- •Android
- •Windows
- •Platform-Specific API Access
- •Platform-Specific Code with Compiler Directives
- •Platform-Specific Code in Platform Folders
- •Overriding the Platform-Specific UI
- •OnPlatform
- •OnPlatform Markup Extension
- •Conditional Statements
- •Handlers
- •Customizing Controls with Mappers
- •Scoping of Mapper Customization
- •Further Reading
- •Summary
- •Source Code
- •Extra Assignment
- •Barometer Widget
- •Geocoding Lookup
- •Unit Testing
- •Unit Testing in .NET MAUI
- •xUnit
- •NUnit
- •MSTest
- •Your Chosen Testing Framework
- •Adding Your Own Unit Tests
- •Adding a Unit Test Project to Your Solution
- •Modify Your Application Project to Target net7.0
- •Adding a Reference to the Project to Test
- •Modify Your Test Project to Use MAUI Dependencies
- •Testing Your View Models
- •Testing BoardDetailsPageViewModel
- •Testing INotifyPropertyChanged
- •Testing Asynchronous Operations
- •Creating Your ILocationService Mock
- •Creating Your WeatherForecastService Mock
- •Creating Your Asynchronous Tests
- •Testing Your Views
- •Creating Your ClockWidgetViewModel Mock
- •Creating Your View Tests
- •Device Testing
- •Creating a Device Test Project
- •Adding a Device-Specific Test
- •Running Device-Specific Tests
- •Snapshot Testing
- •Snapshot Testing Your Application
- •Passing Thoughts
- •Summary
- •Source Code
- •.NET MAUI Graphics
- •Maintaining the State of the Canvas
- •Further Reading
- •Building a Sketch Widget
- •Representing a User Interaction
- •Registering Your Widget
- •Taking Your Widget for a Test Draw
- •Summary
- •Source Code
- •Extra Assignment
- •Distributing Your Application
- •Android
- •Additional Resources
- •Certificate
- •Identifier
- •Capabilities
- •Entitlements
- •Provisioning Profiles
- •Additional Resources
- •macOS
- •Additional Resources
- •Windows
- •Additional Resources
- •Following Good Practices
- •Performance
- •Startup Tracing
- •Image Sizes
- •Linking
- •What Is Linking?
- •Issues That Crop Up
- •Crashes/Analytics
- •Sentry
- •App Center
- •Obfuscation
- •Distributing Test Versions
- •Summary
- •Looking at the Final Product
- •Taking the Project Further
- •Useful Resources
- •StackOverflow
- •GitHub
- •YouTube
- •Gerald Versluis
- •James Montemagno
- •Social Media
- •Yet More Goodness
- •Looking Forward
- •Comet
- •Testing
- •Index
Chapter 12 Testing
};
viewModel.BoardName = "Work";
Assert.True(invoked);
}
This provides you with the confidence to know that if the BoardName is not showing in your user interface, it will probably not be an issue inside the view model.
Testing Asynchronous Operations
Many modern applications involve some level of asynchronous operation and a perfect example is your use of the Open Weather API in order to load the current location’s weather. The WeatherWidgetViewModel relies on an implementation of the IWeatherForecastService interface you created in Chapter 10. Unit tests against specific implementations like this can
be considered flaky. A flaky test is one that provides inconsistent results. Web service access can exhibit this type of behavior when unit testing given access limits on the API or other potential issues that could impact a reliable test run.
In order to remove test flakiness, you can create a mock implementation that will provide a set of consistent behavior.
Creating Your ILocationService Mock
Create a new folder in your WidgetBoard.Tests project and call it Mocks. I covered this before but organizing your code in such a way really can make it much easier to maintain. With this new folder, you can create a new class file inside and call it MockLocationService.cs. Modify the contents to the following:
374
Chapter 12 Testing
using WidgetBoard.Services;
namespace WidgetBoard.Tests.Mocks;
internal class MockLocationService : ILocationService
{
private readonly Location? location; private readonly TimeSpan delay;
private MockLocationService(Location? mockLocation, TimeSpan delay)
{
location = mockLocation; this.delay = delay;
}
internal static ILocationService ThatReturns(Location? location, TimeSpan after) =>
new MockLocationService(location, after);
internal static ILocationService ThatReturnsNoLocation(TimeSpan after) =>
new MockLocationService(null, after);
public async Task<Location?> GetLocationAsync()
{
await Task.Delay(this.delay);
return this.location;
}
}
The implementation you provided for the GetLocationAsync method forces a delay based on the supplied TimeSpan parameter in the constructor to mimic a network delay and then return the location supplied in the constructor.
375
Chapter 12 Testing
One key detail I really like to use when building mocks is to make the usage of them in my tests as easy to read as possible. You can see that the MockLocationService cannot be instantiated because it has a private constructor. This means that to use it you must use the ThatReturns or ThatReturnsNoLocation methods. Look at this and see how much more readable it is:
MockLocationService.ThatReturns(new Location(0.0, 0.0), after: TimeSpan.FromSeconds(2));
The above is much more readable than the following because it includes the intent:
new MockLocationService(new Location(0.0, 0.0), TimeSpan. FromSeconds(2));
Creating Your WeatherForecastService Mock
You can add a second file into the Mocks folder and call this class file MockWeatherForecastService.cs. Modify the contents to the following:
using WidgetBoard.Communications;
namespace WidgetBoard.Tests.Mocks;
internal class MockWeatherForecastService : IWeatherForecastService
{
private readonly Forecast? forecast; private readonly TimeSpan delay;
private MockWeatherForecastService(Forecast? forecast, TimeSpan delay)
{
this.forecast = forecast; this.delay = delay;
376
Chapter 12 Testing
}
internal static IWeatherForecastService ThatReturns(Forecast? forecast, TimeSpan after) =>
new MockWeatherForecastService(forecast, after);
internal static IWeatherForecastService ThatReturnsNoForecast(TimeSpan after) =>
new MockWeatherForecastService(null, after);
public async Task<Forecast?> GetForecast(double latitude, double longitude)
{
await Task.Delay(this.delay);
return forecast;
}
}
The implementation you provided for the GetForecast method forces a delay based on the supplied TimeSpan parameter in the constructor
to mimic a network delay and then return the forecast supplied in the constructor.
Creating Your Asynchronous Tests
With your mocks in place, you can write tests that will verify the behavior of your application when calling asynchronous and potentially long running operations. You need to add a new class file to your
ViewModels folder in the WidgetBoard.Tests project and call is WeatherWidgetViewModelTests.cs and then modify the contents to the following:
using WidgetBoard.Tests.Mocks; using WidgetBoard.ViewModels;
377
Chapter 12 Testing
namespace WidgetBoard.Tests.ViewModels;
public class WeatherWidgetViewModelTests
{
}
Now you can proceed to adding three tests to cover a variety of different scenarios.
[Fact]
public async Task NullLocationResultsInPermissionErrorState()
{
var viewModel = new WeatherWidgetViewModel( MockWeatherForecastService.ThatReturnsNoForecast(after: TimeSpan.FromSeconds(5)), MockLocationService.ThatReturnsNoLocation(after: TimeSpan.FromSeconds(2)));
await viewModel.InitializeAsync();
Assert.Equal(State.PermissionError, viewModel.State); Assert.Null(viewModel.Weather);
}
This first test, as the name implies, verifies that if a null location is returned from the ILocationService implementation, the view model
State will be set to PermissionError and no Weather will be set.
[Fact]
public async Task NullForecastResultsInErrorState()
{
var viewModel = new WeatherWidgetViewModel( MockWeatherForecastService.ThatReturnsNoForecast(after: TimeSpan.FromSeconds(5)),
378
Chapter 12 Testing
MockLocationService.ThatReturns(new Location(0.0, 0.0), after: TimeSpan.FromSeconds(2)));
await viewModel.InitializeAsync();
Assert.Equal(State.Error, viewModel.State); Assert.Null(viewModel.Weather);
}
This second test, as the name implies, verifies that if a null forecast is returned from the IWeatherForecastService implementation, the view model State will be set to Error and no Weather will be set.
[Fact]
public async Task ValidForecastResultsInSuccessfulLoad()
{
var weatherForecastService = MockWeatherForecastService.ThatReturns(
new Communications.Forecast
{
Current = new Communications.Current
{
Temperature = 18.0,
Weather = new Communications.Weather[]
{
new Communications.Weather
{
Icon = "abc.png",
Main = "Sunshine"
}
}
}
},
379