What's New in .NET MAUI for .NET 9: Exploring the New Controls
The latest .NET MAUI 9 introduces two new exciting controls: HybridWebView and Titlebar for Windows. Let's explore these controls and how you can integrate them into your applications.
Please, support my blog by clicking on our sponsors ad!
HybridWebView
The HybridWebView control allows you to host HTML, JavaScript, and CSS content in a web view, enabling communication between the code in the web view (JavaScript) and the hosting code (C#/.NET). For example, you can host an existing React JS app in a .NET MAUI native app and build the backend using C# and .NET.
To create a .NET MAUI app using HybridWebView, you need:
- Static web content (HTML, JS, CSS, etc.)
- The HybridWebView control as part of the app UI (referenced in XAML)
- Code in both the web content and the C#/.NET side to send messages between components
For more information, refer to the official HybridWebView documentation.
Titlebar for Windows
The Titlebar control allows you to customize the title bar in your Windows app. It can be set as the value of the Window.TitleBar
property on any Window.
An example of Titlebar in XAML:
<Window.TitleBar>
<TitleBar x:Name="TeamsTitleBar" Title="Hello World" Icon="appicon.png" HeightRequest="46">
<TitleBar.Content>
<Entry x:Name="SearchTitleBar" Placeholder="Search" VerticalOptions="Center" MinimumWidthRequest="300" MaximumWidthRequest="450" HeightRequest="32"/>
</TitleBar.Content>
</TitleBar>
</Window.TitleBar>
An example of Titlebar in C#:
Window.TitleBar = new TitleBar
{
Title = "MAUI App",
Icon = "appicon.png",
HeightRequest = 46,
LeadingContent = new AvatarButton()
};
TitleBar is highly customizable with properties such as Content
, LeadingContent
, and TrailingContent
. Here’s an extended example:
<TitleBar Title="My App" BackgroundColor="#512BD4" HeightRequest="48">
<TitleBar.Content>
<SearchBar Placeholder="Search" MaximumWidthRequest="300" HorizontalOptions="FillAndExpand" VerticalOptions="Center"/>
</TitleBar.Content>
<TitleBar.TrailingContent>
<ImageButton HeightRequest="36" WidthRequest="36" BorderWidth="0" Background="Transparent">
<ImageButton.Source>
<FontImageSource Size="16" Glyph="" FontFamily="SegoeMDL2"/>
</ImageButton.Source>
</ImageButton>
</TitleBar.TrailingContent>
</TitleBar>
Note that Mac Catalyst support for the TitleBar control will be added in future releases.
Conclusion
The new controls introduced in .NET MAUI 9 bring powerful new capabilities for cross-platform app development. Whether you are integrating web technologies using HybridWebView or enhancing your Windows app with a customizable TitleBar, these controls expand what you can do with .NET MAUI.
Comments
Post a Comment