Layout improvements

ReactWindows/Playground/App.xaml

@@ -4,5 +4,4 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:Playground"
     RequestedTheme="Light">
-
 </Application>

ReactWindows/ReactNative.Tests/ReactNative.Tests.csproj

@@ -181,6 +181,32 @@
   <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.

ReactWindows/ReactNative.sln

@@ -38,6 +38,8 @@ 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
@@ -57,7 +59,9 @@ 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|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|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
@@ -67,7 +71,9 @@ 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|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|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

ReactWindows/ReactNative/ReactNative.csproj

@@ -159,6 +159,7 @@
     <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" />
@@ -293,6 +294,12 @@
       <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>

ReactWindows/ReactNative/ReactRootView.cs

@@ -1,10 +1,6 @@
 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;
 

ReactWindows/ReactNative/Themes/Generic.xaml

@@ -0,0 +1,43 @@
+<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>

ReactWindows/ReactNative/UIManager/BorderedContentControl.DependencyProperties.cs

@@ -0,0 +1,201 @@
+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
+    }
+}