TL;DR: .NET 9 brings new features for .NET MAUI, including improved controls, HybridWebView integration, and better performance. This blog covers key updates and provides a step-by-step guide to implementing the Syncfusion React Data Grid with HybridWebView in your app.
The .NET Multi-Platform App UI (.NET MAUI) continues to evolve, gaining new features and improvements with each release. In .NET 9, developers can expect enhanced controls, better performance, and more robust testing capabilities. This blog explores the new features for .NET MAUI in .NET 9 and provides a step-by-step guide on integrating the Syncfusion React Data Grid component into the HybridWebView control.
The HybridWebView control in .NET MAUI allows developers to host HTML, JavaScript, and CSS content directly within their applications. This control is handy for seamlessly integrating web-based functionality into your app’s native experience.
To get started, make sure you have the following setup:
Open Visual Studio and create a new .NET MAUI App project.
Create a folder named wwwroot under your project’s Resources/Raw directory. This folder will contain your HTML, JavaScript, and CSS files. You can start with a basic index.html file.
Here’s an example of what your index.html might look like:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<script type="module" crossorigin src="/assets/index-CtlmMUak.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-cmgkem7l.css">
</head>
<body>
<div id="root"></div>
</body>
</html>
In this guide, I’ll demonstrate how to integrate the Syncfusion React Data Grid component as web content within the HybridWebView.
To start with React, a recommended approach is to scaffold a project using Vite. Follow the steps in the Syncfusion documentation Getting Started with React UI Components with Vite to create a React project with the Data Grid component.
After setting up the React project, build it using the following command.
npm run build
The output will be placed in the /dist folder, containing all the necessary HTML, JavaScript, and CSS files. Copy these files into the MAUI project’s Resources/Raw/wwwroot folder.
For simplicity, you can bundle the entire project into a single file.
npm install vite-plugin-singlefile –save-dev
vite.config.js file to include this plugin.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { viteSingleFile } from 'vite-plugin-singlefile'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), viteSingleFile()],
})
npm run build
Now, integrate the HybridWebView control in your XAML.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp3.MainPage">
<HybridWebView />
</ContentPage>
Key Considerations:
The HybridWebView will look for the index.html file in the Resources/Raw/wwwroot directory in this setup.
Finally, build and run your application to see the HybridWebView in action.
You can check out the complete working example of this in GitHub.
The TitleBar control in .NET MAUI allows you to customize the title bar of your Windows application. This can help you create a more integrated and polished user experience. Here’s a simple example to get you started:
Window window = new Window();
window.TitleBar = new TitleBar
{
Title = "MAUI App",
Background = Colors.Blue,
HeightRequest = 60,
Content = new Entry()
{
Margin = 5,
Placeholder = "Search",
WidthRequest = 300,
HeightRequest = 30
}
};
Refer to the output of the above code example.
.NET 9 brings several control enhancements that improve the development experience and performance of applications:
Thank you for reading! .NET 9 for .NET MAUI introduces new features and improvements that make building cross-platform applications more efficient and enjoyable. Start exploring these features today to take your .NET MAUI applications to the next level.
Follow the steps in this blog and share your feedback in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!