Xaml UI Hosting #15223

sharath2727 · 2025-10-09T10:38:29Z

Description

Type of Change

New feature (non-breaking change which adds functionality)

Why

We would like to support hosting XAML UI in Fabric.

What

XamlHost tag is introduced to accept xaml ui
XamlHost ComponentView is introduced to setup the xamlisland and connect the island to childsitelink
UIA Automation is now able to understand xaml content hosted in contentislandcomponentview

Testing

Manual testing using SampleAppFabric and hardcoded XAML UI in the xamlisland

Changelog

Should this change be included in the release notes: no_

Microsoft Reviewers: Open in CodeFlow

changes

acoates-ms · 2025-11-04T21:12:06Z

Can we verify that we are not loading the Xaml dlls on boot when not using any Xaml controls.

vnext/Microsoft.ReactNative/Pch/pch.h

acoates-ms · 2025-11-04T21:08:24Z

vnext/Microsoft.ReactNative/XamlApplication.h

+  }
+
+  static winrt::Microsoft::ReactNative::XamlApplication Current() {
+    return s_current;


What happens if you have a XAML app, and then embed a RNW control within the Xaml App? Seems like in that case, we'd want to be using the already existing XamlApp?

It's true there can only be one instance of MUX.Application in the process. But unfortunately MUX.Application doesn't let you add more metadata dynamically, so I thought it'd be good to have this type to allow multiple Xaml-based components to coordinate.

I'm not sure offhand the best way to handle the case where the host already has a MUX Application. Can we file an issue to follow up on that later, or is it urgent to solve? Thanks!

acoates-ms · 2025-11-04T21:13:58Z

vnext/Microsoft.ReactNative/IReactPackageProvider.idl

  };

+  [webhosthidden]
+  interface IXamlControl


Can we move this into a Microsoft.ReactNative.Xaml namespace? I'd like the try to keep any Xaml specific stuff out of core to ensure we have nice layering.

acoates-ms · 2025-11-04T21:14:15Z

vnext/Microsoft.ReactNative/XamlApplication.idl

+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+namespace Microsoft.ReactNative {


MS.RN.Xaml namespace?

vnext/Microsoft.ReactNative/XamlApplication.cpp

JesseCol · 2025-11-04T23:30:29Z

vnext/Microsoft.ReactNative/XamlApplication.cpp

+  // m_providers.push_back(winrt::make_self<XamlMetaDataProvider>().as<winrt::Microsoft::UI::Xaml::Markup::IXamlMetadataProvider>());
+  s_current = *this;
+
+  // TODO: It's probably not a good idea to only load the controls pri file, there are other ones too.


Please file a follow-up issue to investigate this one at a later time. It might be an issue when folks want to load a more complex Xaml user control, we might eventually want a way to let the app declare its own .pri file.

Yeah I understand. Will create a task for follow up.

vnext/src-win/src/private/specs_DEPRECATED/components/Xaml/XamlHostNativeComponent.js

vnext/src-win/Libraries/Components/Xaml/XamlHost.d.ts

JesseCol · 2025-11-04T23:37:16Z

vnext/Microsoft.ReactNative/Fabric/Composition/ContentIslandComponentView.cpp

+  // This is similar to ViewComponentView::hitTest, but we don't want to hit test the children of this node,
+  // because the child ComponentView is kind of a dummy representation of the XamlElement and doesn't do anything.
+  // So, we just hit test the ContentIsland itself to make the UIA ElementProviderFromPoint call work.
+  // TODO: Will this cause a problem -- does this function need to do something different for non-UIA scenarios?


I'm curious of Andrew's thoughts on the best way to handle ContentIslandComponentView::hitTest

@acoates-ms

Why do you need this override? What kinds of components are you putting in the ContentIslandComponentView? I'd expect that the components you'd be putting in the XamlHost view would be Xaml components. And those should not inherit from ViewComponent, so they would be ignored by the default hit test, no?

JesseCol · 2025-11-05T00:19:37Z

There's an older Xaml sample in sample-custom-component called CalendarView, it'd be nice to delete that one as this goes in.

There's also one in playground-composition\CustomComponent.cpp we might want to delete.

This is looking fine to me, but I want to make sure we get Andrew's approval. Thanks!

JesseCol

This will be great to get in, thanks! Please make sure you get Andrew's approval.

sharath2727 · 2025-11-05T20:34:43Z

Can we verify that we are not loading the Xaml dlls on boot when not using any Xaml controls.

Yeah we are not introducing any Xaml dll's. All these come into picture when RegisterXamlHostNativeComponent is triggered from the 3P Module.

vnext/src-win/index.windows.js

vnext/src-win/src/private/specs_DEPRECATED/components/Xaml/XamlHostNativeComponent.js

vnext/codegen/react/components/rnwcore/Props.h

vnext/codegen/react/components/rnwcore/Props.cpp

sundaramramaswamy · 2025-11-05T11:17:21Z

vnext/Microsoft.ReactNative/XamlApplication.cpp

+  this->ResourceManagerRequested([resourceManager](auto &&, ResourceManagerRequestedEventArgs args) {
+    args.CustomResourceManager(resourceManager);
+  });
+  winrt::Microsoft::UI::Xaml::Hosting::WindowsXamlManager::InitializeForCurrentThread();


Will XamlApplication be instantiated if there are no XamlHost tags used in an RNW app (either directly or indirectly via modules)?

WindowsXamlManager::InitializeForCurrentThread is known to be a slow function. We need to be sure we don't penalize the mainline scenario (RNW apps with no XAML usage) for a special case scenario.

It won't be instantiated. It will only be created when XamlHostComponentView is initialized.

sundaramramaswamy · 2025-11-07T08:02:27Z

vnext/Microsoft.ReactNative/Fabric/Composition/ContentIslandComponentView.cpp

-  assert(false);
  base_type::MountChildComponentView(childComponentView, index);
 }

 void ContentIslandComponentView::UnmountChildComponentView(
    const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
    uint32_t index) noexcept {
-  assert(false);


Were these asserts originally put to ensure control doesn't reach here? More like unreachable code but now we've a genuine islands scenario that have them removed?

sundaramramaswamy · 2025-11-07T10:04:28Z

vnext/Microsoft.ReactNative/XamlApplication.cpp

+  for (const auto &provider : m_providers) {
+    auto definitionsCurrentProvider = provider.GetXmlnsDefinitions();
+    for (const auto &definition : definitionsCurrentProvider) {
+      allDefinitions.insert(allDefinitions.begin(), definition);
+    }
+  }


Inserting to the front of a vector is better avoided generally as all following elements needs to be reseated (slow). Unless the order of the definitions is important, this will be faster:

for (const auto &provider: m_providers) { const auto& definitions = provider.GetXmlnsDefinitions(); allDefinitions.insert(allDefinitions.cend(), definitions.cbegin(), definitions.cend()); }

vnext/Microsoft.ReactNative/XamlApplication.cpp

sundaramramaswamy · 2025-11-07T10:26:31Z

vnext/Microsoft.ReactNative/Fabric/Composition/RootComponentView.cpp

+  auto uiaProvider =
+      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(view)->EnsureUiaProvider();
+
+  // TODO: Avoid exposing CompositionDynamicAutomationProvider in RootComponentView


Please file a follow-up task for this and paste its link here.

#15317 - I already created a task and adding pending sub tasks to it. Will add this here.

sharath2727 added 7 commits October 8, 2025 16:59

initial workspace launching sample app fabric without xaml

28b1471

changes

XamlHost Definition, declaration and Codegen components

7cb5b7e

Introduce XamlApplication that enables to host xaml ui

ffa1c03

Introduce xamlhost component

b7cbe82

Register XamlHostComponentView

ed1e67c

Using XamlHost in Sample App and hardcoding button in xamlisland

0a95df7

Accessibility Validated on hardcoded xaml control

6861056

sharath2727 changed the title ~~User/sharath227/xamlislandprototypework~~ [DO NOT REVIEW] Xaml UI Hosting Oct 9, 2025

Cleaned up

b3d5b4f

sharath2727 changed the title ~~[DO NOT REVIEW] Xaml UI Hosting~~ Xaml UI Hosting Nov 4, 2025

sharath2727 added 4 commits November 4, 2025 23:43

Change files

c90b1da

yarn format

9357561

yarn lint fix

805ba4d

Merge branch 'main' into user/sharath227/xamlislandprototypework

46dc340

sharath2727 marked this pull request as ready for review November 4, 2025 19:49

sharath2727 requested review from a team as code owners November 4, 2025 19:49

acoates-ms reviewed Nov 4, 2025

View reviewed changes

JesseCol reviewed Nov 4, 2025

View reviewed changes

vnext/Microsoft.ReactNative/XamlApplication.cpp Outdated Show resolved Hide resolved

JesseCol reviewed Nov 4, 2025

View reviewed changes

vnext/src-win/src/private/specs_DEPRECATED/components/Xaml/XamlHostNativeComponent.js Show resolved Hide resolved

JesseCol reviewed Nov 4, 2025

View reviewed changes

vnext/src-win/Libraries/Components/Xaml/XamlHost.d.ts Show resolved Hide resolved

JesseCol reviewed Nov 4, 2025

View reviewed changes

JesseCol approved these changes Nov 5, 2025

View reviewed changes

Microsoft.ReactNative.Xaml namespace and lint fixes

9889e8c

sharath2727 added 4 commits November 6, 2025 02:13

Merge branch 'main' into user/sharath227/xamlislandprototypework

284c423

rework index.windows.js and js.flow

522cf31

Introduce IXamlProvider

529423b

Yarn issue

9b6aa17

sundaramramaswamy requested changes Nov 7, 2025

View reviewed changes

microsoft-github-policy-service bot added Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) and removed Needs: Author Feedback The issue/PR needs activity from its author (label drives bot activity) labels Nov 7, 2025

sharath2727 added 2 commits November 8, 2025 02:28

Avoid compiling xaml for office solution

b9036c3

yarn format fix

11c54ea

sharath2727 requested review from JesseCol, acoates-ms and sundaramramaswamy November 7, 2025 21:01

sharath2727 added 2 commits November 8, 2025 02:53

Merge branch 'main' into user/sharath227/xamlislandprototypework

6b92ff5

Update shared vcxitems filter

b179f47

Xaml UI Hosting #15223

Are you sure you want to change the base?

Xaml UI Hosting #15223

Uh oh!

Conversation

sharath2727 commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Why

What

Testing

Changelog

Microsoft Reviewers: Open in CodeFlow

Uh oh!

acoates-ms commented Nov 4, 2025

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JesseCol commented Nov 5, 2025

Uh oh!

JesseCol left a comment

Choose a reason for hiding this comment

Uh oh!

sharath2727 commented Nov 5, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

sharath2727 commented Oct 9, 2025 •

edited

Loading