Can I use WinUI 3 custom controls in WPF/WF application using xaml island?

[JeganRavichandran]

Can I use WinUI 3 custom controls in the WPF/WF application using XAML island?
Just so you know, I want to host only WinUI 3, not WinUI 2.0.

[DarranRowe]

Yes.

Depending on how you do things, you may have to implement an application class that implements IXamlMetadataProvider. You may also need to have the controls in a MSIX package or registered via Registration Free WinRT to make them activatable.

[driver1998]

You may want to take a look at https://github.com/driver1998/Xamlception.

It is not fully working though, sometimes it may crash on exit.

[JeganRavichandran]

The app crashes just by mouse hovering over the application. However, @castorix solution works fine.

[castorix]

I converted the WinForms test sample into WPF and it seems to work correctly, apart the bug : #8806

WPF_XAML_Islands_WinUI3

[nikolayvpavlov]

Call me stupid, but I can't find the WinForms sample :-( I tried to convert the WPF sample into WinForms, but it didn't work.

[castorix]

Call me stupid, but I can't find the WinForms sample :-( I tried to convert the WPF sample into WinForms, but it didn't work.

You can go to "repositories" to find samples of a user ( https://github.com/castorix?tab=repositories)
I called it CSharp_WinUI3_DesktopWindowXamlSource (I should have put "XAML_Islands" in the name...)

[nikolayvpavlov]

Many thanks, Castorix! I used the wrong class, I needed DesktopWindowXamlSource.

[MEK3DK]

I assume it is because my monitor is scaled to 150% that I see the below. WPF in general is good at scaling, does anybody know if this is a general issue with the hosting?

[DarranRowe]

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:testcomponent="using:TestComponent"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="Blue" ColumnDefinitions="Auto" RowDefinitions="Auto,Auto,Auto">
        <Button Grid.Row="0" Grid.Column="0"  x:Name="myButton">Click Me!</Button>
        <Button Grid.Row="1" Grid.Column="1"  x:Name="myButton2">Me Too!</Button>

        <testcomponent:TestPage Grid.Row="2" Grid.Column="2" />
    </Grid>
</Page>

This application is properly marked as DPI aware in the application manifest file. It is a C++ Windows API application. As you can see, it is properly resizing and scaling, this is on a monitor that is at 125%. So it isn't a general hosting problem.

<?xml version="1.0" encoding="utf-8"?>
<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1">
  <assemblyIdentity version="1.0.0.0" name="XamlIslandTest3.app"/>

  <file name="TestComponent.dll">
    <activatableClass name="TestComponent.TestPage" threadingModel="both" xmlns="urn:schemas-microsoft-com:winrt.v1" />
    <activatableClass name="TestComponent.XamlMetadataProvider" threadingModel="both" xmlns="urn:schemas-microsoft-com:winrt.v1" />
  </file>
    
  <compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
    <application>
      <!-- Windows 10-->
      <supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />
      <maxversiontested Id="10.0.22621.0" />
    </application>
  </compatibility>
  <application xmlns="urn:schemas-microsoft-com:asm.v3">
    <windowsSettings>
      <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true/PM</dpiAware>
      <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">PerMonitorV2, PerMonitor</dpiAwareness>
      <activeCodePage xmlns="http://schemas.microsoft.com/SMI/2019/WindowsSettings">UTF-8</activeCodePage>
    </windowsSettings>
  </application>
</assembly>

The application manifest in question. It has Windows 10 compatibility set, DPI awareness set and I am using Registration Free WinRT to host a custom control here.

[castorix]

I assume it is because my monitor is scaled to 150% that I see the below. WPF in general is good at scaling, does anybody know if this is a general issue with the hosting?

Yes, I had only tested on 100% and I have hardcoded dimensions of SiteBridge without reading DPI : to be improved...
(like with RasterizationScale from ContentSiteView)

[castorix]

I quickly updated the WPF sample with RasterizationScale and WM_DPICHANGED
(tested with 125% and 150% on Windows 10)

[MEK3DK]

Very nice, thank you :-)

[SubashiniMahendran]

@castorix, I attempted to use the custom WinUI controls in the WPF application you provided, but encountered a COM exception. I have included a sample, a screenshot for your reference.

WPF_XAML_Islands_WinUI3-master.zip

Please share your suggestions on resolving this issue or anything I have missed?