.NET MAUI releases long-awaited release candidate (RC1)

Author: David Ortinau

We are excited to announce the release candidate of the .NET Multiplatform App UI (.NET MAUI) on 4/13/2022. The SDK now has APIs integrated, the library can be updated, and it is ready for GA (General Availability) compatibility. Like other .NET release candidates, this release includes a "go live" support policy, which means that .NET MAUI will be supported by Microsoft in your production applications.

starting today

Get .NET MAUI RC1, install or update Visual Studio 2022 Preview 17.2 to Preview 3. In the installer, verify that .NET MAUI (Preview) is selected under Mobile Development with .NET Workloads.

To use .NET MAUI RC1 on Mac, follow the command line instructions on the wiki. in Visual
In the Mac version of Studio 2022, support for .NET MAUI will be officially released in a future preview release.

There are release notes for this RC version on GitHub. For more information on getting started with .NET MAUI, please refer to ourdocumentation , as well as a table of migration tips for a set of changes to apply when upgrading your project.

Start your journey with the .NET Podcast app (pictured above), which runs on Android, iOS, macOS, and Windows, and showcases the native app UI and Blazor Hybrid .

How long is Xamarin supported? The Xamarin support policy remains in effect for 2 years after these products are first released. The last release was in November 2021, so support will continue until November 2023.

What's in the .NET MAUI release candidate?

As a multi-platform application building framework, .NET MAUI leverages platform SDKs for Android, iOS, macOS, and Windows. These basic blocks are included in this release, and in addition to using .NET MAUI to maximize code sharing and efficiency, you can also use c\# directly.

.NET MAUI provides over 40 layouts and controls optimized for building responsive UIs across platforms and mobile platforms. You can also integrate Blazor components or the entire Blazor application to publish the same experience on desktop and mobile as you publish on the web today.

How does it compare to Xamarin.Forms? You get all the UI controls that come with Xamarin.Forms, plus new ones like BlazorWebView, Border, GraphicsView, MenuBar, Shadow, and Window.

In addition to related topics, there are also these that are documented , such as:

• animation
• Brushes for solid and gradient colors
• Show popup
• Graphics , take full advantage of Microsoft.Maui graphics blend modes, colors, canvas drawing, images, transitions, winding modes, and more
• shadow
• Styling with XAML and CSS
• Themes for light and dark modes
• visual state

The new .NET MAUI project template now includes a default stylesheet in "Resourcesstyles.xaml" that provides palettes and styles for all controls. Taking Entry as an example, when launching a new application, these text inputs will now start with a shared theme, while still being authentic to the platform it is running on.

 <Style TargetType="Entry">
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
<Setter Property="FontFamily" Value="OpenSansRegular"/>
<Setter Property="FontSize" Value="14" />
<Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource DarkGray}}" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Disabled">
<VisualState.Setters>
<Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource DarkGray}}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>

For views that support different states, we create a sensible default and provide options for light and dark mode colors. For more information, check out:

• style
• theme
• visual state

custom control

.NET MAUI Improves Xamarin.Forms
One of the things the architecture does is add low-code hooks to modify almost everything. Let's consider a typical example of removing the unique Android underscore on an entry field. You might go for this when there is no multi-platform style "underscore" and it only exists on Android?

 #if ANDROID
Microsoft.Maui.Handlers.EntryHandler.Mapper.ModifyMapping("NoUnderline", (h, v) =>
{
    h.PlatformView.BackgroundTintList = ColorStateList.ValueOf(Colors.Transparent.ToPlatform());
});
#endif

That's all the code. This code only needs to run at the beginning of the application before calling the handler.

Let's explain how this works. First, \#if ANDROID is a conditional compilation directive, indicating that this code will only run on Android. In other cases, when you are modifying controls for all platforms, this is unnecessary.

Next, we need to access the controls. The Entry you are using is a .NET MAUI control. Each property, command, event, etc. of an Entry is "mapped" to the platform through a "handler". To modify the map, you can enter it via the handler's map (like Microsoft.Maui.Handlers.EntryHandler.Mapper). From the mapper we have 3 methods:

• PrependToMapping runs before .NET MAUI code
• modifmapping runs, not .NET MAUI code
• AppendToMapping runs after .NET MAUI code

For this case, it doesn't matter which we use, as it will be called at least once and no other implementation on Entry will touch the native property we need to modify. This code uses modifmapping and adds an Entry called "NoUnderline". Usually this property matches the name of the actual property, but in this case we'll introduce a new property.

The h in the action is the handler which allows us to access the TextView which is an Android type in the PlatformView. At this point, the code is working directly with the Android SDK.

Now that the underscore is removed, you can implement your own design, say, one like old-fashioned Windows
Phone like frame.

 <Border Stroke="{StaticResource Black}"
StrokeThickness="2"
StrokeShape="Rectangle">
<Entry
Margin="20,4"
Placeholder="Username" />
</Border>

For more examples of how to easily modify the look and feel of cross-platform and platform-specific layer controls, see the documentation for custom controls .

we need your feedback

Follow oursimple guide to install the latest preview version of Visual Studio 2022 (17.2 Preview 3) and build your first multi-platform application.

When you have any questions, please ask at dotnet/maui on GitHub or Microsoft Q&A .