From f4740441dc2ba6a189a8cc1c31f3ab6b29d0a44c Mon Sep 17 00:00:00 2001
From: Erik Schlegel <erik.schlegel@gmail.com>
Date: Wed, 20 Jan 2016 19:57:13 -0500
Subject: [PATCH] Revert "Layout improvements"

---
 ReactWindows/Playground/App.xaml              |   1 +
 .../ReactNative.Tests.csproj                  |  26 --
 ReactWindows/ReactNative.sln                  |  10 +-
 ReactWindows/ReactNative/ReactNative.csproj   |   7 -
 ReactWindows/ReactNative/ReactRootView.cs     |   4 +
 ReactWindows/ReactNative/Themes/Generic.xaml  |  43 ---
 ...eredContentControl.DependencyProperties.cs | 201 ----------
 .../UIManager/BorderedContentControl.cs       | 358 +++++++++---------
 .../ReactNative/UIManager/UIManagerModule.cs  |   2 +
 .../ReactNative/Views/View/ReactPanel.cs      |   2 +-
 .../Views/View/ReactViewManager.cs            |   2 +-
 11 files changed, 194 insertions(+), 462 deletions(-)
 delete mode 100644 ReactWindows/ReactNative/Themes/Generic.xaml
 delete mode 100644 ReactWindows/ReactNative/UIManager/BorderedContentControl.DependencyProperties.cs

diff --git a/ReactWindows/Playground/App.xaml b/ReactWindows/Playground/App.xaml
index 1db0328c427..33929dda240 100644
--- a/ReactWindows/Playground/App.xaml
+++ b/ReactWindows/Playground/App.xaml
@@ -4,4 +4,5 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:Playground"
     RequestedTheme="Light">
+
 </Application>
diff --git a/ReactWindows/ReactNative.Tests/ReactNative.Tests.csproj b/ReactWindows/ReactNative.Tests/ReactNative.Tests.csproj
index 867e3d2a92a..2de50f43ac3 100644
--- a/ReactWindows/ReactNative.Tests/ReactNative.Tests.csproj
+++ b/ReactWindows/ReactNative.Tests/ReactNative.Tests.csproj
@@ -181,32 +181,6 @@
   <PropertyGroup Condition=" '$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '14.0' ">
     <VisualStudioVersion>14.0</VisualStudioVersion>
   </PropertyGroup>
-  <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Debug|AnyCPU'">
-    <DebugSymbols>true</DebugSymbols>
-    <OutputPath>bin\Debug\</OutputPath>
-    <DefineConstants>DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;CODE_ANALYSIS</DefineConstants>
-    <NoWarn>;2008</NoWarn>
-    <NoStdLib>true</NoStdLib>
-    <DebugType>full</DebugType>
-    <PlatformTarget>AnyCPU</PlatformTarget>
-    <UseVSHostingProcess>false</UseVSHostingProcess>
-    <ErrorReport>prompt</ErrorReport>
-    <CodeAnalysisRuleSet>MinimumRecommendedRules.ruleset</CodeAnalysisRuleSet>
-    <Prefer32Bit>true</Prefer32Bit>
-  </PropertyGroup>
-  <PropertyGroup Condition="'$(Configuration)|$(Platform)' == 'Release|AnyCPU'">
-    <OutputPath>bin\Release\</OutputPath>
-    <DefineConstants>TRACE;NETFX_CORE;WINDOWS_UWP;CODE_ANALYSIS</DefineConstants>
-    <Optimize>true</Optimize>
-    <NoWarn>;2008</NoWarn>
-    <NoStdLib>true</NoStdLib>
-    <DebugType>pdbonly</DebugType>
-    <PlatformTarget>AnyCPU</PlatformTarget>
-    <UseVSHostingProcess>false</UseVSHostingProcess>
-    <ErrorReport>prompt</ErrorReport>
-    <CodeAnalysisRuleSet>MinimumRecommendedRules.ruleset</CodeAnalysisRuleSet>
-    <Prefer32Bit>true</Prefer32Bit>
-  </PropertyGroup>
   <Import Project="$(MSBuildExtensionsPath)\Microsoft\WindowsXaml\v$(VisualStudioVersion)\Microsoft.Windows.UI.Xaml.CSharp.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
        Other similar extension points exist, see Microsoft.Common.targets.
diff --git a/ReactWindows/ReactNative.sln b/ReactWindows/ReactNative.sln
index 101f86ce18f..b27578ddf15 100644
--- a/ReactWindows/ReactNative.sln
+++ b/ReactWindows/ReactNative.sln
@@ -38,8 +38,6 @@ Global
 		{C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Release|x86.ActiveCfg = Release|x86
 		{C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Release|x86.Build.0 = Release|x86
 		{D52267B5-396F-424A-BB26-C9E750032846}.Debug|Any CPU.ActiveCfg = Debug|x86
-		{D52267B5-396F-424A-BB26-C9E750032846}.Debug|Any CPU.Build.0 = Debug|x86
-		{D52267B5-396F-424A-BB26-C9E750032846}.Debug|Any CPU.Deploy.0 = Debug|x86
 		{D52267B5-396F-424A-BB26-C9E750032846}.Debug|ARM.ActiveCfg = Debug|ARM
 		{D52267B5-396F-424A-BB26-C9E750032846}.Debug|ARM.Build.0 = Debug|ARM
 		{D52267B5-396F-424A-BB26-C9E750032846}.Debug|ARM.Deploy.0 = Debug|ARM
@@ -59,9 +57,7 @@ Global
 		{D52267B5-396F-424A-BB26-C9E750032846}.Release|x86.ActiveCfg = Release|x86
 		{D52267B5-396F-424A-BB26-C9E750032846}.Release|x86.Build.0 = Release|x86
 		{D52267B5-396F-424A-BB26-C9E750032846}.Release|x86.Deploy.0 = Release|x86
-		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Debug|Any CPU.ActiveCfg = Debug|x86
 		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Debug|ARM.ActiveCfg = Debug|ARM
 		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Debug|ARM.Build.0 = Debug|ARM
 		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Debug|ARM.Deploy.0 = Debug|ARM
@@ -71,9 +67,7 @@ Global
 		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Debug|x86.ActiveCfg = Debug|x86
 		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Debug|x86.Build.0 = Debug|x86
 		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Debug|x86.Deploy.0 = Debug|x86
-		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Release|Any CPU.Build.0 = Release|Any CPU
-		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Release|Any CPU.Deploy.0 = Release|Any CPU
+		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Release|Any CPU.ActiveCfg = Release|x86
 		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Release|ARM.ActiveCfg = Release|ARM
 		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Release|ARM.Build.0 = Release|ARM
 		{5AC8108B-1C39-4C4A-8653-DBBE4ECCE691}.Release|ARM.Deploy.0 = Release|ARM
diff --git a/ReactWindows/ReactNative/ReactNative.csproj b/ReactWindows/ReactNative/ReactNative.csproj
index 76beb576a35..0be8d9a4354 100644
--- a/ReactWindows/ReactNative/ReactNative.csproj
+++ b/ReactWindows/ReactNative/ReactNative.csproj
@@ -159,7 +159,6 @@
     <Compile Include="UIManager\BorderedContentControl.cs" />
     <Compile Include="UIManager\ColorHelpers.cs" />
     <Compile Include="UIManager\CSSNodeExtensions.cs" />
-    <Compile Include="UIManager\BorderedContentControl.DependencyProperties.cs" />
     <Compile Include="UIManager\Events\IOnIntercepTextGotFocusEventListener.cs" />
     <Compile Include="UIManager\Events\IOnInterceptTextInputEventListener.cs" />
     <Compile Include="LifecycleState.cs" />
@@ -294,12 +293,6 @@
       <HintPath>..\References\Facebook.CSSLayout.dll</HintPath>
     </Reference>
   </ItemGroup>
-  <ItemGroup>
-    <Page Include="Themes\Generic.xaml">
-      <Generator>MSBuild:Compile</Generator>
-      <SubType>Designer</SubType>
-    </Page>
-  </ItemGroup>
   <PropertyGroup Condition=" '$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '14.0' ">
     <VisualStudioVersion>14.0</VisualStudioVersion>
   </PropertyGroup>
diff --git a/ReactWindows/ReactNative/ReactRootView.cs b/ReactWindows/ReactNative/ReactRootView.cs
index d397799b50e..ec66892ee29 100644
--- a/ReactWindows/ReactNative/ReactRootView.cs
+++ b/ReactWindows/ReactNative/ReactRootView.cs
@@ -1,6 +1,10 @@
 using ReactNative.Bridge;
 using ReactNative.UIManager;
 using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
 using Windows.UI.Xaml;
 using Windows.Foundation;
 
diff --git a/ReactWindows/ReactNative/Themes/Generic.xaml b/ReactWindows/ReactNative/Themes/Generic.xaml
deleted file mode 100644
index 4549b3ec208..00000000000
--- a/ReactWindows/ReactNative/Themes/Generic.xaml
+++ /dev/null
@@ -1,43 +0,0 @@
-<ResourceDictionary
-    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
-    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:ReactNative.UIManager">
-    <Style TargetType="local:BorderedContentControl">
-        <Setter Property="HorizontalContentAlignment" Value="Left"/>
-        <Setter Property="VerticalContentAlignment" Value="Top"/>
-        <Setter Property="Template">
-            <Setter.Value>
-                <ControlTemplate TargetType="local:BorderedContentControl">
-                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
-                        <Path x:Name="LeftBorderPath"
-                              Stroke="{TemplateBinding LeftBorderBrush}" 
-                              StrokeThickness="{TemplateBinding LeftBorderWidth}"
-                              Data="{TemplateBinding LeftBorderGeometry}">
-                        </Path>
-                        <Path x:Name="TopBorderPath"
-                              Stroke="{TemplateBinding TopBorderBrush}" 
-                              StrokeThickness="{TemplateBinding TopBorderWidth}"
-                              Data="{TemplateBinding TopBorderGeometry}">
-                        </Path>
-                        <Path x:Name="RightBorderPath"
-                              Stroke="{TemplateBinding RightBorderBrush}" 
-                              StrokeThickness="{TemplateBinding RightBorderWidth}"
-                              Data="{TemplateBinding RightBorderGeometry}">
-                        </Path>
-                        <Path x:Name="BottomBorderPath"
-                              Stroke="{TemplateBinding BottomBorderBrush}" 
-                              StrokeThickness="{TemplateBinding BottomBorderWidth}"
-                              Data="{TemplateBinding BottomBorderGeometry}">
-                        </Path>
-                        <ContentPresenter Content="{TemplateBinding Content}"
-                              ContentTemplate="{TemplateBinding ContentTemplate}"
-                              Margin="{TemplateBinding Padding}"
-                              ContentTransitions="{TemplateBinding ContentTransitions}"
-                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
-                    </Grid>
-                </ControlTemplate>
-            </Setter.Value>
-        </Setter>
-    </Style>
-</ResourceDictionary>
diff --git a/ReactWindows/ReactNative/UIManager/BorderedContentControl.DependencyProperties.cs b/ReactWindows/ReactNative/UIManager/BorderedContentControl.DependencyProperties.cs
deleted file mode 100644
index eed83490599..00000000000
--- a/ReactWindows/ReactNative/UIManager/BorderedContentControl.DependencyProperties.cs
+++ /dev/null
@@ -1,201 +0,0 @@
-using Windows.UI;
-using Windows.UI.Xaml;
-using Windows.UI.Xaml.Media;
-
-namespace ReactNative.UIManager
-{
-    public partial class BorderedContentControl
-    {
-        #region DependencyProperties
-        public static DependencyProperty CornerRadiusProperty { get; } = DependencyProperty.Register("CornerRadius",
-            typeof(CornerRadius),
-            typeof(BorderedContentControl),
-            new PropertyMetadata(null));
-
-        /// <summary>
-        /// Gets or sets the corner radius of the control.
-        /// </summary>
-        public CornerRadius CornerRadius
-        {
-            get { return (CornerRadius)GetValue(CornerRadiusProperty); }
-            set { SetValue(CornerRadiusProperty, value); }
-        }
-
-        #region Left Border
-        public static DependencyProperty LeftBorderGeometryProperty { get; } = DependencyProperty.Register(nameof(LeftBorderGeometry),
-            typeof(GeometryGroup),
-            typeof(BorderedContentControl),
-            new PropertyMetadata(null));
-
-        /// <summary>
-        /// Gets or sets the geometry used for the left component of the border.
-        /// </summary>
-        public GeometryGroup LeftBorderGeometry
-        {
-            get { return (GeometryGroup)GetValue(LeftBorderGeometryProperty); }
-            set { SetValue(LeftBorderGeometryProperty, value); }
-        }
-
-        public static DependencyProperty LeftBorderWidthProperty { get; } = DependencyProperty.Register(nameof(LeftBorderWidth),
-            typeof(double),
-            typeof(BorderedContentControl),
-            new PropertyMetadata(0.0));
-
-        /// <summary>
-        /// Gets or sets the border width of the left component of the border.
-        /// </summary>
-        public double LeftBorderWidth
-        {
-            get { return (double)GetValue(LeftBorderWidthProperty); }
-            set { SetValue(LeftBorderWidthProperty, value); }
-        }
-
-        public static DependencyProperty LeftBorderBrushProperty { get; } = DependencyProperty.Register(nameof(LeftBorderBrush),
-            typeof(Brush),
-            typeof(BorderedContentControl),
-            new PropertyMetadata(new SolidColorBrush(Colors.Black)));
-
-        /// <summary>
-        /// Gets or sets the brush for the left border component.
-        /// </summary>
-        public Brush LeftBorderBrush
-        {
-            get { return (Brush)GetValue(LeftBorderBrushProperty); }
-            set { SetValue(LeftBorderBrushProperty, value); }
-        }
-        #endregion
-
-        #region TopBorder
-        public static DependencyProperty TopBorderGeometryProperty { get; } = DependencyProperty.Register(nameof(TopBorderGeometry),
-            typeof(GeometryGroup),
-            typeof(BorderedContentControl),
-            new PropertyMetadata(null));
-
-        /// <summary>
-        /// Gets or sets the geometry used for the top component of the border.
-        /// </summary>
-        public GeometryGroup TopBorderGeometry
-        {
-            get { return (GeometryGroup)GetValue(TopBorderGeometryProperty); }
-            set { SetValue(TopBorderGeometryProperty, value); }
-        }
-
-        public static DependencyProperty TopBorderWidthProperty { get; } = DependencyProperty.Register(nameof(TopBorderWidth),
-            typeof(double),
-            typeof(BorderedContentControl),
-            new PropertyMetadata(0.0));
-
-        /// <summary>
-        /// Gets or sets the border width of the top component of the border.
-        /// </summary>
-        public double TopBorderWidth
-        {
-            get { return (double)GetValue(TopBorderWidthProperty); }
-            set { SetValue(TopBorderWidthProperty, value); }
-        }
-
-        public static DependencyProperty TopBorderBrushProperty { get; } = DependencyProperty.Register("TopBorderBrush",
-            typeof(Brush),
-            typeof(BorderedContentControl),
-            new PropertyMetadata(new SolidColorBrush(Colors.Black)));
-
-        /// <summary>
-        /// Gets or sets the brush for the top border component.
-        /// </summary>
-        public Brush TopBorderBrush
-        {
-            get { return (Brush)GetValue(TopBorderBrushProperty); }
-            set { SetValue(TopBorderBrushProperty, value); }
-        }
-        #endregion
-
-        #region RightBorder
-        public static DependencyProperty RightBorderGeometryProperty { get; } = DependencyProperty.Register(nameof(RightBorderGeometry),
-            typeof(GeometryGroup),
-            typeof(BorderedContentControl),
-            new PropertyMetadata(null));
-
-        /// <summary>
-        /// Gets or sets the geometry used for the right component of the border.
-        /// </summary>
-        public GeometryGroup RightBorderGeometry
-        {
-            get { return (GeometryGroup)GetValue(RightBorderGeometryProperty); }
-            set { SetValue(RightBorderGeometryProperty, value); }
-        }
-
-        public static DependencyProperty RightBorderWidthProperty { get; } = DependencyProperty.Register(nameof(RightBorderWidth),
-            typeof(double),
-            typeof(BorderedContentControl),
-            new PropertyMetadata(0.0));
-
-        /// <summary>
-        /// Gets or sets the border width of the right component of the border.
-        /// </summary>
-        public double RightBorderWidth
-        {
-            get { return (double)GetValue(RightBorderWidthProperty); }
-            set { SetValue(RightBorderWidthProperty, value); }
-        }
-
-        public static DependencyProperty RightBorderBrushProperty { get; } = DependencyProperty.Register(nameof(RightBorderBrush),
-            typeof(Brush),
-            typeof(BorderedContentControl),
-            new PropertyMetadata(new SolidColorBrush(Colors.Black)));
-
-        /// <summary>
-        /// Gets or sets the brush for the right border component.
-        /// </summary>
-        public Brush RightBorderBrush
-        {
-            get { return (Brush)GetValue(RightBorderBrushProperty); }
-            set { SetValue(RightBorderBrushProperty, value); }
-        }
-        #endregion
-
-        #region BottomBorder
-        public static DependencyProperty BottomBorderGeometryProperty { get; } = DependencyProperty.Register(nameof(BottomBorderGeometry),
-             typeof(GeometryGroup),
-             typeof(BorderedContentControl),
-             new PropertyMetadata(null));
-
-        /// <summary>
-        /// Gets or sets the geometry used for the bottom component of the border.
-        /// </summary>
-        public GeometryGroup BottomBorderGeometry
-        {
-            get { return (GeometryGroup)GetValue(BottomBorderGeometryProperty); }
-            set { SetValue(BottomBorderGeometryProperty, value); }
-        }
-
-        public static DependencyProperty BottomBorderWidthProperty { get; } = DependencyProperty.Register(nameof(BottomBorderWidth),
-            typeof(double),
-            typeof(BorderedContentControl),
-            new PropertyMetadata(0.0));
-
-        /// <summary>
-        /// Gets or sets the border width of the bottom component of the border.
-        /// </summary>
-        public double BottomBorderWidth
-        {
-            get { return (double)GetValue(BottomBorderWidthProperty); }
-            set { SetValue(BottomBorderWidthProperty, value); }
-        }
-
-        public static DependencyProperty BottomBorderBrushProperty { get; } = DependencyProperty.Register(nameof(BottomBorderBrush),
-            typeof(Brush),
-            typeof(BorderedContentControl),
-            new PropertyMetadata(new SolidColorBrush(Colors.Black)));
-
-        /// <summary>
-        /// Gets or sets the brush for the bottom component of the border.
-        /// </summary>
-        public Brush BottomBorderBrush
-        {
-            get { return (Brush)GetValue(BottomBorderBrushProperty); }
-            set { SetValue(BottomBorderBrushProperty, value); }
-        }
-        #endregion
-        #endregion
-    }
-}
diff --git a/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs b/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs
index 800d4958fba..9c0f5f51500 100644
--- a/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs
+++ b/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs
@@ -1,6 +1,5 @@
 using Facebook.CSSLayout;
-using System.Numerics;
-using Windows.Foundation;
+using System.Diagnostics;
 using Windows.UI;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
@@ -11,15 +10,60 @@ namespace ReactNative.UIManager
     /// <summary>
     /// A single child control for managing a border.
     /// </summary>
-    public partial class BorderedContentControl : ContentControl
+    public class BorderedContentControl : ContentControl
     {
+        private static readonly SolidColorBrush s_defaultBorderBrush = new SolidColorBrush(Colors.Black);
+
+        private Border _customBorder;
+        private Border _customLeftBorder;
+        private Border _customRightBorder;
+        private Border _customTopBorder;
+        private Border _customBottomBorder;
+
         /// <summary>
         /// Instantiates the <see cref="BorderedContentControl"/>.
         /// </summary>
-        public BorderedContentControl()
+        /// <param name="content">The content.</param>
+        public BorderedContentControl(object content)
         {
             DefaultStyleKey = typeof(BorderedContentControl);
-            SizeChanged += BorderedContentControl_SizeChanged;
+            BorderBrush = s_defaultBorderBrush;
+            base.Content = content;
+        }
+
+        private bool HasCustomBorder
+        {
+            get
+            {
+                return _customBorder != null ||
+                    _customLeftBorder != null ||
+                    _customRightBorder != null ||
+                    _customTopBorder != null ||
+                    _customBottomBorder != null;
+            }
+        }
+
+        /// <summary>
+        /// An intentional override of the <see cref="ContentControl.Content"/>
+        /// property that returns the child without any borders.
+        /// </summary>
+        public new UIElement Content
+        {
+            get
+            {
+                if (!HasCustomBorder)
+                {
+                    return (UIElement)base.Content;
+                }
+                else if (_customBorder != null)
+                {
+                    return _customBorder.Child;
+                }
+                else
+                {
+                    return _customBottomBorder.Child;
+                }
+            }
         }
 
         /// <summary>
@@ -28,11 +72,19 @@ public BorderedContentControl()
         /// <param name="width">The width.</param>
         public void SetBorderWidth(double width)
         {
-            LeftBorderWidth = width;
-            TopBorderWidth = width;
-            RightBorderWidth = width;
-            BottomBorderWidth = width;
-            Padding = new Thickness(width);
+            EnsureBorder();
+
+            if (_customBorder != null)
+            {
+                _customBorder.BorderThickness = new Thickness(width);
+            }
+            else if (_customBorder == null)
+            {
+                _customLeftBorder.BorderThickness = new Thickness(width, 0, 0, 0);
+                _customTopBorder.BorderThickness = new Thickness(0, width, 0, 0);
+                _customRightBorder.BorderThickness = new Thickness(0, 0, width, 0);
+                _customBottomBorder.BorderThickness = new Thickness(0, 0, 0, width);
+            }
         }
 
         /// <summary>
@@ -46,29 +98,49 @@ public void SetBorderWidth(CSSSpacingType kind, double width)
             {
                 SetBorderWidth(width);
             }
+
+            EnsureBorder();
+
+            if (_customBorder != null)
+            {
+                var thickness = _customBorder.BorderThickness;
+                switch (kind)
+                {
+                    case CSSSpacingType.Left:
+                        thickness.Left = width;
+                        break;
+                    case CSSSpacingType.Top:
+                        thickness.Top = width;
+                        break;
+                    case CSSSpacingType.Right:
+                        thickness.Right = width;
+                        break;
+                    case CSSSpacingType.Bottom:
+                        thickness.Bottom = width;
+                        break;
+                    case CSSSpacingType.All:
+                        thickness = new Thickness(width);
+                        break;
+                }
+                _customBorder.BorderThickness = thickness;
+            }
             else
             {
-                var padding = Padding;
                 switch (kind)
                 {
                     case CSSSpacingType.Left:
-                        LeftBorderWidth = width;
-                        padding.Left = width;
+                        _customLeftBorder.BorderThickness = new Thickness(width, 0, 0, 0);
                         break;
                     case CSSSpacingType.Top:
-                        TopBorderWidth = width;
-                        padding.Top = width;
+                        _customTopBorder.BorderThickness = new Thickness(0, width, 0, 0);
                         break;
                     case CSSSpacingType.Right:
-                        RightBorderWidth = width;
-                        padding.Right = width;
+                        _customRightBorder.BorderThickness = new Thickness(0, 0, width, 0);
                         break;
                     case CSSSpacingType.Bottom:
-                        BottomBorderWidth = width;
-                        padding.Bottom = width;
+                        _customBottomBorder.BorderThickness = new Thickness(0, 0, 0, width);
                         break;
                 }
-                Padding = padding;
             }
         }
 
@@ -78,11 +150,26 @@ public void SetBorderWidth(CSSSpacingType kind, double width)
         /// <param name="color">The masked color.</param>
         public void SetBorderColor(uint color)
         {
+            EnsureBorder();
+
             var brush = new SolidColorBrush(ColorHelpers.Parse(color));
-            LeftBorderBrush = brush;
-            TopBorderBrush = brush;
-            RightBorderBrush = brush;
-            BottomBorderBrush = brush;
+
+            if (_customBorder != null)
+            {
+                _customBorder.BorderBrush = brush;
+            }
+            else
+            {
+                Debug.Assert(_customLeftBorder != null);
+                Debug.Assert(_customTopBorder != null);
+                Debug.Assert(_customRightBorder != null);
+                Debug.Assert(_customBottomBorder != null);
+
+                _customLeftBorder.BorderBrush = brush;
+                _customTopBorder.BorderBrush = brush;
+                _customRightBorder.BorderBrush = brush;
+                _customBottomBorder.BorderBrush = brush;
+            }
         }
 
         /// <summary>
@@ -100,19 +187,21 @@ public void SetBorderColor(CSSSpacingType kind, uint color)
             {
                 var brush = new SolidColorBrush(ColorHelpers.Parse(color));
 
+                EnsureSideBorders();
+
                 switch (kind)
                 {
                     case CSSSpacingType.Left:
-                        LeftBorderBrush = brush;
+                        _customLeftBorder.BorderBrush = brush;
                         break;
                     case CSSSpacingType.Top:
-                        TopBorderBrush = brush;
+                        _customTopBorder.BorderBrush = brush;
                         break;
                     case CSSSpacingType.Right:
-                        RightBorderBrush = brush;
+                        _customRightBorder.BorderBrush = brush;
                         break;
                     case CSSSpacingType.Bottom:
-                        BottomBorderBrush = brush;
+                        _customBottomBorder.BorderBrush = brush;
                         break;
                 }
             }
@@ -124,167 +213,86 @@ public void SetBorderColor(CSSSpacingType kind, uint color)
         /// <param name="radius">The radius.</param>
         public void SetBorderRadius(double radius)
         {
-            CornerRadius = new CornerRadius(radius);
-        }
-
-        private void BorderedContentControl_SizeChanged(object sender, SizeChangedEventArgs e)
-        {
-            LayoutBorderGeometry(e.NewSize);
-        }
-
-        private void LayoutBorderGeometry(Size newSize)
-        {
-            var upperLeftLowerPoint = new Point(LeftBorderWidth / 2, (TopBorderWidth / 2) + CornerRadius.TopLeft);
-            var upperLeftUpperPoint = new Point((LeftBorderWidth / 2) + CornerRadius.TopLeft, TopBorderWidth / 2);
-            var upperLeftCenterPoint = new Point((LeftBorderWidth / 2) + CornerRadius.TopLeft, (TopBorderWidth / 2) + CornerRadius.TopLeft);
-
-            var upperRightUpperPoint = new Point(newSize.Width - ((RightBorderWidth / 2) + CornerRadius.TopRight), TopBorderWidth / 2);
-            var upperRightLowerPoint = new Point(newSize.Width - (RightBorderWidth / 2), (TopBorderWidth / 2) + CornerRadius.TopRight);
-            var upperRightCenterPoint = new Point(newSize.Width - ((RightBorderWidth / 2) + CornerRadius.TopRight), (TopBorderWidth / 2) + CornerRadius.TopRight);
-
-            var lowerRightUpperPoint = new Point(newSize.Width - (RightBorderWidth / 2), newSize.Height - ((BottomBorderWidth / 2) + CornerRadius.BottomRight));
-            var lowerRigthLowerPoint = new Point(newSize.Width - ((RightBorderWidth / 2) + CornerRadius.BottomRight), newSize.Height - (BottomBorderWidth / 2));
-            var lowerRightCenterPoint = new Point(newSize.Width - ((RightBorderWidth / 2) + CornerRadius.BottomRight), newSize.Height - ((BottomBorderWidth / 2) + CornerRadius.BottomRight));
-
-            var lowerLeftLowerPoint = new Point((LeftBorderWidth / 2) + CornerRadius.BottomLeft, newSize.Height - (BottomBorderWidth / 2));
-            var lowerLeftUpperPoint = new Point(LeftBorderWidth / 2, newSize.Height - ((BottomBorderWidth / 2) + CornerRadius.BottomLeft));
-            var lowerLeftCenterPoint = new Point((LeftBorderWidth / 2) + CornerRadius.TopLeft, newSize.Height - ((BottomBorderWidth / 2) + CornerRadius.BottomRight));
+            var cornerRadius = new CornerRadius(radius);
 
-            // left geometry
-            var leftGeometry = new GeometryGroup();
-
-            // upper left lower corner
-            leftGeometry.Children.Add(CreateCornerGeometry(upperLeftLowerPoint,
-                    upperLeftUpperPoint,
-                    upperLeftCenterPoint,
-                    CornerRadius.TopLeft,
-                    SweepDirection.Clockwise));
-
-            leftGeometry.Children.Add(new LineGeometry()
+            EnsureBorder();
+            
+            if (_customBorder != null)
             {
-                StartPoint = upperLeftLowerPoint,
-                EndPoint = lowerLeftUpperPoint
-            });
-
-            // lower left upper half
-            leftGeometry.Children.Add(CreateCornerGeometry(lowerLeftUpperPoint,
-                    lowerLeftLowerPoint,
-                    lowerLeftCenterPoint,
-                    CornerRadius.BottomLeft,
-                    SweepDirection.Counterclockwise));
-
-            LeftBorderGeometry = leftGeometry;
-
-            // top geometry
-            var topGeometry = new GeometryGroup();
-
-            // upper left upper half
-            topGeometry.Children.Add(CreateCornerGeometry(upperLeftUpperPoint,
-                    upperLeftLowerPoint,
-                    upperLeftCenterPoint,
-                    CornerRadius.TopLeft,
-                    SweepDirection.Counterclockwise));
-
-            topGeometry.Children.Add(new LineGeometry()
+                _customBorder.CornerRadius = cornerRadius;
+            }
+            else
             {
-                StartPoint = upperLeftUpperPoint,
-                EndPoint = upperRightUpperPoint
-            });
-
-            // upper right upper half
-            topGeometry.Children.Add(CreateCornerGeometry(upperRightUpperPoint,
-                    upperRightLowerPoint,
-                    upperRightCenterPoint,
-                    CornerRadius.TopRight,
-                    SweepDirection.Clockwise));
-
-            TopBorderGeometry = topGeometry;
-
-            // right geometry
-            var rightGeometry = new GeometryGroup();
-
-            //upper right lower half
-            rightGeometry.Children.Add(CreateCornerGeometry(upperRightLowerPoint,
-                    upperRightUpperPoint,
-                    upperRightCenterPoint,
-                    CornerRadius.TopRight,
-                    SweepDirection.Counterclockwise));
+                Debug.Assert(_customLeftBorder != null);
+                Debug.Assert(_customTopBorder != null);
+                Debug.Assert(_customRightBorder != null);
+                Debug.Assert(_customBottomBorder != null);
+
+                _customLeftBorder.CornerRadius = new CornerRadius(radius, 0, 0, 0);
+                _customTopBorder.CornerRadius = new CornerRadius(0, radius, 0, 0);
+                _customRightBorder.CornerRadius = new CornerRadius(0, 0, radius, 0);
+                _customBottomBorder.CornerRadius = new CornerRadius(0, 0, 0, radius);
+            }
+        }
 
-            rightGeometry.Children.Add(new LineGeometry()
+        private void EnsureBorder()
+        {
+            if (HasCustomBorder)
             {
-                StartPoint = upperRightLowerPoint,
-                EndPoint = lowerRightUpperPoint
-            });
-
-            // lower right upper half
-            rightGeometry.Children.Add(CreateCornerGeometry(lowerRightUpperPoint,
-                    lowerRigthLowerPoint,
-                    lowerRightCenterPoint,
-                    CornerRadius.BottomRight,
-                    SweepDirection.Clockwise));
-
-            RightBorderGeometry = rightGeometry;
-
-            // bottom geometry
-            var bottomGeometry = new GeometryGroup();
+                return;
+            }
 
-            //lower right lower half
-            bottomGeometry.Children.Add(CreateCornerGeometry(lowerRigthLowerPoint,
-                    lowerRightUpperPoint,
-                    lowerRightCenterPoint,
-                    CornerRadius.BottomRight,
-                    SweepDirection.Counterclockwise));
+            var inner = Content;
+            base.Content = null;
+            _customBorder = new Border();
+            _customBorder.BorderThickness = BorderThickness;
+            _customBorder.BorderBrush = BorderBrush;
+            base.Content = _customBorder;
+            _customBorder.Child = inner;
+        }
 
-            bottomGeometry.Children.Add(new LineGeometry()
+        private void EnsureSideBorders()
+        {
+            if (HasCustomBorder && _customBorder == null)
             {
-                StartPoint = lowerRigthLowerPoint,
-                EndPoint = lowerLeftLowerPoint
-            });
+                return;
+            }
 
-            // lower left lower half
-            bottomGeometry.Children.Add(CreateCornerGeometry(lowerLeftLowerPoint,
-                    lowerLeftUpperPoint,
-                    lowerLeftCenterPoint,
-                    CornerRadius.BottomLeft,
-                    SweepDirection.Clockwise));
+            _customLeftBorder = new Border();
+            _customRightBorder = new Border();
+            _customTopBorder = new Border();
+            _customBottomBorder = new Border();
 
-            BottomBorderGeometry = bottomGeometry;
-        }
+            _customLeftBorder.Child = _customTopBorder;
+            _customTopBorder.Child = _customRightBorder;
+            _customRightBorder.Child = _customBottomBorder;
 
-        private PathGeometry CreateCornerGeometry(Point startPoint, Point endPoint, Point centerPoint, double radius, SweepDirection sweepDirection)
-        {
-            var geometry = new PathGeometry();
+            var borderThickness = _customBorder != null ? _customBorder.BorderThickness : BorderThickness;
+            var cornerRadius = _customBorder != null ? _customBorder.CornerRadius : new CornerRadius();
+            var borderBrush = _customBorder != null ? _customBorder.BorderBrush : BorderBrush;
+            var child = _customBorder != null ? _customBorder.Child : (UIElement)Content;
 
-            var figure = new PathFigure() { StartPoint = startPoint };
-            if (radius > 0)
-            {
-                figure.Segments.Add(CreateArcSegment(startPoint, endPoint, centerPoint, radius, sweepDirection));
-            }
-            else
+            if (_customBorder != null)
             {
-                figure.Segments.Add(new LineSegment() { Point = endPoint });
+                _customBorder.Child = null;
+                _customBorder = null;
             }
-            geometry.Figures.Add(figure);
-            return geometry;
-        }
 
-        private ArcSegment CreateArcSegment(Point startPoint, Point endPoint, Point centerPoint, double radius, SweepDirection sweepDirection)
-        {
-            return new ArcSegment()
-            {
-                Point = GetArcMidPoint(startPoint.ToVector2(),
-                    endPoint.ToVector2(),
-                    centerPoint.ToVector2(), (float)radius),
-                Size = new Size(radius, radius),
-                SweepDirection = sweepDirection
-            };
-        }
-
-        private Point GetArcMidPoint(Vector2 a, Vector2 b, Vector2 center, float radius)
-        {
-            var m = (a - center) + (b - center);
-            m = Vector2.Normalize(m) * new Vector2(radius, radius);
-            return new Point(center.X + m.X, center.Y + m.Y);
+            _customLeftBorder.BorderThickness = new Thickness(borderThickness.Left, 0, 0, 0);
+            _customLeftBorder.CornerRadius = new CornerRadius(cornerRadius.TopLeft, 0, 0, cornerRadius.BottomLeft);
+            _customLeftBorder.BorderBrush = borderBrush;
+            _customTopBorder.BorderThickness = new Thickness(0, borderThickness.Top, 0, 0);
+            _customTopBorder.CornerRadius = new CornerRadius(0, cornerRadius.TopRight, 0, 0);
+            _customTopBorder.BorderBrush = borderBrush;
+            _customRightBorder.BorderThickness = new Thickness(0, 0, borderThickness.Right, 0);
+            _customRightBorder.CornerRadius = new CornerRadius(0, 0, cornerRadius.BottomRight, 0);
+            _customRightBorder.BorderBrush = borderBrush;
+            _customBottomBorder.BorderThickness = new Thickness(0, 0, 0, borderThickness.Bottom);
+            _customBottomBorder.CornerRadius = new CornerRadius();
+            _customBottomBorder.BorderBrush = borderBrush;
+            _customBottomBorder.Child = child;
+
+            base.Content = _customLeftBorder;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/ReactWindows/ReactNative/UIManager/UIManagerModule.cs b/ReactWindows/ReactNative/UIManager/UIManagerModule.cs
index 244ef2724b9..d140a142734 100644
--- a/ReactWindows/ReactNative/UIManager/UIManagerModule.cs
+++ b/ReactWindows/ReactNative/UIManager/UIManagerModule.cs
@@ -2,8 +2,10 @@
 using ReactNative.Bridge;
 using ReactNative.Tracing;
 using ReactNative.UIManager.Events;
+using ReactNative.Views;
 using System;
 using System.Collections.Generic;
+using Windows.UI.Xaml;
 
 namespace ReactNative.UIManager
 {
diff --git a/ReactWindows/ReactNative/Views/View/ReactPanel.cs b/ReactWindows/ReactNative/Views/View/ReactPanel.cs
index f51c66f0030..307767f5fa0 100644
--- a/ReactWindows/ReactNative/Views/View/ReactPanel.cs
+++ b/ReactWindows/ReactNative/Views/View/ReactPanel.cs
@@ -23,7 +23,7 @@ public class ReactPanel : Canvas, ICatalystInterceptingViewGroup, ReactPointerEv
 
         public ReactPanel() : base()
         {
-            SizeChanged += OnBoundsChanged;
+            this.SizeChanged += OnBoundsChanged;
         }
 
         public PointerEvents PointerEvents
diff --git a/ReactWindows/ReactNative/Views/View/ReactViewManager.cs b/ReactWindows/ReactNative/Views/View/ReactViewManager.cs
index 77f2b6faca4..4e7c949448e 100644
--- a/ReactWindows/ReactNative/Views/View/ReactViewManager.cs
+++ b/ReactWindows/ReactNative/Views/View/ReactViewManager.cs
@@ -186,7 +186,7 @@ public void SetBorderColor(BorderedContentControl view, int index, uint? color)
         /// <returns>The view instance.</returns>
         protected override FrameworkElement CreateViewInstance(ThemedReactContext reactContext)
         {
-            return new BorderedContentControl() { Content = new ReactPanel()};
+            return new BorderedContentControl(new ReactPanel());
         }
 
         private ReactPanel GetPanel(FrameworkElement element)