allow children elements

example/App.tsx

@@ -26,7 +26,7 @@ import {
   ReloadInstructions,
 } from 'react-native/Libraries/NewAppScreen';
 
-import {HyperlinkButton, TextBlock} from 'react-native-xaml'; // Would be from 'react-native-xaml' outside of this repo;
+import {HyperlinkButton, NativeXamlControl, TextBlock} from 'react-native-xaml'; // Would be from 'react-native-xaml' outside of this repo;
 
 const Section = ({children, title}): Node => {
   const isDarkMode = useColorScheme() === 'dark';
@@ -76,8 +76,13 @@ const App: () => Node = () => {
             Edit <Text style={styles.highlight}>App.js</Text> to change this
             screen and then come back to see your edits.
           </Section>
-          <HyperlinkButton content="Click me!" style={{width:150,height:40}} onClick={()=>{alert("clicked!");} } />
-          <TextBlock style={{width:150,height:40}} text="this is a textblock" foreground='red' />
+          <NativeXamlControl type="stackPanel" orientation="horizontal">
+            <HyperlinkButton content="Click me!" style={{ width: 150, height: 40 }} onClick={() => { alert("clicked!"); }} />
+            <NativeXamlControl type="border" verticalAlignment="center" background="blue" style={{ width: 150, height: 40 }}>
+              <TextBlock style={{ width: 150, height: 40 }} text="this is a textblock" foreground='red' textAlignment="center" />
+            </NativeXamlControl>
+            <NativeXamlControl type="button" content="this is a button" style={{ width: 150, height: 40 }} onClick={() => { alert("you clicked the button!"); }} />
+          </NativeXamlControl>
           <Section title="See Your Changes">
             <ReloadInstructions />
           </Section>

package/windows/ReactNativeXaml/XamlViewManager.cpp

@@ -49,8 +49,6 @@ namespace winrt::ReactNativeXaml {
     return nativeProps.GetView();
   }
 
-  xaml::RoutedEventHandler reh{ nullptr };
-
   void XamlViewManager::UpdateProperties(
     FrameworkElement const& view,
     IJSValueReader const& propertyMapReader) noexcept {
@@ -141,4 +139,55 @@ namespace winrt::ReactNativeXaml {
     m_reactContext = reactContext;
   }
 
+  void XamlViewManager::AddView(xaml::FrameworkElement parent, xaml::UIElement child, int64_t index) {
+    auto e = parent.as<xaml::Controls::ContentControl>().Content();
+    if (auto panel = e.try_as<Panel>()) {
+      return panel.Children().InsertAt(static_cast<uint32_t>(index), child);
+    }
+    else if (auto contentCtrl = e.try_as<ContentControl>()) {
+      if (index == 0) {
+        return contentCtrl.Content(child);
+      }
+    }
+    else if (auto border = e.try_as<Border>()) {
+      if (index == 0) {
+        return border.Child(child);
+      }
+    }
+    else {
+      auto cn = winrt::get_class_name(e);
+      assert(false && "this element cannot have children");
+    }
+  }
+
+  void XamlViewManager::RemoveAllChildren(xaml::FrameworkElement parent) {
+    auto e = parent.as<xaml::Controls::ContentControl>().Content();
+    if (auto panel = e.try_as<Panel>()) {
+      return panel.Children().Clear();
+    }
+    else if (auto contentCtrl = e.try_as<ContentControl>()) {
+      return contentCtrl.Content(nullptr);
+    }
+    else if (auto border = e.try_as<Border>()) {
+        return border.Child(nullptr);
+    }
+  }
+  void XamlViewManager::RemoveChildAt(xaml::FrameworkElement parent, int64_t index) {
+    auto e = parent.as<xaml::Controls::ContentControl>().Content();
+    if (auto panel = e.try_as<Panel>()) {
+      return panel.Children().RemoveAt(static_cast<uint32_t>(index));
+    }
+    else if (index == 0) {
+      if (auto contentCtrl = e.try_as<ContentControl>()) {
+        return contentCtrl.Content(nullptr);
+      }
+      else if (auto border = e.try_as<Border>()) {
+        return border.Child(nullptr);
+      }
+    }
+  }
+
+  void XamlViewManager::ReplaceChild(xaml::FrameworkElement parent, xaml::UIElement oldChild, xaml::UIElement newChild) {
+    assert(false && "nyi");
+  }
 }

package/windows/ReactNativeXaml/XamlViewManager.h

@@ -17,7 +17,8 @@ namespace winrt::ReactNativeXaml {
     winrt::Microsoft::ReactNative::IViewManagerWithNativeProperties,
     winrt::Microsoft::ReactNative::IViewManagerWithCommands,
     winrt::Microsoft::ReactNative::IViewManagerWithExportedEventTypeConstants,
-    winrt::Microsoft::ReactNative::IViewManagerWithReactContext
+    winrt::Microsoft::ReactNative::IViewManagerWithReactContext,
+    winrt::Microsoft::ReactNative::IViewManagerWithChildren
 #ifdef HAS_CREATEWITHPROPERTIES
     ,winrt::Microsoft::ReactNative::IViewManagerCreateWithProperties
 #endif
@@ -62,6 +63,13 @@ namespace winrt::ReactNativeXaml {
 
     // IViewManagerRequiresNativeLayout
     bool RequiresNativeLayout() noexcept { return true; }
+
+    // IViewManagerWithChildren
+    void AddView(xaml::FrameworkElement parent, xaml::UIElement child, int64_t index);
+    void RemoveAllChildren(xaml::FrameworkElement parent);
+    void RemoveChildAt(xaml::FrameworkElement parent, int64_t index);
+    void ReplaceChild(xaml::FrameworkElement parent, xaml::UIElement oldChild, xaml::UIElement newChild);
+
   private:
     winrt::Microsoft::ReactNative::IReactContext m_reactContext{ nullptr };
     XamlMetadata xamlMetadata;