Building Cross-Platform Applications with .NET MAUI/

...

/

XAML MAUI Graphics and Special Views

XAML MAUI Graphics and Special Views

Learn about multipart or special view types supported by the .NET MAUI version of XAML.

We'll cover the following...

In this lesson, we'll cover the remaining XAML views supported by MAUI, which include graphical views and special-purpose views, such as web views and custom views. To demonstrate these view types, we'll have the following project setup:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#512BD4</color>
    <color name="colorPrimaryDark">#2B0B98</color>
    <color name="colorAccent">#2B0B98</color>
</resources>
Complete project setup

Graphics controls

XAML has a variety of controls that can be used for drawing various types of graphics.

BoxView, Rectangle, and RoundRectangle

These controls are very similar to each other, and all of them are used for drawing rectangles, including ones with rounded corners. The following snippet shows how the markup for each of these control types looks.

Press + to interact
<BoxView Color="CornflowerBlue"
    CornerRadius="5"
    WidthRequest="80"
    HeightRequest="80"
    VerticalOptions="Center"
    HorizontalOptions="Center" />
<Rectangle Fill="Blue"
    WidthRequest="100"
    HeightRequest="80"
    HorizontalOptions="Center"
    VerticalOptions="Center" />
<RoundRectangle Fill="Blue"
    CornerRadius="10"
    WidthRequest="100"
    HeightRequest="80"
    HorizontalOptions="Center"
    VerticalOptions="Center" />

The above markup will render as shown in the ...