Xaml UI Hosting

.ado/jobs/universal.yml

@@ -108,6 +108,7 @@
                       Invoke-WebRequest -UseBasicParsing $winmd2md_url -OutFile $env:TEMP\winmd2md.exe
                       & $env:TEMP\winmd2md.exe /experimental /outputDirectory vnext\target\winmd2md vnext\target\${{ matrix.BuildPlatform }}\${{ matrix.BuildConfiguration }}\Microsoft.ReactNative\Microsoft.ReactNative.winmd
                     displayName: "Generate WinRT API docs"
+                    continueOnError: true
 
                   - task: PublishBuildArtifacts@1
                     displayName: Upload WinRT API docs

change/react-native-windows-86668219-62b8-4f50-98cd-ca89397c90ff.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Introduce xamlhost component",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/App.xaml

@@ -0,0 +1,5 @@
+<Application
+    x:Class="Microsoft.ReactNative.Xaml.XamlApplication"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+</Application>

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

@@ -161,6 +161,13 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::SetFocus(void) {
   return UiaSetFocusHelper(m_view);
 }
 
+winrt::IUnknown CompositionDynamicAutomationProvider::TryGetChildSiteLinkAutomationProvider() {
+  if (m_childSiteLink) {
+    return m_childSiteLink.AutomationProvider().as<winrt::IUnknown>();
+  }
+  return nullptr;
+}
+
 HRESULT __stdcall CompositionDynamicAutomationProvider::get_FragmentRoot(IRawElementProviderFragmentRoot **pRetVal) {
   if (pRetVal == nullptr)
     return E_POINTER;

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionDynamicAutomationProvider.h

@@ -98,6 +98,14 @@ class CompositionDynamicAutomationProvider : public winrt::implements<
   void AddToSelectionItems(winrt::com_ptr<IRawElementProviderSimple> &item);
   void RemoveFromSelectionItems(winrt::com_ptr<IRawElementProviderSimple> &item);
 
+  void SetChildSiteLink(winrt::Microsoft::UI::Content::ChildSiteLink childSiteLink) {
+    m_childSiteLink = childSiteLink;
+  }
+
+  // If this object is for a ChildSiteLink, returns the ChildSiteLink's automation provider.
+  // This will be a provider object from the hosted framework (for example, WinUI).
+  winrt::IUnknown TryGetChildSiteLinkAutomationProvider();
+
  private:
   ::Microsoft::ReactNative::ReactTaggedView m_view;
   winrt::com_ptr<ITextProvider2> m_textProvider;

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

@@ -219,7 +219,8 @@ HRESULT __stdcall CompositionRootAutomationProvider::ElementProviderFromPoint(
     auto local = rootView->ConvertScreenToLocal({static_cast<float>(x), static_cast<float>(y)});
     auto provider = rootView->UiaProviderFromPoint(
         {static_cast<LONG>(local.X * rootView->LayoutMetrics().PointScaleFactor),
-         static_cast<LONG>(local.Y * rootView->LayoutMetrics().PointScaleFactor)});
+         static_cast<LONG>(local.Y * rootView->LayoutMetrics().PointScaleFactor)},
+        {static_cast<LONG>(x), static_cast<LONG>(y)});
     auto spFragment = provider.try_as<IRawElementProviderFragment>();
     if (spFragment) {
       *pRetVal = spFragment.detach();

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

@@ -178,14 +178,12 @@ ContentIslandComponentView::~ContentIslandComponentView() noexcept {
 void ContentIslandComponentView::MountChildComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
     uint32_t index) noexcept {
-  assert(false);
   base_type::MountChildComponentView(childComponentView, index);
 }
 
 void ContentIslandComponentView::UnmountChildComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
     uint32_t index) noexcept {
-  assert(false);
   base_type::UnmountChildComponentView(childComponentView, index);
 }
 
@@ -262,6 +260,12 @@ void ContentIslandComponentView::ConfigureChildSiteLinkAutomation() noexcept {
         args.AutomationProvider(nullptr);
         args.Handled(true);
       });
+
+  if (m_uiaProvider) {
+    auto providerImpl =
+        m_uiaProvider.as<winrt::Microsoft::ReactNative::implementation::CompositionDynamicAutomationProvider>();
+    providerImpl->SetChildSiteLink(m_childSiteLink);
+  }
 }
 
 } // namespace winrt::Microsoft::ReactNative::Composition::implementation

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

@@ -8,6 +8,7 @@
 
 #include <Fabric/FabricUIManagerModule.h>
 #include <winrt/Microsoft.UI.Input.h>
+#include "CompositionDynamicAutomationProvider.h"
 #include "CompositionRootAutomationProvider.h"
 #include "ReactNativeIsland.h"
 #include "Theme.h"
@@ -275,7 +276,7 @@ facebook::react::Point RootComponentView::getClientOffset() const noexcept {
   return {};
 }
 
-winrt::IInspectable RootComponentView::UiaProviderFromPoint(const POINT &ptPixels) noexcept {
+winrt::IUnknown RootComponentView::UiaProviderFromPoint(const POINT &ptPixels, const POINT &ptScreen) noexcept {
   facebook::react::Point ptDips{
       static_cast<facebook::react::Float>(ptPixels.x) / m_layoutMetrics.pointScaleFactor,
       static_cast<facebook::react::Float>(ptPixels.y) / m_layoutMetrics.pointScaleFactor};
@@ -295,7 +296,41 @@ winrt::IInspectable RootComponentView::UiaProviderFromPoint(const POINT &ptPixel
   if (view == nullptr)
     return nullptr;
 
-  return winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(view)->EnsureUiaProvider();
+  auto uiaProvider =
+      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(view)->EnsureUiaProvider();
+
+  // TODO: Avoid exposing CompositionDynamicAutomationProvider in RootComponentView
+  auto dynamicProvider =
+      uiaProvider.try_as<winrt::Microsoft::ReactNative::implementation::CompositionDynamicAutomationProvider>();
+  if (dynamicProvider) {
+    if (auto childProvider = dynamicProvider->TryGetChildSiteLinkAutomationProvider()) {
+      // ChildProvider is the the automation provider from the ChildSiteLink.  In the case of WinUI, this
+      // is a pointer to WinUI's internal CUIAHostWindow object.
+      // It seems odd, but even though this node doesn't behave as a fragment root in our case (the real fragment root
+      // is the RootComponentView's UIA provider), we still use its IRawElementProviderFragmentRoot -- just so
+      // we can do the ElementProviderFromPoint call.  (this was recommended by the team who did the initial
+      // architecture work).
+      if (auto fragmentRoot = childProvider.try_as<IRawElementProviderFragmentRoot>()) {
+        com_ptr<IRawElementProviderFragment> frag;
+        // WinUI then does its own hitTest inside the XAML tree.
+        fragmentRoot->ElementProviderFromPoint(
+            ptScreen
+                .x, // Note since we're going through IRawElementProviderFragment the coordinates are in screen space.
+            ptScreen.y,
+            frag.put());
+        // We return the specific child provider(frag) when hosted XAML has an element
+        // under the cursor. This satisfies the UIA "element at point" contract and exposes
+        // the control’s patterns/properties. If the hosted tree finds nothing, we fall back
+        // to the RNW container’s provider (uiaProvider) to keep the island accessible.
+        // (A Microsoft_UI_Xaml!CUIAWrapper object)
+        if (frag) {
+          return frag.as<winrt::IUnknown>();
+        }
+      }
+    }
+  }
+
+  return uiaProvider;
 }
 
 float RootComponentView::FontSizeMultiplier() const noexcept {

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

@@ -64,7 +64,7 @@ struct RootComponentView : RootComponentViewT<RootComponentView, ViewComponentVi
       facebook::react::LayoutMetrics const &layoutMetrics,
       facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
 
-  winrt::Windows::Foundation::IInspectable UiaProviderFromPoint(const POINT &ptPixels) noexcept;
+  winrt::Windows::Foundation::IUnknown UiaProviderFromPoint(const POINT &ptPixels, const POINT &ptScreen) noexcept;
 
   RootComponentView(
       const winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext &compContext,

vnext/Microsoft.ReactNative/IReactPackageProvider.idl

@@ -16,5 +16,4 @@ namespace Microsoft.ReactNative
       "Use the @IReactPackageBuilder to register custom native modules and view managers.")
     void CreatePackage(IReactPackageBuilder packageBuilder);
   };
-
 } // namespace Microsoft.ReactNative

vnext/Microsoft.ReactNative/IXamlProvider.idl

@@ -0,0 +1,11 @@
+
+#include "DocString.h"
+
+namespace Microsoft.ReactNative.Xaml {
+[webhosthidden]
+interface IXamlControl {
+  DOC_STRING(
+      "Native components that want to be Xaml-based can implement IXamlControl to allow their object to be parented to a XamlHost.")
+  Microsoft.UI.Xaml.UIElement GetXamlElement();
+};
+} // namespace Microsoft.ReactNative.Xaml

vnext/Microsoft.ReactNative/Microsoft.ReactNative.vcxproj

@@ -18,6 +18,7 @@
     </CppWinRTNamespaceMergeDepth>
     <CppWinRTLibs>true</CppWinRTLibs>
     <BuildMSRNCxxReactCommon>false</BuildMSRNCxxReactCommon>
+    <SupportWinUI3Islands>true</SupportWinUI3Islands>
   </PropertyGroup>
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.Default.props" />
   <Import Project="$(ReactNativeWindowsDir)PropertySheets\React.Cpp.props" />

vnext/Microsoft.ReactNative/XamlApplication.cpp

@@ -0,0 +1,71 @@
+#include "pch.h"
+#include "XamlApplication.h"
+#include "Xaml.XamlApplication.g.cpp"
+
+#include "winrt/Microsoft.UI.Xaml.XamlTypeInfo.h"
+
+namespace winrt::Microsoft::ReactNative::Xaml::implementation {
+using namespace ::winrt::Microsoft::UI::Xaml;
+using namespace ::winrt::Microsoft::UI::Xaml::Markup;
+using namespace ::winrt::Windows::UI::Xaml::Interop;
+XamlApplication::XamlApplication() {
+  s_current = *this;
+
+  // TODO: It's probably not a good idea to only load the controls pri file, there are other ones too.
+  auto resourceManager =
+      winrt::Microsoft::Windows::ApplicationModel::Resources::ResourceManager(L"Microsoft.UI.Xaml.Controls.pri");
+
+  this->ResourceManagerRequested([resourceManager](auto &&, ResourceManagerRequestedEventArgs args) {
+    args.CustomResourceManager(resourceManager);
+  });
+  winrt::Microsoft::UI::Xaml::Hosting::WindowsXamlManager::InitializeForCurrentThread();
+
+  m_providers.push_back(
+      winrt::make_self<winrt::Microsoft::ReactNative::implementation::XamlMetaDataProvider>()
+          .as<winrt::Microsoft::UI::Xaml::Markup::IXamlMetadataProvider>()); // Default generated provider
+  m_providers.push_back(winrt::Microsoft::UI::Xaml::XamlTypeInfo::XamlControlsXamlMetaDataProvider());
+
+  auto winUIResources = winrt::Microsoft::UI::Xaml::Controls::XamlControlsResources();
+  Resources().MergedDictionaries().Append(winUIResources);
+}
+
+XamlApplication::~XamlApplication() {
+  s_current = nullptr;
+}
+
+void XamlApplication::AddMetadataProvider(
+    winrt::Microsoft::UI::Xaml::Markup::IXamlMetadataProvider const &otherProvider) {
+  m_providers.push_back(otherProvider);
+}
+
+winrt::Microsoft::UI::Xaml::Markup::IXamlType XamlApplication::GetXamlType(
+    winrt::Windows::UI::Xaml::Interop::TypeName const &type) {
+  for (const auto &provider : m_providers) {
+    if (auto result = provider.GetXamlType(type)) {
+      return result;
+    }
+  }
+  return nullptr;
+}
+
+winrt::Microsoft::UI::Xaml::Markup::IXamlType XamlApplication::GetXamlType(hstring const &fullName) {
+  for (const auto &provider : m_providers) {
+    if (auto result = provider.GetXamlType(fullName)) {
+      return result;
+    }
+  }
+
+  return nullptr;
+}
+com_array<winrt::Microsoft::UI::Xaml::Markup::XmlnsDefinition> XamlApplication::GetXmlnsDefinitions() {
+  std::vector<::winrt::Microsoft::UI::Xaml::Markup::XmlnsDefinition> allDefinitions;
+  for (const auto &provider : m_providers) {
+    const auto &definitions = provider.GetXmlnsDefinitions();
+    allDefinitions.insert(allDefinitions.cend(), definitions.cbegin(), definitions.cend());
+  }
+  return winrt::com_array<::winrt::Microsoft::UI::Xaml::Markup::XmlnsDefinition>(
+      allDefinitions.begin(), allDefinitions.end());
+}
+
+winrt::Microsoft::ReactNative::Xaml::XamlApplication XamlApplication::s_current{nullptr};
+} // namespace winrt::Microsoft::ReactNative::Xaml::implementation

vnext/Microsoft.ReactNative/XamlApplication.h

@@ -0,0 +1,47 @@
+#pragma once
+#include "Xaml.XamlApplication.g.h"
+
+#include <winrt/Microsoft.UI.Composition.h>
+#include <winrt/Microsoft.UI.Dispatching.h>
+#include <winrt/Microsoft.UI.Xaml.Controls.Primitives.h>
+#include <winrt/Microsoft.UI.Xaml.Controls.h>
+#include <winrt/Microsoft.Windows.ApplicationModel.Resources.h>
+#include <winrt/Windows.Foundation.h>
+
+#include "winrt/Microsoft.UI.Xaml.Hosting.h"
+#include "winrt/Microsoft.UI.Xaml.Interop.h"
+#include "winrt/Microsoft.UI.Xaml.Markup.h"
+#include "winrt/Microsoft.UI.Xaml.h"
+
+#include "winrt/Windows.UI.Xaml.Interop.h"
+
+#include "XamlMetaDataProvider.h"
+
+namespace winrt::Microsoft::ReactNative::Xaml::implementation {
+struct XamlApplication : XamlApplicationT<XamlApplication> {
+  XamlApplication();
+  ~XamlApplication();
+
+  static void EnsureCreated() {
+    if (Current() == nullptr) {
+      s_current = winrt::make<winrt::Microsoft::ReactNative::Xaml::implementation::XamlApplication>();
+    }
+  }
+
+  static winrt::Microsoft::ReactNative::Xaml::XamlApplication Current() {
+    return s_current;
+  }
+
+  void AddMetadataProvider(winrt::Microsoft::UI::Xaml::Markup::IXamlMetadataProvider const &otherProvider);
+  winrt::Microsoft::UI::Xaml::Markup::IXamlType GetXamlType(winrt::Windows::UI::Xaml::Interop::TypeName const &type);
+  winrt::Microsoft::UI::Xaml::Markup::IXamlType GetXamlType(hstring const &fullName);
+  com_array<winrt::Microsoft::UI::Xaml::Markup::XmlnsDefinition> GetXmlnsDefinitions();
+
+ private:
+  static winrt::Microsoft::ReactNative::Xaml::XamlApplication s_current;
+  std::vector<winrt::Microsoft::UI::Xaml::Markup::IXamlMetadataProvider> m_providers;
+};
+} // namespace winrt::Microsoft::ReactNative::Xaml::implementation
+namespace winrt::Microsoft::ReactNative::Xaml::factory_implementation {
+struct XamlApplication : XamlApplicationT<XamlApplication, implementation::XamlApplication> {};
+} // namespace winrt::Microsoft::ReactNative::Xaml::factory_implementation

vnext/Microsoft.ReactNative/XamlApplication.idl

@@ -0,0 +1,22 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+#include "DocString.h"
+
+namespace Microsoft.ReactNative.Xaml {
+[webhosthidden][default_interface] runtimeclass XamlApplication : Microsoft.UI.Xaml.Application,
+    Microsoft.UI.Xaml.Markup.IXamlMetadataProvider {
+  DOC_STRING("Initializes a new XamlApplication instance for RNW-hosted WinUI/XAML.")
+  XamlApplication();
+
+  DOC_STRING("Ensures the XamlApplication singleton exists.")
+  static void EnsureCreated();
+
+  DOC_STRING("Gets the process-wide XamlApplication singleton.")
+  static XamlApplication Current {
+    get;
+  };
+
+  DOC_STRING("Adds an additional XAML metadata provider to the application.")
+  void AddMetadataProvider(Microsoft.UI.Xaml.Markup.IXamlMetadataProvider otherProvider);
+}
+} // namespace Microsoft.ReactNative.Xaml

vnext/Microsoft.ReactNative/XamlHost.cpp

@@ -0,0 +1,61 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+#include "pch.h"
+
+#include "XamlApplication.h"
+#include "XamlHost.h"
+
+#if defined(RNW_NEW_ARCH)
+
+#include "..\codegen\react\components\rnwcore\XamlHost.g.h"
+
+namespace winrt::Microsoft::ReactNative {
+
+struct XamlHostComponentView : public winrt::implements<XamlHostComponentView, winrt::IInspectable>,
+                               ::Microsoft::ReactNativeSpecs::BaseXamlHost<XamlHostComponentView> {
+  void InitializeContentIsland(
+      const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) noexcept {
+    winrt::Microsoft::ReactNative::Xaml::implementation::XamlApplication::EnsureCreated();
+
+    m_xamlIsland = winrt::Microsoft::UI::Xaml::XamlIsland{};
+
+    islandView.Connect(m_xamlIsland.ContentIsland());
+  }
+
+  void MountChildComponentView(
+      const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+      const winrt::Microsoft::ReactNative::MountChildComponentViewArgs &args) noexcept override {
+    // Add the xaml child to the m_xamlIsland here.
+    auto childXamlControl = args.Child().UserData().as<winrt::Microsoft::ReactNative::Xaml::IXamlControl>();
+    if (childXamlControl) {
+      auto xamlElement = childXamlControl.GetXamlElement();
+      m_xamlIsland.Content(xamlElement);
+    }
+  }
+
+  void UnmountChildComponentView(
+      const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+      const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs &) noexcept override {
+    m_xamlIsland.Content(nullptr);
+  }
+
+ private:
+  winrt::Microsoft::UI::Xaml::XamlIsland m_xamlIsland{nullptr};
+};
+
+} // namespace winrt::Microsoft::ReactNative
+
+void RegisterXamlHostComponentView(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) {
+  ::Microsoft::ReactNativeSpecs::RegisterXamlHostNativeComponent<winrt::Microsoft::ReactNative::XamlHostComponentView>(
+      packageBuilder,
+      [](const winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder &builder) {
+        builder.SetContentIslandComponentViewInitializer(
+            [](const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) noexcept {
+              auto userData = winrt::make_self<winrt::Microsoft::ReactNative::XamlHostComponentView>();
+              userData->InitializeContentIsland(islandView);
+              islandView.UserData(*userData);
+            });
+      });
+}
+
+#endif // defined(RNW_NEW_ARCH) && defined(USE_EXPERIMENTAL_WINUI3)

vnext/Microsoft.ReactNative/XamlHost.h

@@ -0,0 +1,7 @@
+#pragma once
+
+#if defined(RNW_NEW_ARCH)
+
+void RegisterXamlHostComponentView(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder);
+
+#endif // defined(RNW_NEW_ARCH) && defined(USE_EXPERIMENTAL_WINUI3)