Skip to content

Conversation

@sharath2727
Copy link
Contributor

@sharath2727 sharath2727 commented Oct 9, 2025

Description

Type of Change

  • New feature (non-breaking change which adds functionality)

Why

We would like to support hosting XAML UI in Fabric.

What

  1. XamlHost tag is introduced to accept xaml ui
  2. XamlHost ComponentView is introduced to setup the xamlisland and connect the island to childsitelink
  3. 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

@sharath2727 sharath2727 changed the title User/sharath227/xamlislandprototypework [DO NOT REVIEW] Xaml UI Hosting Oct 9, 2025
@sharath2727 sharath2727 changed the title [DO NOT REVIEW] Xaml UI Hosting Xaml UI Hosting Nov 4, 2025
@sharath2727 sharath2727 marked this pull request as ready for review November 4, 2025 19:49
@sharath2727 sharath2727 requested review from a team as code owners November 4, 2025 19:49
@acoates-ms
Copy link
Contributor

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

}

static winrt::Microsoft::ReactNative::XamlApplication Current() {
return s_current;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

};

[webhosthidden]
interface IXamlControl
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

namespace Microsoft.ReactNative {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MS.RN.Xaml namespace?

using namespace ::winrt::Microsoft::UI::Xaml::Markup;
using namespace ::winrt::Windows::UI::Xaml::Interop;
XamlApplication::XamlApplication() {
// m_providers.push_back(winrt::make_self<XamlMetaDataProvider>().as<winrt::Microsoft::UI::Xaml::Markup::IXamlMetadataProvider>());
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can delete this line, it's now further down.

// 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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

/// <reference types="react-native/types/modules/codegen" />
import type {ViewProps} from 'react-native';
export interface XamlHostProps extends ViewProps {
label: string;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think "label" was just a dummy property I made, we should probably remove it.

// 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?
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor

JesseCol commented Nov 5, 2025

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!

Copy link
Contributor

@JesseCol JesseCol left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@sharath2727
Copy link
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants