Can I use existing WinUI3 controls in MAUI project? - maui

Question

Is it possible to use the exisiting controls of WinUI 3 in the MAUI project? Like controls in https://github.com/microsoft/WinUI-Gallery
I installed the WinUI package to my MAUI project
<ItemGroup>
<PackageReference Include="Microsoft.UI.Xaml" Version="2.7.1" />
<PackageReference Include="Microsoft.WindowsAppSDK" Version="1.1.1" />
</ItemGroup>
And edit the App.xaml
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiWithWinui"
xmlns:controls="using:Microsoft.UI.Xaml.Controls"
x:Class="MauiWithWinui.App">
<Application.Resources>
<controls:XamlControlsResources>
<controls:XamlControlsResources.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
</controls:XamlControlsResources.MergedDictionaries>
</controls:XamlControlsResources>
</Application.Resources>
</Application>
as well as Platform/Windows/App.xaml
<maui:MauiWinUIApplication
x:Class="MauiWithWinui.WinUI.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:maui="using:Microsoft.Maui"
xmlns:local="using:MauiWithWinui.WinUI"
xmlns:controls="using:Microsoft.UI.Xaml.Controls">
<Application.Resources>
<XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
</Application.Resources>
</maui:MauiWinUIApplication>
but when I went to use the WinUI control under a Page of MAUI, it prompted that the control could not be found
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="using:Microsoft.UI.Xaml.Controls"
x:Class="MauiWithWinui.MainPage">
<Grid>
<controls:RatingControl AutomationProperties.Name="RatingControl with placeholder" PlaceholderValue="3" />
</Grid>
</ContentPage>
the MAUI project only targeted to windows platform, though i know winui3 project is a better choice

Answer 1

You are mixing frameworks. If you want to use a WinUI control, you are almost right except for the last step where you are adding the WinUI control into Maui XAML.
What you need to do is create a handler that sits between the maui page and the platform view: https://github.com/mattleibow/MauiWinUIRatingControlDemo
Th reason this is needed is that this code will also run on Android, so that needs to also do something. If you try build your code for Android now, it is impossible to even compile. MAUI sits in between and forms an abstraction that allows you do something else for each platform.
If you run my code on Windows with the handler, you get the rating control. If you run it on Android, you get a blank view as the Android handler is not yet created. You can then decide how you want to make this handler for Android or iOS and hook up events and properties accordingly.