Ensure XAML controls can be hosted within a Fabric app's Composition tree

[chrisglein]

Summary

The core components for Windows' Fabric rendering are done with Composition elements (the layer underneath XAML). However, many more complicated controls (e.g. a DatePicker) would preferably bring forward the fully featured WinUI equivalents. XAML can be hosted in any app. We need to validate this mechanism works in a Fabric app, and what the implications are for module authorship. Furthermore we need to track whether HWND-hosted XAML islands are the best option here and whether more efficient ways to include the rich XAML controls are possible.

Motivation

There is substantial investment in the XAML control set with rich support for accessibility, respect for system themes, native performance, and they express the Fluent design language. Plus as any of these are improved in the future, we want the RNW versions to benefit automatically. As such, hosting XAML controls is very important to RNW having rich support on Fabric.

Basic Example

Some examples:

Doesn't need to map to a XAML element:

• Pressable
• Text
• TextInput

Borderline could be a XAML element, could be replicated with primitives in JS or recreated with composition:

• ActivityIndicator
• CheckBox
• ProgressView
• Slider
• Switch
• WebView

Would strongly prefer as a XAML element:

• DateTimePicker

A good measure here is: Does a Fluent JS control exist? If so, the native control may not be needed. If not, how complicated is the control to replicate?

Open Questions

No response