diff --git a/packages/sample-app-fabric/App.tsx b/packages/sample-app-fabric/App.tsx
index 125fe1b98eb..dbcffad61d3 100644
--- a/packages/sample-app-fabric/App.tsx
+++ b/packages/sample-app-fabric/App.tsx
@@ -25,6 +25,14 @@ import {
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
+import {XamlHost} from 'react-native-windows';
+
+import {
+ StackPanel,
+ Button,
+ CalendarView,
+} from 'react-native-windows/Libraries/Components/Xaml/FabricXamlControl';
+
type SectionProps = PropsWithChildren<{
title: string;
}>;
@@ -77,9 +85,17 @@ function App(): React.JSX.Element {
backgroundColor: isDarkMode ? Colors.black : Colors.white,
}}>
- Edit App.tsx to change this
- screen and then come back to see your edits.
+ Edit App.tsx to change this.
+ I'll try showing some Xaml here:
+
+
+
+ {/* width and height are for the Xaml layout here, not RN. Confusing, right? */}
+
+
+
+
diff --git a/packages/sample-app-fabric/windows/SampleAppFabric.Package/packages.lock.json b/packages/sample-app-fabric/windows/SampleAppFabric.Package/packages.lock.json
index 7d84a365b4f..0c166aed5fa 100644
--- a/packages/sample-app-fabric/windows/SampleAppFabric.Package/packages.lock.json
+++ b/packages/sample-app-fabric/windows/SampleAppFabric.Package/packages.lock.json
@@ -83,6 +83,17 @@
"boost": "[1.83.0, )"
}
},
+ "microsoft.reactnative.xaml": {
+ "type": "Project",
+ "dependencies": {
+ "Common": "[1.0.0, )",
+ "Folly": "[1.0.0, )",
+ "Microsoft.ReactNative": "[1.0.0, )",
+ "Microsoft.WindowsAppSDK": "[1.7.250401001, )",
+ "ReactCommon": "[1.0.0, )",
+ "boost": "[1.83.0, )"
+ }
+ },
"reactcommon": {
"type": "Project",
"dependencies": {
@@ -95,6 +106,7 @@
"dependencies": {
"Microsoft.JavaScript.Hermes": "[0.0.0-2505.2001-0e4bc3b9, )",
"Microsoft.ReactNative": "[1.0.0, )",
+ "Microsoft.ReactNative.Xaml": "[1.0.0, )",
"Microsoft.VCRTForwarders.140": "[1.0.2-rc, )",
"Microsoft.WindowsAppSDK": "[1.7.250401001, )",
"boost": "[1.83.0, )"
diff --git a/packages/sample-app-fabric/windows/SampleAppFabric.sln b/packages/sample-app-fabric/windows/SampleAppFabric.sln
index 1eabd0cabef..75e0f0b858c 100644
--- a/packages/sample-app-fabric/windows/SampleAppFabric.sln
+++ b/packages/sample-app-fabric/windows/SampleAppFabric.sln
@@ -35,6 +35,8 @@ Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "Mso", "..\..\..\vnext\Mso\M
EndProject
Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "Include", "..\..\..\vnext\include\Include.vcxitems", "{EF074BA1-2D54-4D49-A28E-5E040B47CD2E}"
EndProject
+Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "Microsoft.ReactNative.Xaml", "..\..\..\vnext\Microsoft.ReactNative.Xaml\Microsoft.ReactNative.Xaml.vcxproj", "{E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}"
+EndProject
Global
GlobalSection(SharedMSBuildProjectFiles) = preSolution
..\..\..\vnext\Shared\Shared.vcxitems*{2049dbe9-8d13-42c9-ae4b-413ae38fffd0}*SharedItemsImports = 9
@@ -154,6 +156,19 @@ Global
{14B93DC8-FD93-4A6D-81CB-8BC96644501C}.Release|x86.ActiveCfg = Release|Win32
{14B93DC8-FD93-4A6D-81CB-8BC96644501C}.Release|x86.Build.0 = Release|Win32
{14B93DC8-FD93-4A6D-81CB-8BC96644501C}.Release|x86.Deploy.0 = Release|Win32
+
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Debug|x64.ActiveCfg = Debug|x64
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Debug|x64.Build.0 = Debug|x64
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Debug|x86.ActiveCfg = Debug|Win32
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Debug|x86.Build.0 = Debug|Win32
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Debug|ARM64.ActiveCfg = Debug|ARM64
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Debug|ARM64.Build.0 = Debug|ARM64
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Release|x64.ActiveCfg = Release|x64
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Release|x64.Build.0 = Release|x64
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Release|x86.ActiveCfg = Release|Win32
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Release|x86.Build.0 = Release|Win32
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Release|ARM64.ActiveCfg = Release|ARM64
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Release|ARM64.Build.0 = Release|ARM64
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
diff --git a/packages/sample-app-fabric/windows/SampleAppFabric/SampleAppFabric.cpp b/packages/sample-app-fabric/windows/SampleAppFabric/SampleAppFabric.cpp
index 2aeaae1397e..7affd0feffa 100644
--- a/packages/sample-app-fabric/windows/SampleAppFabric/SampleAppFabric.cpp
+++ b/packages/sample-app-fabric/windows/SampleAppFabric/SampleAppFabric.cpp
@@ -8,6 +8,8 @@
#include "NativeModules.h"
+#include
+
// A PackageProvider containing any turbo modules you define within this app project
struct CompReactPackageProvider
: winrt::implements {
@@ -39,6 +41,10 @@ _Use_decl_annotations_ int CALLBACK WinMain(HINSTANCE instance, HINSTANCE, PSTR
RegisterAutolinkedNativeModulePackages(settings.PackageProviders());
// Register any native modules defined within this app project
settings.PackageProviders().Append(winrt::make());
+ // TODO: Can we make apps register this automatically? (e.g. with autolinking)
+ // TODO: But ideally we don't load the M.RN.Xaml.dll at all if we're not using Xaml.
+ settings.PackageProviders().Append(winrt::Microsoft::ReactNative::Xaml::ReactPackageProvider());
+
#if BUNDLE
// Load the JS bundle from a file (not Metro):
diff --git a/packages/sample-app-fabric/windows/SampleAppFabric/SampleAppFabric.vcxproj b/packages/sample-app-fabric/windows/SampleAppFabric/SampleAppFabric.vcxproj
index 415ba11b336..5769c51da30 100644
--- a/packages/sample-app-fabric/windows/SampleAppFabric/SampleAppFabric.vcxproj
+++ b/packages/sample-app-fabric/windows/SampleAppFabric/SampleAppFabric.vcxproj
@@ -124,6 +124,12 @@
+
+
+ {e5d1b5d2-0e6a-4011-8bcd-08968256dcbd}
+ Microsoft.ReactNative.Xaml
+ false
+
diff --git a/packages/sample-app-fabric/windows/SampleAppFabric/packages.lock.json b/packages/sample-app-fabric/windows/SampleAppFabric/packages.lock.json
index 48426cb9ce0..08b85b9b401 100644
--- a/packages/sample-app-fabric/windows/SampleAppFabric/packages.lock.json
+++ b/packages/sample-app-fabric/windows/SampleAppFabric/packages.lock.json
@@ -93,6 +93,17 @@
"boost": "[1.83.0, )"
}
},
+ "microsoft.reactnative.xaml": {
+ "type": "Project",
+ "dependencies": {
+ "Common": "[1.0.0, )",
+ "Folly": "[1.0.0, )",
+ "Microsoft.ReactNative": "[1.0.0, )",
+ "Microsoft.WindowsAppSDK": "[1.7.250401001, )",
+ "ReactCommon": "[1.0.0, )",
+ "boost": "[1.83.0, )"
+ }
+ },
"reactcommon": {
"type": "Project",
"dependencies": {
diff --git a/packages/sample-app-fabric/windows/SampleAppFabric/pch.h b/packages/sample-app-fabric/windows/SampleAppFabric/pch.h
index 364879013f3..741503c3010 100644
--- a/packages/sample-app-fabric/windows/SampleAppFabric/pch.h
+++ b/packages/sample-app-fabric/windows/SampleAppFabric/pch.h
@@ -23,6 +23,7 @@
#include
#include
#include
+#include
#include
#include
#include
diff --git a/vnext/Microsoft.ReactNative.Xaml.sln b/vnext/Microsoft.ReactNative.Xaml.sln
new file mode 100644
index 00000000000..9e584fbf49c
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml.sln
@@ -0,0 +1,37 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.13.35913.81 d17.13
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "Microsoft.ReactNative.Xaml", "Microsoft.ReactNative.Xaml\Microsoft.ReactNative.Xaml.vcxproj", "{E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}"
+EndProject
+Global
+ GlobalSection(SolutionConfigurationPlatforms) = preSolution
+ Debug|ARM64 = Debug|ARM64
+ Debug|x64 = Debug|x64
+ Debug|x86 = Debug|x86
+ Release|ARM64 = Release|ARM64
+ Release|x64 = Release|x64
+ Release|x86 = Release|x86
+ EndGlobalSection
+ GlobalSection(ProjectConfigurationPlatforms) = postSolution
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Debug|ARM64.ActiveCfg = Debug|ARM64
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Debug|ARM64.Build.0 = Debug|ARM64
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Debug|x64.ActiveCfg = Debug|x64
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Debug|x64.Build.0 = Debug|x64
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Debug|x86.ActiveCfg = Debug|Win32
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Debug|x86.Build.0 = Debug|Win32
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Release|ARM64.ActiveCfg = Release|ARM64
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Release|ARM64.Build.0 = Release|ARM64
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Release|x64.ActiveCfg = Release|x64
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Release|x64.Build.0 = Release|x64
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Release|x86.ActiveCfg = Release|Win32
+ {E5D1B5D2-0E6A-4011-8BCD-08968256DCBD}.Release|x86.Build.0 = Release|Win32
+ EndGlobalSection
+ GlobalSection(SolutionProperties) = preSolution
+ HideSolutionNode = FALSE
+ EndGlobalSection
+ GlobalSection(ExtensibilityGlobals) = postSolution
+ SolutionGuid = {3B36CAF0-BCD9-42C7-B311-05FDDCCEC9D4}
+ EndGlobalSection
+EndGlobal
diff --git a/vnext/Microsoft.ReactNative.Xaml/App.idl b/vnext/Microsoft.ReactNative.Xaml/App.idl
new file mode 100644
index 00000000000..1e889e85a2b
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/App.idl
@@ -0,0 +1,19 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+namespace Microsoft.ReactNative.Xaml
+{
+ [webhosthidden][default_interface] runtimeclass XamlApplication : Microsoft.UI.Xaml.Application,
+ Microsoft.UI.Xaml.Markup.IXamlMetadataProvider
+ {
+ XamlApplication();
+
+ static void EnsureCreated();
+
+ static XamlApplication Current {
+ get;
+ };
+
+ void AddMetadataProvider(Microsoft.UI.Xaml.Markup.IXamlMetadataProvider otherProvider);
+ }
+}
diff --git a/vnext/Microsoft.ReactNative.Xaml/FabricXamlControl.cpp b/vnext/Microsoft.ReactNative.Xaml/FabricXamlControl.cpp
new file mode 100644
index 00000000000..e5c40a9d171
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/FabricXamlControl.cpp
@@ -0,0 +1,164 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+#include "pch.h"
+
+#if !defined(RNW_NEW_ARCH)
+static_assert(false, "This module requires RNW_NEW_ARCH to be defined.");
+#endif
+
+#include "FabricXamlControl.h"
+
+#include
+
+#include
+
+#include
+#include
+
+#include
+
+namespace winrt::Microsoft::ReactNative::Xaml {
+
+template
+void CustomRegisterXamlControlNativeComponent(
+ winrt::hstring name,
+ winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder,
+ std::function
+ builderCallback) noexcept {
+ packageBuilder.as().AddViewComponent(
+ name, [name, builderCallback](winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) noexcept {
+ auto compBuilder =
+ builder.as();
+
+ builder.SetCreateProps([name](
+ winrt::Microsoft::ReactNative::ViewProps props,
+ const winrt::Microsoft::ReactNative::IComponentProps &cloneFrom) noexcept {
+ return winrt::make(name, props, cloneFrom);
+ });
+
+ builder.SetUpdatePropsHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+ const winrt::Microsoft::ReactNative::IComponentProps &newProps,
+ const winrt::Microsoft::ReactNative::IComponentProps &oldProps) noexcept {
+ auto userData = view.UserData().as();
+ userData->UpdateProps(
+ view,
+ newProps ? newProps.as() : nullptr,
+ oldProps ? oldProps.as() : nullptr);
+ });
+
+ compBuilder.SetUpdateLayoutMetricsHandler(
+ [](const winrt::Microsoft::ReactNative::ComponentView &view,
+ const winrt::Microsoft::ReactNative::LayoutMetrics &newLayoutMetrics,
+ const winrt::Microsoft::ReactNative::LayoutMetrics &oldLayoutMetrics) noexcept {
+ auto userData = view.UserData().as();
+ userData->UpdateLayoutMetrics(view, newLayoutMetrics, oldLayoutMetrics);
+ });
+
+ builder.SetUpdateEventEmitterHandler(
+ [](const winrt::Microsoft::ReactNative::ComponentView &view,
+ const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter) noexcept {
+ auto userData = view.UserData().as();
+ userData->UpdateEventEmitter(std::make_shared(eventEmitter));
+ });
+
+ if constexpr (
+ &TUserData::FinalizeUpdate !=
+ &winrt::Microsoft::ReactNative::Xaml::BaseFabricXamlControl::FinalizeUpdate) {
+ builder.SetFinalizeUpdateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+ winrt::Microsoft::ReactNative::ComponentViewUpdateMask mask) noexcept {
+ auto userData = view.UserData().as();
+ userData->FinalizeUpdate(view, mask);
+ });
+ }
+
+ if constexpr (
+ &TUserData::UpdateState != &winrt::Microsoft::ReactNative::Xaml::BaseFabricXamlControl::UpdateState) {
+ builder.SetUpdateStateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+ const winrt::Microsoft::ReactNative::IComponentState &newState) noexcept {
+ auto userData = view.UserData().as();
+ userData->UpdateState(view, newState);
+ });
+ }
+
+ if constexpr (
+ &TUserData::MountChildComponentView !=
+ &winrt::Microsoft::ReactNative::Xaml::BaseFabricXamlControl::MountChildComponentView) {
+ builder.SetMountChildComponentViewHandler(
+ [](const winrt::Microsoft::ReactNative::ComponentView &view,
+ const winrt::Microsoft::ReactNative::MountChildComponentViewArgs &args) noexcept {
+ auto userData = view.UserData().as();
+ return userData->MountChildComponentView(view, args);
+ });
+ }
+
+ if constexpr (
+ &TUserData::UnmountChildComponentView !=
+ &winrt::Microsoft::ReactNative::Xaml::BaseFabricXamlControl::UnmountChildComponentView) {
+ builder.SetUnmountChildComponentViewHandler(
+ [](const winrt::Microsoft::ReactNative::ComponentView &view,
+ const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs &args) noexcept {
+ auto userData = view.UserData().as();
+ return userData->UnmountChildComponentView(view, args);
+ });
+ }
+
+ compBuilder.SetViewComponentViewInitializer(
+ [name](const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+ auto userData = winrt::make_self(name);
+ if constexpr (
+ &TUserData::Initialize !=
+ &winrt::Microsoft::ReactNative::Xaml::BaseFabricXamlControl::Initialize) {
+ userData->Initialize(view);
+ }
+ view.UserData(*userData);
+ });
+
+ if constexpr (
+ &TUserData::CreateVisual != &winrt::Microsoft::ReactNative::Xaml::BaseFabricXamlControl::CreateVisual) {
+ compBuilder.SetCreateVisualHandler([](const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+ // I suppose we should return null here since we're not backed by a visual?
+ // No, it looks like in CompositionViewComponentView.cpp ViewComponentView::ensureVisual that this will
+ // fail.
+ // TODO: Don't create a dummy visual here.
+ auto userData = view.UserData().as();
+ return userData->CreateVisual(view);
+ });
+ }
+
+ // Allow app to further customize the builder
+ if (builderCallback) {
+ builderCallback(compBuilder);
+ }
+ });
+}
+
+} // namespace winrt::Microsoft::ReactNative::Xaml
+
+void RegisterXamlControl(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) {
+ winrt::Microsoft::ReactNative::Xaml::CustomRegisterXamlControlNativeComponent<
+ winrt::Microsoft::ReactNative::Xaml::XamlControlComponentView>(
+ winrt::hstring{L"FX_StackPanel"},
+ packageBuilder,
+ [](const winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder &builder) {
+ UNREFERENCED_PARAMETER(builder);
+ // TODO: Do we need to do anything here?
+ });
+
+ winrt::Microsoft::ReactNative::Xaml::CustomRegisterXamlControlNativeComponent<
+ winrt::Microsoft::ReactNative::Xaml::XamlControlComponentView>(
+ winrt::hstring{L"FX_Button"},
+ packageBuilder,
+ [](const winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder &builder) {
+ UNREFERENCED_PARAMETER(builder);
+ // TODO: Do we need to do anything here?
+ });
+
+ winrt::Microsoft::ReactNative::Xaml::CustomRegisterXamlControlNativeComponent<
+ winrt::Microsoft::ReactNative::Xaml::XamlControlComponentView>(
+ winrt::hstring{L"FX_CalendarView"},
+ packageBuilder,
+ [](const winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder &builder) {
+ UNREFERENCED_PARAMETER(builder);
+ // TODO: Do we need to do anything here?
+ });
+}
diff --git a/vnext/Microsoft.ReactNative.Xaml/FabricXamlControl.h b/vnext/Microsoft.ReactNative.Xaml/FabricXamlControl.h
new file mode 100644
index 00000000000..e70a12eb183
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/FabricXamlControl.h
@@ -0,0 +1,259 @@
+#pragma once
+
+#if !defined(RNW_NEW_ARCH)
+static_assert(false, "This module requires RNW_NEW_ARCH to be defined.");
+#endif
+
+#include
+
+#include
+
+#include
+#include
+
+#include
+
+inline std::wstring ToWideString(const char *str) {
+ int len = MultiByteToWideChar(CP_UTF8, 0, str, -1, nullptr, 0);
+ if (len == 0) {
+ return nullptr; // Conversion error
+ }
+
+ // Allocate a wstring with buffer size of len
+ std::wstring result(len, L'\0');
+
+ // Convert the std::string to BSTR
+ MultiByteToWideChar(CP_UTF8, 0, str, -1, &result[0], len);
+
+ return result;
+}
+
+namespace winrt::Microsoft::ReactNative::Xaml {
+
+
+// A FabricXamlControl is a control that represents a generic Xaml element.
+// The m_xamlTypeName field tells us what kind of Xaml element.
+// A tree of FabricXamlControls must have a XamlHost as a root.
+REACT_STRUCT(FabricXamlControlProps)
+struct FabricXamlControlProps
+ : winrt::implements {
+ FabricXamlControlProps(
+ winrt::hstring name,
+ winrt::Microsoft::ReactNative::ViewProps props,
+ const winrt::Microsoft::ReactNative::IComponentProps &cloneFrom)
+ : ViewProps(props), xamlTypeName(name) {
+ if (cloneFrom) {
+ auto cloneFromProps = cloneFrom.as();
+ label = cloneFromProps->label;
+ xamlTypeName = cloneFromProps->xamlTypeName;
+ }
+ }
+
+ void SetProp(uint32_t hash, winrt::hstring propName, winrt::Microsoft::ReactNative::IJSValueReader value) noexcept {
+ winrt::Microsoft::ReactNative::ReadProp(hash, propName, value, *this);
+ }
+
+ REACT_FIELD(label)
+ std::string label;
+
+ REACT_FIELD(text)
+ std::string text;
+
+ REACT_FIELD(content)
+ // winrt::IInspectable content;
+ winrt::Microsoft::ReactNative::JSValue content;
+
+ REACT_FIELD(width)
+ std::optional width;
+
+ REACT_FIELD(height)
+ std::optional height;
+
+ const winrt::Microsoft::ReactNative::ViewProps ViewProps;
+
+ winrt::hstring xamlTypeName;
+};
+
+struct FabricXamlControlEventEmitter {
+ FabricXamlControlEventEmitter(const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter)
+ : m_eventEmitter(eventEmitter) {}
+
+ private:
+ winrt::Microsoft::ReactNative::EventEmitter m_eventEmitter{nullptr};
+};
+
+template
+struct BaseFabricXamlControl {
+ virtual void UpdateProps(
+ const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+ const winrt::com_ptr &newProps,
+ const winrt::com_ptr & /*oldProps*/) noexcept {
+ m_props = newProps;
+ }
+
+ // UpdateLayoutMetrics will only be called if this method is overridden
+ virtual void UpdateLayoutMetrics(
+ const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+ const winrt::Microsoft::ReactNative::LayoutMetrics & /*newLayoutMetrics*/,
+ const winrt::Microsoft::ReactNative::LayoutMetrics & /*oldLayoutMetrics*/) noexcept {}
+
+ // UpdateState will only be called if this method is overridden
+ virtual void UpdateState(
+ const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+ const winrt::Microsoft::ReactNative::IComponentState & /*newState*/) noexcept {}
+
+ virtual void UpdateEventEmitter(const std::shared_ptr &eventEmitter) noexcept {
+ m_eventEmitter = eventEmitter;
+ }
+
+ // MountChildComponentView will only be called if this method is overridden
+ virtual void MountChildComponentView(
+ const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+ const winrt::Microsoft::ReactNative::MountChildComponentViewArgs & /*args*/) noexcept {}
+
+ // UnmountChildComponentView will only be called if this method is overridden
+ virtual void UnmountChildComponentView(
+ const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+ const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs & /*args*/) noexcept {}
+
+ // Initialize will only be called if this method is overridden
+ virtual void Initialize(const winrt::Microsoft::ReactNative::ComponentView & /*view*/) noexcept {}
+
+ // CreateVisual will only be called if this method is overridden
+ virtual winrt::Microsoft::UI::Composition::Visual CreateVisual(
+ const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+ return view.as().Compositor().CreateSpriteVisual();
+ }
+
+ // FinalizeUpdate will only be called if this method is overridden
+ virtual void FinalizeUpdate(
+ const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+ winrt::Microsoft::ReactNative::ComponentViewUpdateMask /*mask*/) noexcept {}
+
+ const std::shared_ptr &EventEmitter() const {
+ return m_eventEmitter;
+ }
+ const winrt::com_ptr &Props() const {
+ return m_props;
+ }
+
+ private:
+ winrt::com_ptr m_props;
+ std::shared_ptr m_eventEmitter;
+};
+
+struct XamlControlComponentView: public winrt::implements,
+ BaseFabricXamlControl {
+ XamlControlComponentView(winrt::hstring name) : m_xamlTypeName(name) {
+ ::OutputDebugString(L"Microsoft::ReactNative::Xaml constructor\n");
+ ::OutputDebugString(m_xamlTypeName.c_str());
+ ::OutputDebugString(L"\n");
+ }
+
+ // MountChildComponentView will only be called if this method is overridden
+ void MountChildComponentView(
+ const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+ const winrt::Microsoft::ReactNative::MountChildComponentViewArgs &args) noexcept override {
+ // We're adding a child Xaml element to this Xaml element.
+ auto child = args.Child();
+ auto userData = child.UserData();
+ auto childXamlControl = userData.as();
+ if (childXamlControl) {
+ auto childXamlElement = childXamlControl->GetXamlElement();
+ auto thisElement = GetXamlElement();
+ AddXamlChild(thisElement, childXamlElement, args.Index());
+ }
+ }
+
+ void UnmountChildComponentView(
+ const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+ const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs &args) noexcept override {
+ // We're adding a child Xaml element to this Xaml element.
+ auto child = args.Child();
+ auto userData = child.UserData();
+ auto childXamlControl = userData.as();
+ if (childXamlControl) {
+ auto thisElement = GetXamlElement();
+ RemoveXamlChild(thisElement, args.Index());
+ }
+}
+
+ void UpdateProps(
+ const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+ const winrt::com_ptr &newProps,
+ const winrt::com_ptr & /*oldProps*/) noexcept override {
+ auto xamlControl = GetXamlElement();
+
+ if (newProps != nullptr) {
+ if (newProps->content.Type() == winrt::Microsoft::ReactNative::JSValueType::String) {
+ auto content = newProps->content.AsString();
+ // const std::wstring url16 = Microsoft::Common::Unicode::Utf8ToUtf16(content);
+ auto string16 = ToWideString(content.c_str());
+ winrt::hstring contentHString(string16.c_str());
+ xamlControl.SetValue(
+ winrt::Microsoft::UI::Xaml::Controls::ContentControl::ContentProperty(), winrt::box_value(contentHString));
+ } else if (newProps->content.Type() == winrt::Microsoft::ReactNative::JSValueType::Null) {
+ // xamlControl.SetValue(winrt::Microsoft::UI::Xaml::Controls::ContentControl::ContentProperty,
+ // winrt::hstring{L""});
+ } else {
+ // TODO: Better error handling here.
+ ::OutputDebugString(L"UpdateProps: I don't recognize this type.\n");
+ }
+
+ if (newProps->width) {
+ xamlControl.as().Width(newProps->width.value());
+ }
+ if (newProps->height) {
+ xamlControl.as().Height(newProps->height.value());
+ }
+ }
+
+ }
+
+ void FinalizeUpdate(
+ const winrt::Microsoft::ReactNative::ComponentView &view,
+ winrt::Microsoft::ReactNative::ComponentViewUpdateMask mask) noexcept override {
+ UNREFERENCED_PARAMETER(mask);
+ view.Mounted([](const winrt::IInspectable &, const winrt::Microsoft::ReactNative::ComponentView &view) {
+ UNREFERENCED_PARAMETER(view);
+ // Do mounted things (?)
+ });
+ ::OutputDebugString(L"FinalizeUpdate\n");
+ }
+
+ static void AddXamlChild(winrt::Microsoft::UI::Xaml::UIElement parent, winrt::Microsoft::UI::Xaml::UIElement child, uint32_t index) {
+ // TODO: Support all kinds of Xaml panels and elements that can accept children.
+ auto panel = parent.as();
+ panel.Children().InsertAt(index, child);
+ }
+
+ static void RemoveXamlChild(winrt::Microsoft::UI::Xaml::UIElement parent, uint32_t index) {
+ // TODO: Support all kinds of Xaml panels and elements that can accept children.
+ auto panel = parent.as();
+ auto children = panel.Children();
+ children.RemoveAt(index);
+ }
+
+ winrt::Microsoft::UI::Xaml::UIElement GetXamlElement() {
+ if (!m_xamlElement) {
+ if (wcscmp(m_xamlTypeName.c_str(), L"FX_StackPanel") == 0) {
+ m_xamlElement = winrt::Microsoft::UI::Xaml::Controls::StackPanel();
+ } else if (wcscmp(m_xamlTypeName.c_str(), L"FX_Button") == 0) {
+ m_xamlElement = winrt::Microsoft::UI::Xaml::Controls::Button();
+ } else if (wcscmp(m_xamlTypeName.c_str(), L"FX_CalendarView") == 0) {
+ m_xamlElement = winrt::Microsoft::UI::Xaml::Controls::CalendarView();
+ } else {
+ throw std::exception("Unknown XAML control type");
+ }
+ }
+ return m_xamlElement;
+ }
+
+ private:
+ winrt::Microsoft::UI::Xaml::UIElement m_xamlElement{nullptr};
+ winrt::hstring m_xamlTypeName;
+};
+
+} // namespace winrt::Microsoft::ReactNative::Xaml
+
+// #endif // #if defined(RNW_NEW_ARCH)
\ No newline at end of file
diff --git a/vnext/Microsoft.ReactNative.Xaml/Microsoft.ReactNative.Xaml.def b/vnext/Microsoft.ReactNative.Xaml/Microsoft.ReactNative.Xaml.def
new file mode 100644
index 00000000000..24e7c1235c3
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/Microsoft.ReactNative.Xaml.def
@@ -0,0 +1,3 @@
+EXPORTS
+DllCanUnloadNow = WINRT_CanUnloadNow PRIVATE
+DllGetActivationFactory = WINRT_GetActivationFactory PRIVATE
diff --git a/vnext/Microsoft.ReactNative.Xaml/Microsoft.ReactNative.Xaml.vcxproj b/vnext/Microsoft.ReactNative.Xaml/Microsoft.ReactNative.Xaml.vcxproj
new file mode 100644
index 00000000000..6486d2ba515
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/Microsoft.ReactNative.Xaml.vcxproj
@@ -0,0 +1,181 @@
+
+
+
+
+ true
+ true
+ true
+ {e5d1b5d2-0e6a-4011-8bcd-08968256dcbd}
+ Microsoft.ReactNative.Xaml
+ Microsoft.ReactNative.Xaml
+ en-US
+ 16.0
+ false
+ Windows Store
+ 10.0
+ 10.0.22621.0
+ 10.0.17763.0
+ true
+ true
+
+
+
+
+
+
+
+ Debug
+ Win32
+
+
+ Debug
+ x64
+
+
+ Debug
+ ARM64
+
+
+ Release
+ Win32
+
+
+ Release
+ x64
+
+
+ Release
+ ARM64
+
+
+
+ DynamicLibrary
+ v143
+ Unicode
+ false
+ true
+
+
+ true
+ true
+
+
+ false
+ true
+ false
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Use
+ pch.h
+ $(IntDir)pch.pch
+ Level4
+ %(AdditionalOptions) /bigobj
+ _WINRT_DLL;%(PreprocessorDefinitions)
+ $(WindowsSDK_WindowsMetadata);$(AdditionalUsingDirectories)
+
+
+ Console
+ true
+ Microsoft.ReactNative.Xaml.def
+
+
+
+
+ _DEBUG;%(PreprocessorDefinitions)
+
+
+
+
+ NDEBUG;%(PreprocessorDefinitions)
+
+
+ true
+ true
+
+
+
+
+
+ ReactPackageProvider.idl
+
+
+
+
+ Create
+
+
+ ReactPackageProvider.idl
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Code
+
+
+ Code
+
+
+
+
+
+
+
+
+ {fca38f3c-7c73-4c47-be4e-32f77fa8538d}
+
+
+ {a990658c-ce31-4bcc-976f-0fc6b1af693d}
+
+
+ {a9d95a91-4db7-4f72-beb6-fe8a5c89bfbd}
+
+
+ {f7d32bd0-2749-483e-9a0d-1635ef7e3136}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/vnext/Microsoft.ReactNative.Xaml/Microsoft.ReactNative.Xaml.vcxproj.filters b/vnext/Microsoft.ReactNative.Xaml/Microsoft.ReactNative.Xaml.vcxproj.filters
new file mode 100644
index 00000000000..24eec322ed6
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/Microsoft.ReactNative.Xaml.vcxproj.filters
@@ -0,0 +1,31 @@
+
+
+
+
+ accd3aa8-1ba0-4223-9bbe-0c431709210b
+ rc;ico;cur;bmp;dlg;rc2;rct;bin;rgs;gif;jpg;jpeg;jpe;resx;tga;tiff;tif;png;wav;mfcribbon-ms
+
+
+ {926ab91d-31b4-48c3-b9a4-e681349f27f0}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/vnext/Microsoft.ReactNative.Xaml/PropertySheet.props b/vnext/Microsoft.ReactNative.Xaml/PropertySheet.props
new file mode 100644
index 00000000000..5b718b12519
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/PropertySheet.props
@@ -0,0 +1,17 @@
+
+
+
+
+
+ normal
+
+
+
+
+
+ $(CppWinRTVerbosity)
+
+
+
\ No newline at end of file
diff --git a/vnext/Microsoft.ReactNative.Xaml/ReactPackageProvider.cpp b/vnext/Microsoft.ReactNative.Xaml/ReactPackageProvider.cpp
new file mode 100644
index 00000000000..8d9a44337f5
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/ReactPackageProvider.cpp
@@ -0,0 +1,17 @@
+#include "pch.h"
+#include "ReactPackageProvider.h"
+#include "ReactPackageProvider.g.cpp"
+#include "ModuleRegistration.h"
+
+#include "XamlHost.h"
+
+namespace winrt::Microsoft::ReactNative::Xaml::implementation
+{
+ void ReactPackageProvider::CreatePackage(winrt::Microsoft::ReactNative::IReactPackageBuilder const& packageBuilder)
+ {
+ AddAttributedModules(packageBuilder, true);
+
+ RegisterXamlHostComponentView(packageBuilder);
+ RegisterXamlControl(packageBuilder);
+ }
+}
diff --git a/vnext/Microsoft.ReactNative.Xaml/ReactPackageProvider.h b/vnext/Microsoft.ReactNative.Xaml/ReactPackageProvider.h
new file mode 100644
index 00000000000..f547c58a1e3
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/ReactPackageProvider.h
@@ -0,0 +1,18 @@
+#pragma once
+#include "ReactPackageProvider.g.h"
+
+namespace winrt::Microsoft::ReactNative::Xaml::implementation
+{
+ struct ReactPackageProvider : ReactPackageProviderT
+ {
+ ReactPackageProvider() = default;
+
+ void CreatePackage(winrt::Microsoft::ReactNative::IReactPackageBuilder const& packageBuilder);
+ };
+}
+namespace winrt::Microsoft::ReactNative::Xaml::factory_implementation
+{
+ struct ReactPackageProvider : ReactPackageProviderT
+ {
+ };
+}
diff --git a/vnext/Microsoft.ReactNative.Xaml/ReactPackageProvider.idl b/vnext/Microsoft.ReactNative.Xaml/ReactPackageProvider.idl
new file mode 100644
index 00000000000..f8f7acbe260
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/ReactPackageProvider.idl
@@ -0,0 +1,9 @@
+namespace Microsoft.ReactNative.Xaml
+{
+ [webhosthidden]
+ [default_interface]
+ runtimeclass ReactPackageProvider : Microsoft.ReactNative.IReactPackageProvider
+ {
+ ReactPackageProvider();
+ };
+}
diff --git a/vnext/Microsoft.ReactNative.Xaml/XamlApplication.cpp b/vnext/Microsoft.ReactNative.Xaml/XamlApplication.cpp
new file mode 100644
index 00000000000..58a36407238
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/XamlApplication.cpp
@@ -0,0 +1,56 @@
+#include "pch.h"
+
+#include "XamlApplication.h"
+
+#include "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();
+
+ auto winUIResources = winrt::Microsoft::UI::Xaml::Controls::XamlControlsResources();
+ Resources().MergedDictionaries().Append(winUIResources);
+}
+
+XamlApplication::~XamlApplication() {
+ s_current = nullptr;
+}
+
+IXamlType XamlApplication::GetXamlType(TypeName const &type) {
+ return AppProvider()->GetXamlType(type);
+}
+
+IXamlType XamlApplication::GetXamlType(::winrt::hstring const &fullName) {
+ return AppProvider()->GetXamlType(fullName);
+}
+
+::winrt::com_array<::winrt::Microsoft::UI::Xaml::Markup::XmlnsDefinition> XamlApplication::GetXmlnsDefinitions() {
+ return AppProvider()->GetXmlnsDefinitions();
+}
+
+void XamlApplication::AddMetadataProvider(
+ winrt::Microsoft::UI::Xaml::Markup::IXamlMetadataProvider const &otherProvider) {
+ AppProvider()->AddProvider(otherProvider);
+}
+
+winrt::Microsoft::ReactNative::Xaml::XamlApplication XamlApplication::s_current{nullptr};
+
+} // namespace winrt::Microsoft::ReactNative::Xaml::implementation
diff --git a/vnext/Microsoft.ReactNative.Xaml/XamlApplication.h b/vnext/Microsoft.ReactNative.Xaml/XamlApplication.h
new file mode 100644
index 00000000000..29f95102de1
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/XamlApplication.h
@@ -0,0 +1,53 @@
+#pragma once
+#include "XamlApplication.g.h"
+
+#include "winrt/Microsoft.UI.Xaml.h"
+#include "winrt/Microsoft.UI.Xaml.Hosting.h"
+#include "winrt/Microsoft.UI.Xaml.Markup.h"
+#include "winrt/Microsoft.UI.Xaml.Interop.h"
+
+#include "winrt/Windows.UI.Xaml.Interop.h"
+
+#include "XamlTypeInfo.xaml.g.h"
+#include "XamlMetaDataProvider.h"
+
+namespace winrt::Microsoft::ReactNative::Xaml::implementation {
+struct XamlApplication : XamlApplicationT {
+ using IXamlType = ::winrt::Microsoft::UI::Xaml::Markup::IXamlType;
+
+ XamlApplication();
+ ~XamlApplication();
+
+ static void EnsureCreated() {
+ if (Current() == nullptr) {
+ // Create this type
+ winrt::make();
+ }
+ }
+
+ static winrt::Microsoft::ReactNative::Xaml::XamlApplication Current() {
+ return s_current;
+ }
+
+ IXamlType GetXamlType(::winrt::Windows::UI::Xaml::Interop::TypeName const &type);
+
+ IXamlType GetXamlType(::winrt::hstring const &fullName);
+
+ ::winrt::com_array<::winrt::Microsoft::UI::Xaml::Markup::XmlnsDefinition> GetXmlnsDefinitions();
+
+ void AddMetadataProvider(winrt::Microsoft::UI::Xaml::Markup::IXamlMetadataProvider const &otherProvider);
+
+ private:
+ static winrt::Microsoft::ReactNative::Xaml::XamlApplication s_current;
+ winrt::com_ptr _appProvider;
+ winrt::com_ptr AppProvider() {
+ if (!_appProvider) {
+ _appProvider = winrt::make_self();
+ }
+ return _appProvider;
+ }
+};
+} // namespace winrt::Microsoft::ReactNative::Xaml::implementation
+namespace winrt::Microsoft::ReactNative::Xaml::factory_implementation {
+struct XamlApplication : XamlApplicationT {};
+} // namespace winrt::Microsoft::ReactNative::Xaml::factory_implementation
diff --git a/vnext/Microsoft.ReactNative.Xaml/XamlHost.cpp b/vnext/Microsoft.ReactNative.Xaml/XamlHost.cpp
new file mode 100644
index 00000000000..b94a01c027b
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/XamlHost.cpp
@@ -0,0 +1,76 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+#include "pch.h"
+
+#include "FabricXamlControl.h"
+#include "XamlApplication.h"
+#include "XamlHost.h"
+
+#if defined(RNW_NEW_ARCH)
+
+#include "..\codegen\react\components\rnwcore\XamlHost.g.h"
+//#include "codegen/react/components/Microsoft::ReactNative::Xaml/XamlHost.g.h"
+
+namespace winrt::Microsoft::ReactNative::Xaml {
+
+// This is a "toy" implementation of Xaml's XamlHost, just for bringup and testing.
+// When UseExperimentalWinUI3 and UseNewArchitecture are both true, it will host a
+// XamlHost control in a XamlIsland. But we only expose a few APIs right now.
+// Later, we'll expose this through react-native-xaml.
+
+struct XamlHostComponentView : public winrt::implements,
+ ::Microsoft::ReactNativeSpecs::BaseXamlHost {
+ void InitializeContentIsland(
+ const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) noexcept {
+ winrt::Microsoft::ReactNative::Xaml::implementation::XamlApplication::EnsureCreated();
+
+ m_xamlIsland = winrt::Microsoft::UI::Xaml::XamlIsland{};
+
+ auto grid = winrt::Microsoft::UI::Xaml::Controls::Grid{};
+ auto button = winrt::Microsoft::UI::Xaml::Controls::Button{};
+ button.Content(winrt::box_value(L"(This is placeholder content for the XamlHost.)"));
+ grid.Children().Append(button);
+ m_xamlIsland.Content(grid);
+
+ // m_xamlIsland.Content(m_XamlHost);
+ 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 xamlControl = args.Child().UserData().as();
+ if (xamlControl) {
+ auto xamlElement = xamlControl->GetXamlElement();
+ m_xamlIsland.Content(xamlElement);
+ }
+ }
+
+ void UnmountChildComponentView(
+ const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+ const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs &args) noexcept override {
+ m_xamlIsland.Content(nullptr);
+}
+
+ private:
+ winrt::Microsoft::UI::Xaml::XamlIsland m_xamlIsland{nullptr};
+};
+
+} // namespace winrt::Microsoft::ReactNative::Xaml
+
+void RegisterXamlHostComponentView(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) {
+ ::Microsoft::ReactNativeSpecs::RegisterXamlHostNativeComponent<
+ winrt::Microsoft::ReactNative::Xaml::XamlHostComponentView>(
+ packageBuilder,
+ [](const winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder &builder) {
+ builder.SetContentIslandComponentViewInitializer(
+ [](const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) noexcept {
+ auto userData = winrt::make_self();
+ userData->InitializeContentIsland(islandView);
+ islandView.UserData(*userData);
+ });
+ });
+}
+
+#endif // defined(RNW_NEW_ARCH) && defined(USE_EXPERIMENTAL_WINUI3)
diff --git a/vnext/Microsoft.ReactNative.Xaml/XamlHost.h b/vnext/Microsoft.ReactNative.Xaml/XamlHost.h
new file mode 100644
index 00000000000..50717a3f53e
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/XamlHost.h
@@ -0,0 +1,9 @@
+#pragma once
+
+#if defined(RNW_NEW_ARCH)
+
+void RegisterXamlHostComponentView(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder);
+
+void RegisterXamlControl(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder);
+
+#endif // defined(RNW_NEW_ARCH) && defined(USE_EXPERIMENTAL_WINUI3)
diff --git a/vnext/Microsoft.ReactNative.Xaml/XamlMetaDataProvider.cpp b/vnext/Microsoft.ReactNative.Xaml/XamlMetaDataProvider.cpp
new file mode 100644
index 00000000000..16847be721e
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/XamlMetaDataProvider.cpp
@@ -0,0 +1,4 @@
+// This file is generated by the build to support Xaml apps
+#include "pch.h"
+#include "XamlMetaDataProvider.h"
+#include "XamlMetaDataProvider.g.cpp"
diff --git a/vnext/Microsoft.ReactNative.Xaml/XamlMetaDataProvider.g.cpp b/vnext/Microsoft.ReactNative.Xaml/XamlMetaDataProvider.g.cpp
new file mode 100644
index 00000000000..c3b6f25bc4d
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/XamlMetaDataProvider.g.cpp
@@ -0,0 +1,13 @@
+// WARNING: Please don't edit this file. It was generated by C++/WinRT v2.0.240405.15
+
+void* winrt_make_Microsoft_ReactNative_Xaml_XamlMetaDataProvider()
+{
+ return winrt::detach_abi(winrt::make());
+}
+WINRT_EXPORT namespace winrt::Microsoft::ReactNative::Xaml
+{
+ XamlMetaDataProvider::XamlMetaDataProvider() :
+ XamlMetaDataProvider(make())
+ {
+ }
+}
diff --git a/vnext/Microsoft.ReactNative.Xaml/XamlMetaDataProvider.g.h b/vnext/Microsoft.ReactNative.Xaml/XamlMetaDataProvider.g.h
new file mode 100644
index 00000000000..aff19e39bb0
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/XamlMetaDataProvider.g.h
@@ -0,0 +1,52 @@
+// WARNING: Please don't edit this file. It was generated by C++/WinRT v2.0.240405.15
+
+#pragma once
+#include "winrt/Microsoft.ReactNative.Xaml.h"
+#include "winrt/Microsoft.UI.Xaml.Markup.h"
+namespace winrt::Microsoft::ReactNative::Xaml::implementation
+{
+ template
+ struct WINRT_IMPL_EMPTY_BASES XamlMetaDataProvider_base : implements
+ {
+ using base_type = XamlMetaDataProvider_base;
+ using class_type = Microsoft::ReactNative::Xaml::XamlMetaDataProvider;
+ using implements_type = typename XamlMetaDataProvider_base::implements_type;
+ using implements_type::implements_type;
+
+ hstring GetRuntimeClassName() const
+ {
+ return L"Microsoft.ReactNative.Xaml.XamlMetaDataProvider";
+ }
+ };
+}
+namespace winrt::Microsoft::ReactNative::Xaml::factory_implementation
+{
+ template
+ struct WINRT_IMPL_EMPTY_BASES XamlMetaDataProviderT : implements
+ {
+ using instance_type = Microsoft::ReactNative::Xaml::XamlMetaDataProvider;
+
+ hstring GetRuntimeClassName() const
+ {
+ return L"Microsoft.ReactNative.Xaml.XamlMetaDataProvider";
+ }
+ auto ActivateInstance() const
+ {
+ return make();
+ }
+ };
+}
+
+#if defined(WINRT_FORCE_INCLUDE_XAMLMETADATAPROVIDER_XAML_G_H) || __has_include("XamlMetaDataProvider.xaml.g.h")
+
+#include "XamlMetaDataProvider.xaml.g.h"
+
+#else
+
+namespace winrt::Microsoft::ReactNative::Xaml::implementation
+{
+ template
+ using XamlMetaDataProviderT = XamlMetaDataProvider_base;
+}
+
+#endif
diff --git a/vnext/Microsoft.ReactNative.Xaml/XamlMetaDataProvider.h b/vnext/Microsoft.ReactNative.Xaml/XamlMetaDataProvider.h
new file mode 100644
index 00000000000..829f1d4f73c
--- /dev/null
+++ b/vnext/Microsoft.ReactNative.Xaml/XamlMetaDataProvider.h
@@ -0,0 +1,58 @@
+//------------------------------------------------------------------------------
+//
+// This code was generated by a tool.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+//
+//------------------------------------------------------------------------------
+#pragma once
+
+#include
+#include
+#include