react-native-windows 0.72.14 → 0.73.0-preview.1

package/Microsoft.ReactNative/Views/ViewPanel.cpp

@@ -51,43 +51,19 @@ winrt::AutomationPeer ViewPanel::OnCreateAutomationPeer() {
 }
 
 /*static*/ xaml::DependencyProperty ViewPanel::ViewBackgroundProperty() {
-  static xaml::DependencyProperty s_viewBackgroundProperty = xaml::DependencyProperty::Register(
-      L"ViewBackground",
-      winrt::xaml_typename<winrt::Brush>(),
-      viewPanelTypeName,
-      winrt::PropertyMetadata(xaml::Media::SolidColorBrush(), ViewPanel::VisualPropertyChanged));
-
-  return s_viewBackgroundProperty;
+  return xaml::Controls::Panel::BackgroundProperty();
 }
 
 /*static*/ xaml::DependencyProperty ViewPanel::BorderThicknessProperty() {
-  static xaml::DependencyProperty s_borderThicknessProperty = xaml::DependencyProperty::Register(
-      L"BorderThickness",
-      winrt::xaml_typename<winrt::Thickness>(),
-      viewPanelTypeName,
-      winrt::PropertyMetadata(winrt::box_value(winrt::Thickness()), ViewPanel::VisualPropertyChanged));
-
-  return s_borderThicknessProperty;
+  return xaml::Controls::Grid::BorderThicknessProperty();
 }
 
 /*static*/ xaml::DependencyProperty ViewPanel::BorderBrushProperty() {
-  static xaml::DependencyProperty s_borderBrushProperty = xaml::DependencyProperty::Register(
-      L"BorderBrush",
-      winrt::xaml_typename<winrt::Brush>(),
-      viewPanelTypeName,
-      winrt::PropertyMetadata(xaml::Media::SolidColorBrush(), ViewPanel::VisualPropertyChanged));
-
-  return s_borderBrushProperty;
+  return xaml::Controls::Grid::BorderBrushProperty();
 }
 
 /*static*/ xaml::DependencyProperty ViewPanel::CornerRadiusProperty() {
-  static xaml::DependencyProperty s_cornerRadiusProperty = xaml::DependencyProperty::Register(
-      L"CornerRadius",
-      winrt::xaml_typename<xaml::CornerRadius>(),
-      viewPanelTypeName,
-      winrt::PropertyMetadata(winrt::box_value(xaml::CornerRadius()), ViewPanel::VisualPropertyChanged));
-
-  return s_cornerRadiusProperty;
+  return xaml::Controls::Grid::CornerRadiusProperty();
 }
 
 /*static*/ xaml::DependencyProperty ViewPanel::TopProperty() {
@@ -98,16 +74,6 @@ winrt::AutomationPeer ViewPanel::OnCreateAutomationPeer() {
   return xaml::Controls::Canvas::LeftProperty();
 }
 
-/*static*/ xaml::DependencyProperty ViewPanel::ClipChildrenProperty() {
-  static xaml::DependencyProperty s_clipChildrenProperty = xaml::DependencyProperty::Register(
-      L"ClipChildren",
-      winrt::xaml_typename<bool>(),
-      viewPanelTypeName,
-      winrt::PropertyMetadata(winrt::box_value(false), ViewPanel::VisualPropertyChanged));
-
-  return s_clipChildrenProperty;
-}
-
 /*static*/ void ViewPanel::SetTop(xaml::UIElement const &element, double value) {
   element.SetValue(TopProperty(), winrt::box_value<double>(value));
   InvalidateForArrange(element);
@@ -141,52 +107,34 @@ winrt::Size ViewPanel::MeasureOverride(winrt::Size /*availableSize*/) {
 }
 
 winrt::Size ViewPanel::ArrangeOverride(winrt::Size finalSize) {
-  // Sometimes we create outerBorder(i.e. when CornerRadius is true) instead of innerBorder,
-  // Yoga has no notion of outerBorder when calculating the child's position, so we
-  // need to make adujustment in arrange for outerborder's thickness.
-  float outerBorderLeft = 0;
-  float outerBorderTop = 0;
-  if (auto outerBorder = GetOuterBorder()) {
-    auto borderThickness = outerBorder.BorderThickness();
-    outerBorderLeft = static_cast<float>(borderThickness.Left);
-    outerBorderTop = static_cast<float>(borderThickness.Top);
-  }
   for (xaml::UIElement child : Children()) {
     double childHeight = 0.0;
     double childWidth = 0.0;
 
-    // A Border or inner ViewPanel should take up the same space as this panel
-    if (child == m_border) {
-      childWidth = finalSize.Width;
-      childHeight = finalSize.Height;
-    } else {
-      // We expect elements to have been arranged by yoga which means their
-      // Width & Height are set
-      xaml::FrameworkElement fe = child.try_as<xaml::FrameworkElement>();
-      if (fe != nullptr) {
-        childWidth = fe.Width();
-        childHeight = fe.Height();
-      }
-      // But we fall back to the measured size otherwise
-      else {
-        childWidth = child.DesiredSize().Width;
-        childHeight = child.DesiredSize().Height;
-      }
+    // We expect elements to have been arranged by yoga which means their
+    // Width & Height are set
+    xaml::FrameworkElement fe = child.try_as<xaml::FrameworkElement>();
+    if (fe != nullptr) {
+      childWidth = fe.Width();
+      childHeight = fe.Height();
+    }
+    // But we fall back to the measured size otherwise
+    else {
+      childWidth = child.DesiredSize().Width;
+      childHeight = child.DesiredSize().Height;
     }
 
     // Guard against negative values
     childWidth = std::max<double>(0.0f, childWidth);
     childHeight = std::max<double>(0.0f, childHeight);
 
-    float adjustedLeft = static_cast<float>(ViewPanel::GetLeft(child)) - outerBorderLeft;
-    float adjustedTop = static_cast<float>(ViewPanel::GetTop(child)) - outerBorderTop;
-
-    child.Arrange(
-        winrt::Rect(adjustedLeft, adjustedTop, static_cast<float>(childWidth), static_cast<float>(childHeight)));
+    child.Arrange(winrt::Rect(
+        static_cast<float>(ViewPanel::GetLeft(child)),
+        static_cast<float>(ViewPanel::GetTop(child)),
+        static_cast<float>(childWidth),
+        static_cast<float>(childHeight)));
   }
 
-  UpdateClip(finalSize);
-
   return finalSize;
 }
 
@@ -213,151 +161,4 @@ void ViewPanel::ViewBackground(winrt::Brush const &value) {
   SetValue(ViewBackgroundProperty(), winrt::box_value(value));
 }
 
-void ViewPanel::BorderThickness(winrt::Thickness const &value) {
-  SetValue(BorderThicknessProperty(), winrt::box_value(value));
-}
-
-void ViewPanel::BorderBrush(winrt::Brush const &value) {
-  SetValue(BorderBrushProperty(), winrt::box_value(value));
-}
-
-void ViewPanel::CornerRadius(xaml::CornerRadius const &value) {
-  SetValue(CornerRadiusProperty(), winrt::box_value(value));
-}
-
-void ViewPanel::ClipChildren(bool value) {
-  SetValue(ClipChildrenProperty(), winrt::box_value(value));
-}
-
-void ViewPanel::FinalizeProperties() {
-  SystraceSection s("ViewPanel::FinalizeProperties");
-  if (!m_propertiesChanged)
-    return;
-
-  // There are 3 different solutions
-  //
-  //  A) No Border
-  //      -- No need for any border properties so just contain real children
-  //      >> Background applied to ViewPanel
-  //
-  //  B) Inner Border (child of this panel along with real children)
-  //      -- Border created and made a child of this panel, alongside standard
-  //      children
-  //      >> Border* properties applied to Border, Background applied to
-  //      ViewPanel
-  //
-  //  C) Outer Border
-  //      -- Border created but handed out to view manager to make parent of
-  //      this ViewPanel
-  //      >> Border* properties and Background applied to Border
-
-  const auto unsetValue = xaml::DependencyProperty::UnsetValue();
-  const Thickness emptyThickness = ThicknessHelper::FromUniformLength(0.0);
-
-  bool hasBackground = ReadLocalValue(ViewBackgroundProperty()) != unsetValue;
-  bool hasBorderBrush = ReadLocalValue(BorderBrushProperty()) != unsetValue;
-  bool hasBorderThickness = BorderThickness() != emptyThickness;
-  bool hasCornerRadius = ReadLocalValue(CornerRadiusProperty()) != unsetValue;
-  bool displayBorder = hasBorderThickness;
-
-  // Determine which scenario our current properties have put us into
-  enum class Scenario { OuterBorder, InnerBorder, NoBorder } scenario;
-  if (hasCornerRadius) {
-    scenario = Scenario::OuterBorder;
-    m_hasOuterBorder = true;
-  } else if (!displayBorder) {
-    scenario = Scenario::NoBorder;
-    m_hasOuterBorder = false;
-  } else if (ClipChildren()) {
-    scenario = Scenario::OuterBorder;
-    m_hasOuterBorder = true;
-  } else {
-    scenario = Scenario::InnerBorder;
-    m_hasOuterBorder = false;
-  }
-
-  // Detach this Panel from the outer Border if needed
-  if (scenario != Scenario::OuterBorder && m_border != nullptr) {
-    m_border.Child(nullptr);
-  }
-
-  // Border element
-  if (scenario != Scenario::NoBorder) {
-    // Ensure Border is created
-    if (m_border == nullptr) {
-      m_border = xaml::Controls::Border();
-
-      // Add border as the top child if using as inner border
-      if (scenario == Scenario::InnerBorder)
-        Children().Append(m_border);
-    }
-
-    // TODO: Can Binding be used here?
-    if (hasBorderBrush)
-      m_border.BorderBrush(BorderBrush());
-    else if (!hasBorderThickness) {
-      m_border.ClearValue(xaml::Controls::Border::BorderBrushProperty());
-    }
-
-    if (hasBorderThickness) {
-      m_border.BorderThickness(BorderThickness());
-      if (!hasBorderBrush) {
-        // Borders with no brush draw something other than transparent on other platforms.
-        // To match, we'll use a default border brush if one isn't already set.
-        // Note:  Keep this in sync with code in TryUpdateBorderProperties().
-        m_border.BorderBrush(::Microsoft::ReactNative::DefaultBrushStore::Instance().GetDefaultBorderBrush());
-      }
-    } else
-      m_border.ClearValue(xaml::Controls::Border::BorderThicknessProperty());
-
-    if (hasCornerRadius)
-      m_border.CornerRadius(CornerRadius());
-    else
-      m_border.ClearValue(xaml::Controls::Border::CornerRadiusProperty());
-  } else if (m_border != nullptr) {
-    // Clean up and remove the Border element
-    m_border.Child(nullptr);
-    Remove(m_border);
-    m_border = nullptr;
-  }
-
-  if (scenario == Scenario::OuterBorder) {
-    if (hasBackground)
-      m_border.Background(ViewBackground());
-    else
-      m_border.ClearValue(xaml::Controls::Border::BackgroundProperty());
-
-    ClearValue(winrt::Panel::BackgroundProperty());
-
-    // Ensure the Border is not parented to this Panel
-    Remove(m_border);
-  } else {
-    // Set any background on this Panel
-    if (hasBackground)
-      SetValue(winrt::Panel::BackgroundProperty(), ViewBackground());
-    else
-      ClearValue(winrt::Panel::BackgroundProperty());
-  }
-
-  m_propertiesChanged = false;
-}
-
-xaml::Controls::Border ViewPanel::GetOuterBorder() {
-  if (m_hasOuterBorder && (m_border != nullptr))
-    return m_border;
-  else
-    return xaml::Controls::Border(nullptr);
-}
-
-void ViewPanel::UpdateClip(winrt::Size &finalSize) {
-  if (ClipChildren()) {
-    winrt::RectangleGeometry clipGeometry;
-    clipGeometry.Rect(winrt::Rect(0, 0, static_cast<float>(finalSize.Width), static_cast<float>(finalSize.Height)));
-
-    Clip(clipGeometry);
-  } else {
-    Clip(nullptr);
-  }
-}
-
 } // namespace winrt::Microsoft::ReactNative::implementation

package/Microsoft.ReactNative/Views/ViewPanel.h

@@ -28,41 +28,17 @@ struct ViewPanel : ViewPanelT<ViewPanel> {
   void RemoveAt(uint32_t const index) const;
   void Clear() const;
 
-  void FinalizeProperties();
-  xaml::Controls::Border GetOuterBorder();
-
   // Public Properties
   xaml::Media::Brush ViewBackground() {
     return GetValue(ViewBackgroundProperty()).as<xaml::Media::Brush>();
   }
   void ViewBackground(xaml::Media::Brush const &value);
 
-  xaml::Thickness BorderThickness() {
-    return winrt::unbox_value<xaml::Thickness>(GetValue(BorderThicknessProperty()));
-  }
-  void BorderThickness(xaml::Thickness const &value);
-
-  xaml::Media::Brush BorderBrush() {
-    return GetValue(BorderBrushProperty()).as<xaml::Media::Brush>();
-  }
-  void BorderBrush(xaml::Media::Brush const &value);
-
-  xaml::CornerRadius CornerRadius() {
-    return winrt::unbox_value<xaml::CornerRadius>(GetValue(CornerRadiusProperty()));
-  }
-  void CornerRadius(xaml::CornerRadius const &value);
-
-  bool ClipChildren() {
-    return winrt::unbox_value<bool>(GetValue(ClipChildrenProperty()));
-  }
-  void ClipChildren(bool value);
-
   // ViewPanel Properties
   static xaml::DependencyProperty ViewBackgroundProperty();
   static xaml::DependencyProperty BorderThicknessProperty();
   static xaml::DependencyProperty BorderBrushProperty();
   static xaml::DependencyProperty CornerRadiusProperty();
-  static xaml::DependencyProperty ClipChildrenProperty();
 
   // Attached Properties
   static xaml::DependencyProperty TopProperty();
@@ -82,15 +58,9 @@ struct ViewPanel : ViewPanelT<ViewPanel> {
  private:
   void Remove(xaml::UIElement element) const;
 
-  void UpdateClip(winrt::Windows::Foundation::Size &finalSize);
-
  private:
   bool m_propertiesChanged{false};
 
-  // Child Elements
-  xaml::Controls::Border m_border{nullptr};
-  bool m_hasOuterBorder{false};
-
  private:
   static void VisualPropertyChanged(xaml::DependencyObject sender, xaml::DependencyPropertyChangedEventArgs e);
 };

package/Microsoft.ReactNative/Views/ViewViewManager.cpp

@@ -89,13 +89,6 @@ class ViewShadowNode : public ShadowNodeBase {
     m_isControl = isControl;
   }
 
-  bool HasOuterBorder() {
-    return m_hasOuterBorder;
-  }
-  void HasOuterBorder(bool hasOuterBorder) {
-    m_hasOuterBorder = hasOuterBorder;
-  }
-
   bool EnableFocusRing() {
     return m_enableFocusRing;
   }
@@ -161,12 +154,6 @@ class ViewShadowNode : public ShadowNodeBase {
         cdebug << "Tearing down, IsControl=true but the control is not a ContentControl, it's a " << name << "\n";
       }
     }
-
-    if (HasOuterBorder()) {
-      if (auto border = current.try_as<xaml::Controls::Border>()) {
-        border.Child(nullptr);
-      }
-    }
   }
 
   void ReplaceChild(const XamlView &oldChildView, const XamlView &newChildView) override {
@@ -200,12 +187,6 @@ class ViewShadowNode : public ShadowNodeBase {
       }
     }
 
-    if (HasOuterBorder()) {
-      if (auto border = current.try_as<xaml::Controls::Border>()) {
-        current = border.Child().try_as<XamlView>();
-      }
-    }
-
     auto panel = current.try_as<xaml::Controls::Panel>();
     assert(panel != nullptr);
 
@@ -242,8 +223,6 @@ class ViewShadowNode : public ShadowNodeBase {
 
  private:
   bool m_isControl = false;
-  bool m_hasOuterBorder = false;
-
   bool m_enableFocusRing = true;
   bool m_onClick = false;
   int32_t m_tabIndex = std::numeric_limits<std::int32_t>::max();
@@ -252,87 +231,6 @@ class ViewShadowNode : public ShadowNodeBase {
   xaml::Controls::ContentControl::LostFocus_revoker m_contentControlLostFocusRevoker{};
 };
 
-// ViewPanel uses a ViewBackground property, not Background, so need to
-// specialize
-// PropertyUtils' TryUpdateBackgroundBrush to use ViewBackground.
-// Issue #2172: Additionally, we need to use
-// winrt::Microsoft::ReactNative::ViewPanel::implementation::ViewBackgroundProperty
-// rather than the proper projected type, because of how we're using cppwinrt.
-
-template <>
-bool TryUpdateBackgroundBrush(
-    const winrt::Microsoft::ReactNative::ViewPanel &element,
-    const std::string &propertyName,
-    const winrt::Microsoft::ReactNative::JSValue &propertyValue) {
-  if (propertyName == "backgroundColor") {
-    if (IsValidColorValue(propertyValue))
-      element.ViewBackground(BrushFrom(propertyValue));
-    else if (propertyValue.IsNull())
-      element.ClearValue(ViewPanel::ViewBackgroundProperty());
-
-    return true;
-  }
-
-  return false;
-}
-
-// Issue #2172: Calling winrt::Microsoft::ReactNative::ViewPanel::BorderBrushProperty fails
-// to call
-// down into winrt::Microsoft::ReactNative::implementation::ViewPanel::BorderBrushProperty
-// because of how we're using cppwinrt. So we specialize PropertyUtils'
-// TryUpdateBorderProperties
-// to use winrt::Microsoft::ReactNative::ViewPanel::implementation::BorderBrushProperty
-
-template <>
-bool TryUpdateBorderProperties(
-    ShadowNodeBase *node,
-    const winrt::Microsoft::ReactNative::ViewPanel &element,
-    const std::string &propertyName,
-    const winrt::Microsoft::ReactNative::JSValue &propertyValue) {
-  bool isBorderProperty = true;
-
-  if (propertyName == "borderColor") {
-    if (IsValidColorValue(propertyValue))
-      element.BorderBrush(BrushFrom(propertyValue));
-    else if (propertyValue.IsNull())
-      element.ClearValue(ViewPanel::BorderBrushProperty());
-  } else if (propertyName == "borderLeftWidth") {
-    if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Double ||
-        propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Int64)
-      SetBorderThickness(node, element, ShadowEdges::Left, propertyValue.AsDouble());
-  } else if (propertyName == "borderTopWidth") {
-    if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Double ||
-        propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Int64)
-      SetBorderThickness(node, element, ShadowEdges::Top, propertyValue.AsDouble());
-  } else if (propertyName == "borderRightWidth") {
-    if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Double ||
-        propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Int64)
-      SetBorderThickness(node, element, ShadowEdges::Right, propertyValue.AsDouble());
-  } else if (propertyName == "borderBottomWidth") {
-    if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Double ||
-        propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Int64)
-      SetBorderThickness(node, element, ShadowEdges::Bottom, propertyValue.AsDouble());
-  } else if (propertyName == "borderStartWidth") {
-    if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Double ||
-        propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Int64)
-      SetBorderThickness(node, element, ShadowEdges::Start, propertyValue.AsDouble());
-  } else if (propertyName == "borderEndWidth") {
-    if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Double ||
-        propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Int64)
-      SetBorderThickness(node, element, ShadowEdges::End, propertyValue.AsDouble());
-  } else if (propertyName == "borderWidth") {
-    if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Double ||
-        propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Int64)
-      SetBorderThickness(node, element, ShadowEdges::AllEdges, propertyValue.AsDouble());
-    else if (propertyValue.IsNull())
-      element.ClearValue(ViewPanel::BorderThicknessProperty());
-  } else {
-    isBorderProperty = false;
-  }
-
-  return isBorderProperty;
-}
-
 // ViewViewManager
 
 ViewViewManager::ViewViewManager(const Mso::React::IReactContext &context) : Super(context) {}
@@ -345,11 +243,6 @@ void ViewViewManager::GetExportedCustomDirectEventTypeConstants(
     const winrt::Microsoft::ReactNative::IJSValueWriter &writer) const {
   Super::GetExportedCustomDirectEventTypeConstants(writer);
 
-  writer.WritePropertyName(L"topClick");
-  writer.WriteObjectBegin();
-  winrt::Microsoft::ReactNative::WriteProperty(writer, L"registrationName", L"onClick");
-  writer.WriteObjectEnd();
-
   writer.WritePropertyName(L"topAccessibilityTap");
   writer.WriteObjectBegin();
   winrt::Microsoft::ReactNative::WriteProperty(writer, L"registrationName", L"onAccessibilityTap");
@@ -364,7 +257,7 @@ XamlView ViewViewManager::CreateViewCore(int64_t /*tag*/, const winrt::Microsoft
   auto panel = winrt::make<winrt::Microsoft::ReactNative::implementation::ViewPanel>();
   panel.VerticalAlignment(xaml::VerticalAlignment::Stretch);
   panel.HorizontalAlignment(xaml::HorizontalAlignment::Stretch);
-
+  panel.BorderBrush(DefaultBrushStore::Instance().GetDefaultBorderBrush());
   return panel.as<XamlView>();
 }
 
@@ -389,19 +282,18 @@ bool ViewViewManager::UpdateProperty(
   auto pPanel = pViewShadowNode->GetPanel().as<winrt::Microsoft::ReactNative::ViewPanel>();
   bool ret = true;
   if (pPanel != nullptr) {
-    if (TryUpdateBackgroundBrush(pPanel, propertyName, propertyValue)) {
+    if (TryUpdateBackgroundBrush(pPanel.as<xaml::Controls::Panel>(), propertyName, propertyValue)) {
     } else if (TryUpdateBorderProperties(nodeToUpdate, pPanel, propertyName, propertyValue)) {
     } else if (TryUpdateCornerRadiusOnNode(nodeToUpdate, pPanel, propertyName, propertyValue)) {
       // Do not clamp until a size has been set for the View
       auto maxCornerRadius = std::numeric_limits<double>::max();
       // The Width and Height properties are not always set on ViewPanel. In
-      // cases where it is embedded in a Control or outer Border, the values
-      // dimensions are set on those wrapper elements. We cannot depend on the
-      // default behavior of `UpdateCornerRadiusOnElement` to check for the
-      // clamp dimension from only the ViewPanel.
-      const xaml::FrameworkElement sizingElement = pViewShadowNode->IsControl() ? pViewShadowNode->GetControl()
-          : pViewShadowNode->HasOuterBorder() ? pPanel.GetOuterBorder().as<xaml::FrameworkElement>()
-                                              : pPanel;
+      // cases where it is embedded in a Control, the values dimensions are
+      // set on those wrapper elements. We cannot depend on the default
+      // behavior of `UpdateCornerRadiusOnElement` to check for the clamp
+      // dimension from only the ViewPanel.
+      const xaml::FrameworkElement sizingElement =
+          pViewShadowNode->IsControl() ? pViewShadowNode->GetControl().as<xaml::FrameworkElement>() : pPanel;
       if (sizingElement.ReadLocalValue(xaml::FrameworkElement::WidthProperty()) !=
               xaml::DependencyProperty::UnsetValue() &&
           sizingElement.ReadLocalValue(xaml::FrameworkElement::HeightProperty()) !=
@@ -412,11 +304,6 @@ bool ViewViewManager::UpdateProperty(
     } else if (TryUpdateMouseEvents(nodeToUpdate, propertyName, propertyValue)) {
     } else if (propertyName == "onClick") {
       pViewShadowNode->OnClick(propertyValue.AsBoolean());
-    } else if (propertyName == "overflow") {
-      if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::String) {
-        bool clipChildren = propertyValue.AsString() == "hidden";
-        pPanel.ClipChildren(clipChildren);
-      }
     } else if (propertyName == "focusable") {
       pViewShadowNode->IsFocusable(propertyValue.AsBoolean());
     } else if (propertyName == "enableFocusRing") {
@@ -476,8 +363,6 @@ void ViewViewManager::OnPropertiesUpdated(ShadowNodeBase *node) {
     shouldBeControl = shouldBeControl || HasDynamicAutomationProperties(view);
   }
 
-  panel.FinalizeProperties();
-
   TryUpdateView(viewShadowNode, panel, shouldBeControl);
   SyncFocusableAndAccessible(viewShadowNode, shouldBeControl);
 }
@@ -487,21 +372,19 @@ void ViewViewManager::TryUpdateView(
     winrt::Microsoft::ReactNative::ViewPanel &pPanel,
     bool useControl) {
   bool isControl = pViewShadowNode->IsControl();
-  bool hadOuterBorder = pViewShadowNode->HasOuterBorder();
-  bool hasOuterBorder = pPanel.GetOuterBorder() != nullptr;
 
   // This short-circuits all of the update code when we have the same hierarchy
-  if (isControl == useControl && hadOuterBorder == hasOuterBorder)
+  if (isControl == useControl)
     return;
 
   //
   // 1. Ensure we have the new 'root' and do the child replacement
-  //      This is first to ensure that we can re-parent the Border or ViewPanel
+  //      This is first to ensure that we can re-parent the ViewPanel
   //      we already have
   // 2. Transfer properties
   //      There are likely some complexities to handle here
   // 3. Do any sub=parenting
-  //      This means Panel under Border and/or Border under Control
+  //      This means Panel under Control
   //
 
   XamlView oldXamlView(pViewShadowNode->GetView());
@@ -520,20 +403,15 @@ void ViewViewManager::TryUpdateView(
   }
 
   // Clean up child of Control if needed
-  if (isControl && (!useControl || (hasOuterBorder != hadOuterBorder))) {
+  if (isControl) {
     pViewShadowNode->GetControl().Content(nullptr);
   }
 
-  // If don't need a control, then set Outer Border or the Panel as the view
-  // root
+  // If don't need a control, then set the Panel as the view root
   if (!useControl) {
-    newXamlView = hasOuterBorder ? pPanel.GetOuterBorder().try_as<XamlView>() : pPanel.try_as<XamlView>();
+    newXamlView = pPanel;
   }
 
-  // Clean up child of Border if needed
-  if (hasOuterBorder && !hadOuterBorder)
-    pPanel.GetOuterBorder().Child(nullptr);
-
   // ASSERT: One of the scenarios should be true, so we should have a root view
   assert(newXamlView != nullptr);
 
@@ -546,13 +424,8 @@ void ViewViewManager::TryUpdateView(
     TransferProperties(oldXamlView, newXamlView);
   }
 
-  // Since we transferred properties to the new view we need to make the call to
-  // finalize
-  pPanel.FinalizeProperties();
-
   // Update the meta-data in the shadow node
   pViewShadowNode->IsControl(useControl);
-  pViewShadowNode->HasOuterBorder(hasOuterBorder);
 
   //
   // 3. Setup any new parent-child relationships
@@ -579,19 +452,8 @@ void ViewViewManager::TryUpdateView(
     }
   }
 
-  // Ensure parenting is setup properly
-  auto visualRoot = pPanel.try_as<xaml::UIElement>();
-
-  if (hasOuterBorder) {
-    xaml::Controls::Border outerBorder = pPanel.GetOuterBorder();
-    if (outerBorder.Child() == nullptr)
-      outerBorder.Child(pPanel.try_as<xaml::UIElement>());
-
-    visualRoot = outerBorder;
-  }
-
   if (useControl)
-    pViewShadowNode->GetControl().Content(visualRoot);
+    pViewShadowNode->GetControl().Content(pPanel);
 }
 
 void ViewViewManager::SyncFocusableAndAccessible(ViewShadowNode *pViewShadowNode, bool useControl) {
@@ -627,13 +489,10 @@ void ViewViewManager::SetLayoutProps(
 
   Super::SetLayoutProps(nodeToUpdate, viewToUpdate, left, top, width, height);
   if (pPanel.ReadLocalValue(ViewPanel::CornerRadiusProperty()) != xaml::DependencyProperty::UnsetValue()) {
-    // Rather than use ViewPanel::FinalizeProperties, only perform the explicit
-    // logic required to propagate the CornerRadius value to the Border parent.
-    auto border = pPanel.GetOuterBorder();
-    if (border) {
+    if (pPanel.GetValue(React::ViewPanel::CornerRadiusProperty()) != xaml::DependencyProperty::UnsetValue()) {
       const auto maxCornerRadius = std::min(width, height) / 2;
       UpdateCornerRadiusOnElement(&nodeToUpdate, pPanel, maxCornerRadius);
-      border.CornerRadius(pPanel.CornerRadius());
+      pPanel.CornerRadius(pPanel.CornerRadius());
     }
   }
 }