Can I use existing WinUI3 controls in MAUI project?

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

Defeat

Sounds like this github issue. A dev says "it will be supported"; no details given. – Armidaarmiger

Hey, yeah. I have the same question. The link from @Armidaarmiger is interesting but 2 years old. I'd like to see an example of this soon. – Persnickety

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.

Jolo

And for a more comprehensive example, see the official documentation: learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/… – Seedbed