From 6e1916785e74e21985e2c4294dca78e20985ed2a Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Fri, 8 Jan 2016 18:02:55 -0600 Subject: [PATCH 01/16] work towards better layout --- ReactWindows/Playground/MainPage.xaml | 16 ++++++++++ ReactWindows/ReactNative.sln | 2 ++ .../ReactNative/UIManager/RootViewManager.cs | 6 +++- .../UIManager/SizeMonitoringPanel.cs | 31 +++++++++++++++++++ .../ReactNative/UIManager/UIImplementation.cs | 5 +-- .../ReactNative/UIManager/UIManagerModule.cs | 1 + .../UIManager/UIViewOperationQueue.cs | 1 + .../ReactNative/Views/View/ReactPanel.cs | 4 +++ 8 files changed, 63 insertions(+), 3 deletions(-) create mode 100644 ReactWindows/Playground/MainPage.xaml create mode 100644 ReactWindows/ReactNative/UIManager/SizeMonitoringPanel.cs diff --git a/ReactWindows/Playground/MainPage.xaml b/ReactWindows/Playground/MainPage.xaml new file mode 100644 index 00000000000..1ff1f98ce34 --- /dev/null +++ b/ReactWindows/Playground/MainPage.xaml @@ -0,0 +1,16 @@ + + + + + + + + \ No newline at end of file diff --git a/ReactWindows/ReactNative.sln b/ReactWindows/ReactNative.sln index b27578ddf15..9508231c3d8 100644 --- a/ReactWindows/ReactNative.sln +++ b/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 diff --git a/ReactWindows/ReactNative/UIManager/RootViewManager.cs b/ReactWindows/ReactNative/UIManager/RootViewManager.cs index 04925cfa3ab..017546a3fac 100644 --- a/ReactWindows/ReactNative/UIManager/RootViewManager.cs +++ b/ReactWindows/ReactNative/UIManager/RootViewManager.cs @@ -1,9 +1,13 @@ -namespace ReactNative.UIManager +using Windows.UI.Xaml.Controls; + +namespace ReactNative.UIManager { /// /// View manager for react root view components. /// + public class RootViewManager : PanelViewGroupManager + { /// /// The name of the react root view. diff --git a/ReactWindows/ReactNative/UIManager/SizeMonitoringPanel.cs b/ReactWindows/ReactNative/UIManager/SizeMonitoringPanel.cs new file mode 100644 index 00000000000..bc8cb0d564a --- /dev/null +++ b/ReactWindows/ReactNative/UIManager/SizeMonitoringPanel.cs @@ -0,0 +1,31 @@ +using Windows.UI.Xaml; +using Windows.UI.Xaml.Controls; + +namespace ReactNative.UIManager +{ + /// + /// allows registering for size change events. The main purpose for this class is to hide complexity of ReactRootView + /// + public class SizeMonitoringPanel : Grid + { + private ISizeChangedListener _onSizeChangedListener; + /// + /// Gets or sets the size change listener for the control + /// + public ISizeChangedListener SizeChangedListener + { + get { return _onSizeChangedListener; } + set { _onSizeChangedListener = value; } + } + + public SizeMonitoringPanel() + { + SizeChanged += SizeMonitoringPanel_SizeChanged; + } + + private void SizeMonitoringPanel_SizeChanged(object sender, SizeChangedEventArgs e) + { + _onSizeChangedListener?.OnSizeChanged(this, e); + } + } +} diff --git a/ReactWindows/ReactNative/UIManager/UIImplementation.cs b/ReactWindows/ReactNative/UIManager/UIImplementation.cs index add882508fd..bf53efbe991 100644 --- a/ReactWindows/ReactNative/UIManager/UIImplementation.cs +++ b/ReactWindows/ReactNative/UIManager/UIImplementation.cs @@ -7,6 +7,7 @@ using System.Diagnostics; using System.Globalization; using System.Runtime.CompilerServices; +using Windows.UI.Xaml.Controls; namespace ReactNative.UIManager { @@ -109,8 +110,8 @@ public void RemoveRootView(int rootViewTag) /// The event dispatcher. public void UpdateRootNodeSize( int rootViewTag, - int newWidth, - int newHeight, + float newWidth, + float newHeight, EventDispatcher eventDispatcher) { var rootCssNode = _shadowNodeRegistry.GetNode(rootViewTag); diff --git a/ReactWindows/ReactNative/UIManager/UIManagerModule.cs b/ReactWindows/ReactNative/UIManager/UIManagerModule.cs index d140a142734..a947499ebaa 100644 --- a/ReactWindows/ReactNative/UIManager/UIManagerModule.cs +++ b/ReactWindows/ReactNative/UIManager/UIManagerModule.cs @@ -6,6 +6,7 @@ using System; using System.Collections.Generic; using Windows.UI.Xaml; +using Windows.UI.Xaml.Controls; namespace ReactNative.UIManager { diff --git a/ReactWindows/ReactNative/UIManager/UIViewOperationQueue.cs b/ReactWindows/ReactNative/UIManager/UIViewOperationQueue.cs index 25760f5a718..666ad12cb03 100644 --- a/ReactWindows/ReactNative/UIManager/UIViewOperationQueue.cs +++ b/ReactWindows/ReactNative/UIManager/UIViewOperationQueue.cs @@ -4,6 +4,7 @@ using System; using System.Collections.Generic; using System.Threading; +using Windows.UI.Xaml.Controls; namespace ReactNative.UIManager { diff --git a/ReactWindows/ReactNative/Views/View/ReactPanel.cs b/ReactWindows/ReactNative/Views/View/ReactPanel.cs index 307767f5fa0..d75d32d6f6d 100644 --- a/ReactWindows/ReactNative/Views/View/ReactPanel.cs +++ b/ReactWindows/ReactNative/Views/View/ReactPanel.cs @@ -1,6 +1,7 @@ using ReactNative.Touch; using ReactNative.UIManager; using System; +using Windows.UI; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; @@ -23,6 +24,9 @@ public class ReactPanel : Canvas, ICatalystInterceptingViewGroup, ReactPointerEv public ReactPanel() : base() { + //Background = new SolidColorBrush(Colors.Blue); + //HorizontalAlignment = HorizontalAlignment.Stretch; + //VerticalAlignment = VerticalAlignment.Stretch; this.SizeChanged += OnBoundsChanged; } From f62ee9c82bb912b7a125a27b81f9f6792abd8046 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Fri, 8 Jan 2016 18:02:55 -0600 Subject: [PATCH 02/16] work towards better layout --- .../ReactNative/UIManager/RootViewManager.cs | 2 -- .../ReactNative/UIManager/UIManagerModule.cs | 20 +++++++++++++++++++ 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/ReactWindows/ReactNative/UIManager/RootViewManager.cs b/ReactWindows/ReactNative/UIManager/RootViewManager.cs index 017546a3fac..cc1ac7f54f7 100644 --- a/ReactWindows/ReactNative/UIManager/RootViewManager.cs +++ b/ReactWindows/ReactNative/UIManager/RootViewManager.cs @@ -5,9 +5,7 @@ namespace ReactNative.UIManager /// /// View manager for react root view components. /// - public class RootViewManager : PanelViewGroupManager - { /// /// The name of the react root view. diff --git a/ReactWindows/ReactNative/UIManager/UIManagerModule.cs b/ReactWindows/ReactNative/UIManager/UIManagerModule.cs index a947499ebaa..62a4de3ef4f 100644 --- a/ReactWindows/ReactNative/UIManager/UIManagerModule.cs +++ b/ReactWindows/ReactNative/UIManager/UIManagerModule.cs @@ -419,5 +419,25 @@ public override void OnCatalystInstanceDispose() } #endregion +<<<<<<< 6e1916785e74e21985e2c4294dca78e20985ed2a +======= + + sealed class RootViewSizeChangedListener : ISizeChangedListener + { + public RootViewSizeChangedListener(UIManagerModule managerModule) + { + + } + + public void OnSizeChanged(object sender, SizeChangedEventArgs e) + { + //TODO: Need to adjust the styling of the panel based on the new + //width and height(e.NewSize). The adjustment needs to run on the + //Native Modules thread off the react context(this.Context.RunOnNativeModulesThread) + throw new NotImplementedException("Size change behavior for root view still needs to be implemented"); + } + } + +>>>>>>> work towards better layout } } From 56eec299d3cb4aebc46b67bf56dd0ae444233442 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Sat, 9 Jan 2016 22:25:57 -0600 Subject: [PATCH 03/16] worked on borders a little - adding custom control theme template to handle setting custom border properties on BorderedContentControl. --- ReactWindows/Playground/App.xaml | 7 + ReactWindows/ReactNative/ReactNative.csproj | 6 + ReactWindows/ReactNative/Themes/Generic.xaml | 25 +++ .../UIManager/BorderedContentControl.cs | 193 +++++++----------- .../Views/View/ReactViewManager.cs | 3 +- 5 files changed, 119 insertions(+), 115 deletions(-) create mode 100644 ReactWindows/ReactNative/Themes/Generic.xaml diff --git a/ReactWindows/Playground/App.xaml b/ReactWindows/Playground/App.xaml index 33929dda240..7db4f2a909c 100644 --- a/ReactWindows/Playground/App.xaml +++ b/ReactWindows/Playground/App.xaml @@ -4,5 +4,12 @@ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Playground" RequestedTheme="Light"> + diff --git a/ReactWindows/ReactNative/ReactNative.csproj b/ReactWindows/ReactNative/ReactNative.csproj index 0be8d9a4354..93126fb8c90 100644 --- a/ReactWindows/ReactNative/ReactNative.csproj +++ b/ReactWindows/ReactNative/ReactNative.csproj @@ -293,6 +293,12 @@ ..\References\Facebook.CSSLayout.dll + + + MSBuild:Compile + Designer + + 14.0 diff --git a/ReactWindows/ReactNative/Themes/Generic.xaml b/ReactWindows/ReactNative/Themes/Generic.xaml new file mode 100644 index 00000000000..f107fcef29d --- /dev/null +++ b/ReactWindows/ReactNative/Themes/Generic.xaml @@ -0,0 +1,25 @@ + + + diff --git a/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs b/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs index 9c0f5f51500..27095039a45 100644 --- a/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs +++ b/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs @@ -12,6 +12,16 @@ namespace ReactNative.UIManager /// public class BorderedContentControl : ContentControl { + public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register("CornerRadius", + typeof(CornerRadius), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public CornerRadius CornerRadius + { + get { return (CornerRadius)GetValue(CornerRadiusProperty); } + set { SetValue(CornerRadiusProperty, value);} + } private static readonly SolidColorBrush s_defaultBorderBrush = new SolidColorBrush(Colors.Black); private Border _customBorder; @@ -20,15 +30,20 @@ public class BorderedContentControl : ContentControl private Border _customTopBorder; private Border _customBottomBorder; - /// - /// Instantiates the . - /// - /// The content. - public BorderedContentControl(object content) + public BorderedContentControl() { DefaultStyleKey = typeof(BorderedContentControl); BorderBrush = s_defaultBorderBrush; - base.Content = content; + //base.Content = content; + //CreateBorder(); // TODO: can we use the ContentControl border properties? + + + } + + protected override void OnApplyTemplate() + { + base.OnApplyTemplate(); + //Style = Application.Current.Resources[""]; } private bool HasCustomBorder @@ -43,49 +58,24 @@ private bool HasCustomBorder } } - /// - /// An intentional override of the - /// property that returns the child without any borders. - /// - public new UIElement Content - { - get - { - if (!HasCustomBorder) - { - return (UIElement)base.Content; - } - else if (_customBorder != null) - { - return _customBorder.Child; - } - else - { - return _customBottomBorder.Child; - } - } - } - - /// - /// Sets the border width. - /// - /// The width. - public void SetBorderWidth(double 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); - } - } + //public new UIElement Content + //{ + // get + // { + // if (!HasCustomBorder) + // { + // return (UIElement)base.Content; + // } + // else if (_customBorder != null) + // { + // return _customBorder.Child; + // } + // else + // { + // return _customBottomBorder.Child; + // } + // } + //} /// /// Sets the border width. @@ -94,54 +84,26 @@ public void SetBorderWidth(double width) /// The width. public void SetBorderWidth(CSSSpacingType kind, double width) { - if (kind == CSSSpacingType.All) - { - SetBorderWidth(width); - } - - EnsureBorder(); - - if (_customBorder != null) + var thickness = BorderThickness; + switch (kind) { - 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 - { - switch (kind) - { - case CSSSpacingType.Left: - _customLeftBorder.BorderThickness = new Thickness(width, 0, 0, 0); - break; - case CSSSpacingType.Top: - _customTopBorder.BorderThickness = new Thickness(0, width, 0, 0); - break; - case CSSSpacingType.Right: - _customRightBorder.BorderThickness = new Thickness(0, 0, width, 0); - break; - case CSSSpacingType.Bottom: - _customBottomBorder.BorderThickness = new Thickness(0, 0, 0, width); - break; - } + 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; } + BorderThickness = thickness; } /// @@ -213,26 +175,29 @@ public void SetBorderColor(CSSSpacingType kind, uint color) /// The radius. public void SetBorderRadius(double radius) { - var cornerRadius = new CornerRadius(radius); - - EnsureBorder(); + CornerRadius = new CornerRadius(radius); + //var cornerRadius = new CornerRadius(radius); + //if (!HasCustomBorder) + //{ + // CreateBorder(); + //} - if (_customBorder != null) - { - _customBorder.CornerRadius = cornerRadius; - } - else - { - Debug.Assert(_customLeftBorder != null); - Debug.Assert(_customTopBorder != null); - Debug.Assert(_customRightBorder != null); - Debug.Assert(_customBottomBorder != null); + //if (_customBorder != null) + //{ + // _customBorder.CornerRadius = cornerRadius; + //} + //else + //{ + // 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); - } + // _customLeftBorder.CornerRadius = cornerRadius; + // _customTopBorder.CornerRadius = cornerRadius; + // _customRightBorder.CornerRadius = cornerRadius; + // _customBottomBorder.CornerRadius = cornerRadius; + //} } private void EnsureBorder() @@ -248,7 +213,7 @@ private void EnsureBorder() _customBorder.BorderThickness = BorderThickness; _customBorder.BorderBrush = BorderBrush; base.Content = _customBorder; - _customBorder.Child = inner; + //_customBorder.Child = inner; } private void EnsureSideBorders() diff --git a/ReactWindows/ReactNative/Views/View/ReactViewManager.cs b/ReactWindows/ReactNative/Views/View/ReactViewManager.cs index 4e7c949448e..dc4d8acddaa 100644 --- a/ReactWindows/ReactNative/Views/View/ReactViewManager.cs +++ b/ReactWindows/ReactNative/Views/View/ReactViewManager.cs @@ -186,7 +186,8 @@ public void SetBorderColor(BorderedContentControl view, int index, uint? color) /// The view instance. protected override FrameworkElement CreateViewInstance(ThemedReactContext reactContext) { - return new BorderedContentControl(new ReactPanel()); + return new BorderedContentControl() { Content = new ReactPanel()}; + //return new BorderedContentControl(new ReactPanel()); } private ReactPanel GetPanel(FrameworkElement element) From b2d817465495cc8d4b3944d1f307bb58fb27258e Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Fri, 8 Jan 2016 18:02:55 -0600 Subject: [PATCH 04/16] work towards better layout --- .../ReactNative/UIManager/UIManagerModule.cs | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/ReactWindows/ReactNative/UIManager/UIManagerModule.cs b/ReactWindows/ReactNative/UIManager/UIManagerModule.cs index 62a4de3ef4f..a947499ebaa 100644 --- a/ReactWindows/ReactNative/UIManager/UIManagerModule.cs +++ b/ReactWindows/ReactNative/UIManager/UIManagerModule.cs @@ -419,25 +419,5 @@ public override void OnCatalystInstanceDispose() } #endregion -<<<<<<< 6e1916785e74e21985e2c4294dca78e20985ed2a -======= - - sealed class RootViewSizeChangedListener : ISizeChangedListener - { - public RootViewSizeChangedListener(UIManagerModule managerModule) - { - - } - - public void OnSizeChanged(object sender, SizeChangedEventArgs e) - { - //TODO: Need to adjust the styling of the panel based on the new - //width and height(e.NewSize). The adjustment needs to run on the - //Native Modules thread off the react context(this.Context.RunOnNativeModulesThread) - throw new NotImplementedException("Size change behavior for root view still needs to be implemented"); - } - } - ->>>>>>> work towards better layout } } From 88462b86d3bbae5d111048760ef47c2a65c1d2b9 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Sat, 9 Jan 2016 22:25:57 -0600 Subject: [PATCH 05/16] worked on borders a little - adding custom control theme template to handle setting custom border properties on BorderedContentControl. --- .../Playground/Resources/main.dev.jsbundle | 5 ++ .../UIManager/BorderedContentControl.cs | 54 +++++++++++++------ 2 files changed, 42 insertions(+), 17 deletions(-) diff --git a/ReactWindows/Playground/Resources/main.dev.jsbundle b/ReactWindows/Playground/Resources/main.dev.jsbundle index 3b2a79ee176..d14847d7663 100644 --- a/ReactWindows/Playground/Resources/main.dev.jsbundle +++ b/ReactWindows/Playground/Resources/main.dev.jsbundle @@ -1197,9 +1197,14 @@ React.createElement(View,{elevation:'1.0'}, React.createElement(View,{style:{marginLeft:20}}, React.createElement(View,{style:{borderLeftWidth:5,borderRightWidth:10,borderTopWidth:2, borderBottomWidth: 8}}, React.createElement(View,{style:{margin:10,borderWidth:10,borderRadius:5,borderLeftColor:'red',borderRightColor:'blue',borderTopColor:'yellow',borderBottomColor:'green'}}, +<<<<<<< b2d817465495cc8d4b3944d1f307bb58fb27258e React.createElement(View,{style:{padding:10,flexDirection:'row'}}, React.createElement(Switch,null), React.createElement(Text,{style:{color:'orange',flex:1}},"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.")))))));}}); +======= +React.createElement(View,{style:{padding:10}}, +React.createElement(Text,{style:{color:'orange'}},"Hello React Native")))))));}}); +>>>>>>> worked on borders a little - adding custom control theme template to handle setting custom border properties on BorderedContentControl. diff --git a/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs b/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs index 27095039a45..022ddf17ed3 100644 --- a/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs +++ b/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs @@ -12,16 +12,17 @@ namespace ReactNative.UIManager /// public class BorderedContentControl : ContentControl { - public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register("CornerRadius", - typeof(CornerRadius), - typeof(BorderedContentControl), + public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register("CornerRadius", + typeof (CornerRadius), + typeof (BorderedContentControl), new PropertyMetadata(null)); public CornerRadius CornerRadius { - get { return (CornerRadius)GetValue(CornerRadiusProperty); } - set { SetValue(CornerRadiusProperty, value);} + get { return (CornerRadius) GetValue(CornerRadiusProperty); } + set { SetValue(CornerRadiusProperty, value); } } + private static readonly SolidColorBrush s_defaultBorderBrush = new SolidColorBrush(Colors.Black); private Border _customBorder; @@ -32,18 +33,14 @@ public CornerRadius CornerRadius public BorderedContentControl() { - DefaultStyleKey = typeof(BorderedContentControl); + DefaultStyleKey = typeof (BorderedContentControl); BorderBrush = s_defaultBorderBrush; - //base.Content = content; - //CreateBorder(); // TODO: can we use the ContentControl border properties? - } protected override void OnApplyTemplate() { base.OnApplyTemplate(); - //Style = Application.Current.Resources[""]; } private bool HasCustomBorder @@ -51,10 +48,10 @@ private bool HasCustomBorder get { return _customBorder != null || - _customLeftBorder != null || - _customRightBorder != null || - _customTopBorder != null || - _customBottomBorder != null; + _customLeftBorder != null || + _customRightBorder != null || + _customTopBorder != null || + _customBottomBorder != null; } } @@ -84,7 +81,7 @@ private bool HasCustomBorder /// The width. public void SetBorderWidth(CSSSpacingType kind, double width) { - var thickness = BorderThickness; + var thickness = _customBorder.BorderThickness; switch (kind) { case CSSSpacingType.Left: @@ -103,10 +100,33 @@ public void SetBorderWidth(CSSSpacingType kind, double width) thickness = new Thickness(width); break; } - BorderThickness = thickness; + //var thickness = 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; } - /// + //BorderThickness = thickness; + } +} + +/// /// Sets the border color. /// /// The masked color. From b92487f9dc6d29867828f949e75f96d52477206b Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Tue, 12 Jan 2016 13:59:29 -0600 Subject: [PATCH 06/16] work on borders --- ReactWindows/ReactNative/Themes/Generic.xaml | 40 +- .../UIManager/BorderedContentControl.cs | 483 ++++++++++++------ 2 files changed, 350 insertions(+), 173 deletions(-) diff --git a/ReactWindows/ReactNative/Themes/Generic.xaml b/ReactWindows/ReactNative/Themes/Generic.xaml index f107fcef29d..389a9ed6e7d 100644 --- a/ReactWindows/ReactNative/Themes/Generic.xaml +++ b/ReactWindows/ReactNative/Themes/Generic.xaml @@ -8,16 +8,48 @@ - + + + + + - + diff --git a/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs b/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs index 022ddf17ed3..7c5706264f2 100644 --- a/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs +++ b/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs @@ -1,5 +1,6 @@ using Facebook.CSSLayout; using System.Diagnostics; +using Windows.Foundation; using Windows.UI; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; @@ -12,16 +13,199 @@ namespace ReactNative.UIManager /// public class BorderedContentControl : ContentControl { + #region DependencyProperties public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register("CornerRadius", - typeof (CornerRadius), - typeof (BorderedContentControl), + typeof(CornerRadius), + typeof(BorderedContentControl), new PropertyMetadata(null)); public CornerRadius CornerRadius { - get { return (CornerRadius) GetValue(CornerRadiusProperty); } + get { return (CornerRadius)GetValue(CornerRadiusProperty); } set { SetValue(CornerRadiusProperty, value); } } + #region Left Border + public static readonly DependencyProperty LeftBorderGeometryProperty = DependencyProperty.Register("LeftBorderGeometry", + typeof(GeometryGroup), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public GeometryGroup LeftBorderGeometry + { + get { return (GeometryGroup)GetValue(LeftBorderGeometryProperty); } + set { SetValue(LeftBorderGeometryProperty, value); } + } + public static readonly DependencyProperty LeftStartPointProperty = DependencyProperty.Register("LeftStartPoint", + typeof(Point), + typeof(BorderedContentControl), + new PropertyMetadata(new Point())); + + public Point LeftStartPoint + { + get { return (Point)GetValue(LeftStartPointProperty); } + set { SetValue(LeftStartPointProperty, value); } + } + + public static readonly DependencyProperty LeftEndPointProperty = DependencyProperty.Register("LeftEndPoint", + typeof(Point), + typeof(BorderedContentControl), + new PropertyMetadata(new Point())); + + public Point LeftEndPoint + { + get { return (Point)GetValue(LeftEndPointProperty); } + set { SetValue(LeftEndPointProperty, value); } + } + + //public static readonly DependencyProperty LeftCornerRadiusProperty = DependencyProperty.Register("LeftCornerRadius", + // typeof(CornerRadius), + // typeof(BorderedContentControl), + // new PropertyMetadata(null)); + + //public CornerRadius LeftCornerRadius + //{ + // get { return (CornerRadius)GetValue(LeftCornerRadiusProperty); } + // set { SetValue(LeftCornerRadiusProperty, value); } + //} + + //public static readonly DependencyProperty LeftBorderThicknessProperty = DependencyProperty.Register("LeftBorderThickness", + // typeof(Thickness), + // typeof(BorderedContentControl), + // new PropertyMetadata(null)); + + //public Thickness LeftBorderThickness + //{ + // get { return (Thickness)GetValue(LeftBorderThicknessProperty); } + // set { SetValue(LeftBorderThicknessProperty, value); } + //} + public static readonly DependencyProperty LeftBorderThicknessProperty = DependencyProperty.Register("LeftBorderThickness", + typeof(double), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public double LeftBorderThickness + { + get { return (double)GetValue(LeftBorderThicknessProperty); } + set { SetValue(LeftBorderThicknessProperty, value); } + } + + public static readonly DependencyProperty LeftBorderBrushProperty = DependencyProperty.Register("LeftBorderBrush", + typeof(Brush), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public Brush LeftBorderBrush + { + get { return (Brush)GetValue(LeftBorderBrushProperty); } + set { SetValue(LeftBorderBrushProperty, value); } + } + #endregion + + #region TopBorder + public static readonly DependencyProperty TopCornerRadiusProperty = DependencyProperty.Register("TopCornerRadius", + typeof(CornerRadius), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public CornerRadius TopCornerRadius + { + get { return (CornerRadius)GetValue(TopCornerRadiusProperty); } + set { SetValue(TopCornerRadiusProperty, value); } + } + + public static readonly DependencyProperty TopBorderThicknessProperty = DependencyProperty.Register("TopBorderThickness", + typeof(Thickness), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public Thickness TopBorderThickness + { + get { return (Thickness)GetValue(TopBorderThicknessProperty); } + set { SetValue(TopBorderThicknessProperty, value); } + } + + public static readonly DependencyProperty TopBorderBrushProperty = DependencyProperty.Register("TopBorderBrush", + typeof(Brush), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public Brush TopBorderBrush + { + get { return (Brush)GetValue(TopBorderBrushProperty); } + set { SetValue(TopBorderBrushProperty, value); } + } + #endregion + + #region RightBorder + public static readonly DependencyProperty RightCornerRadiusProperty = DependencyProperty.Register("RightCornerRadius", + typeof(CornerRadius), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public CornerRadius RightCornerRadius + { + get { return (CornerRadius)GetValue(RightCornerRadiusProperty); } + set { SetValue(RightCornerRadiusProperty, value); } + } + + public static readonly DependencyProperty RightBorderThicknessProperty = DependencyProperty.Register("RightBorderThickness", + typeof(Thickness), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public Thickness RightBorderThickness + { + get { return (Thickness)GetValue(RightBorderThicknessProperty); } + set { SetValue(RightBorderThicknessProperty, value); } + } + + public static readonly DependencyProperty RightBorderBrushProperty = DependencyProperty.Register("RightBorderBrush", + typeof(Brush), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public Brush RightBorderBrush + { + get { return (Brush)GetValue(RightBorderBrushProperty); } + set { SetValue(RightBorderBrushProperty, value); } + } + #endregion + + #region BottomBorder + public static readonly DependencyProperty BottomCornerRadiusProperty = DependencyProperty.Register("BottomCornerRadius", + typeof(CornerRadius), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public CornerRadius BottomCornerRadius + { + get { return (CornerRadius)GetValue(BottomCornerRadiusProperty); } + set { SetValue(BottomCornerRadiusProperty, value); } + } + + public static readonly DependencyProperty BottomBorderThicknessProperty = DependencyProperty.Register("BottomBorderThickness", + typeof(Thickness), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public Thickness BottomBorderThickness + { + get { return (Thickness)GetValue(BottomBorderThicknessProperty); } + set { SetValue(BottomBorderThicknessProperty, value); } + } + + public static readonly DependencyProperty BottomBorderBrushProperty = DependencyProperty.Register("BottomBorderBrush", + typeof(Brush), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public Brush BottomBorderBrush + { + get { return (Brush)GetValue(BottomBorderBrushProperty); } + set { SetValue(BottomBorderBrushProperty, value); } + } + #endregion + #endregion private static readonly SolidColorBrush s_defaultBorderBrush = new SolidColorBrush(Colors.Black); @@ -31,11 +215,30 @@ public CornerRadius CornerRadius private Border _customTopBorder; private Border _customBottomBorder; + /// + /// Instantiates the . + /// + /// The content. public BorderedContentControl() { DefaultStyleKey = typeof (BorderedContentControl); BorderBrush = s_defaultBorderBrush; + SizeChanged += BorderedContentControl_SizeChanged; + } + + private void BorderedContentControl_SizeChanged(object sender, SizeChangedEventArgs e) + { + LayoutBorderGeometry(e.NewSize); + } + private void LayoutBorderGeometry(Size newSize) + { + //LeftStartPoint = new Point(LeftBorderThickness / 2, 0); + //LeftEndPoint = new Point(LeftBorderThickness / 2, newSize.Height); + var leftGeometry = new GeometryGroup(); + leftGeometry.Children.Add(new EllipseGeometry() { Center = new Point(LeftBorderThickness, TopBorderThickness.Top), RadiusX = CornerRadius.TopLeft, RadiusY = CornerRadius.BottomLeft}); + leftGeometry.Children.Add(new LineGeometry() {StartPoint = new Point(LeftBorderThickness / 2, 0 + CornerRadius.TopLeft), EndPoint = new Point(LeftBorderThickness / 2, newSize.Height - CornerRadius.BottomLeft)}); + LeftBorderGeometry = leftGeometry; } protected override void OnApplyTemplate() @@ -55,6 +258,10 @@ private bool HasCustomBorder } } + ///// + ///// An intentional override of the + ///// property that returns the child without any borders. + ///// //public new UIElement Content //{ // get @@ -74,6 +281,35 @@ private bool HasCustomBorder // } //} + /// + /// Sets the border width. + /// + /// The width. + public void SetBorderWidth(double width) + { + LeftBorderThickness = width; + TopBorderThickness = new Thickness(0, width, 0, 0); + RightBorderThickness = new Thickness(0, 0, width, 0); + BottomBorderThickness = new Thickness(0, 0, 0, width); + //LeftBorderThickness = new Thickness(width, 0, 0, 0); + //TopBorderThickness = new Thickness(0, width, 0, 0); + //RightBorderThickness = new Thickness(0, 0, width, 0); + //BottomBorderThickness = new Thickness(0, 0, 0, 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); + //} + } + /// /// Sets the border width. /// @@ -100,184 +336,93 @@ public void SetBorderWidth(CSSSpacingType kind, double width) thickness = new Thickness(width); break; } - //var thickness = 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; - } - - //BorderThickness = thickness; - } -} - -/// - /// Sets the border color. - /// - /// The masked color. - public void SetBorderColor(uint color) - { - EnsureBorder(); - var brush = new SolidColorBrush(ColorHelpers.Parse(color)); - - if (_customBorder != null) - { - _customBorder.BorderBrush = brush; - } - else + switch (kind) { - 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; + case CSSSpacingType.Left: + //LeftBorderThickness = new Thickness(width, 0, 0, 0); + LeftBorderThickness = width; + break; + case CSSSpacingType.Top: + TopBorderThickness = new Thickness(0, width, 0, 0); + break; + case CSSSpacingType.Right: + RightBorderThickness = new Thickness(0, 0, width, 0); + break; + case CSSSpacingType.Bottom: + BottomBorderThickness = new Thickness(0, 0, 0, width); + break; + case CSSSpacingType.All: + SetBorderWidth(width); + break; } - } - /// - /// Sets the border color. - /// - /// The width specification. - /// The masked color. - public void SetBorderColor(CSSSpacingType kind, uint color) - { - if (kind == CSSSpacingType.All) - { - SetBorderColor(color); - } - else - { - var brush = new SolidColorBrush(ColorHelpers.Parse(color)); - - EnsureSideBorders(); - - switch (kind) - { - case CSSSpacingType.Left: - _customLeftBorder.BorderBrush = brush; - break; - case CSSSpacingType.Top: - _customTopBorder.BorderBrush = brush; - break; - case CSSSpacingType.Right: - _customRightBorder.BorderBrush = brush; - break; - case CSSSpacingType.Bottom: - _customBottomBorder.BorderBrush = brush; - break; - } - } - } + //EnsureBorder(); - /// - /// Sets the border radius. - /// - /// The radius. - public void SetBorderRadius(double radius) - { - CornerRadius = new CornerRadius(radius); - //var cornerRadius = new CornerRadius(radius); - //if (!HasCustomBorder) - //{ - // CreateBorder(); - //} - //if (_customBorder != null) //{ - // _customBorder.CornerRadius = cornerRadius; + // 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; + // } + // //var thickness = 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 //{ - // Debug.Assert(_customLeftBorder != null); - // Debug.Assert(_customTopBorder != null); - // Debug.Assert(_customRightBorder != null); - // Debug.Assert(_customBottomBorder != null); - - // _customLeftBorder.CornerRadius = cornerRadius; - // _customTopBorder.CornerRadius = cornerRadius; - // _customRightBorder.CornerRadius = cornerRadius; - // _customBottomBorder.CornerRadius = cornerRadius; + // switch (kind) + // { + // case CSSSpacingType.Left: + // _customLeftBorder.BorderThickness = new Thickness(width, 0, 0, 0); + // break; + // case CSSSpacingType.Top: + // _customTopBorder.BorderThickness = new Thickness(0, width, 0, 0); + // break; + // case CSSSpacingType.Right: + // _customRightBorder.BorderThickness = new Thickness(0, 0, width, 0); + // break; + // case CSSSpacingType.Bottom: + // _customBottomBorder.BorderThickness = new Thickness(0, 0, 0, width); + // break; + // } //} - } - private void EnsureBorder() - { - if (HasCustomBorder) - { - return; - } - - var inner = Content; - base.Content = null; - _customBorder = new Border(); - _customBorder.BorderThickness = BorderThickness; - _customBorder.BorderBrush = BorderBrush; - base.Content = _customBorder; - //_customBorder.Child = inner; + //BorderThickness = thickness; } - private void EnsureSideBorders() - { - if (HasCustomBorder && _customBorder == null) - { - return; - } - - _customLeftBorder = new Border(); - _customRightBorder = new Border(); - _customTopBorder = new Border(); - _customBottomBorder = new Border(); - - _customLeftBorder.Child = _customTopBorder; - _customTopBorder.Child = _customRightBorder; - _customRightBorder.Child = _customBottomBorder; - - 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; - - if (_customBorder != null) - { - _customBorder.Child = null; - _customBorder = null; - } - - _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; - } + //BorderThickness = thickness; } -} +} \ No newline at end of file From 559470e54b98d8fd487f9d581cb82488c3f44a0f Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Tue, 19 Jan 2016 10:33:33 -0600 Subject: [PATCH 07/16] some more changes for Borders --- .../Playground/Resources/main.dev.jsbundle | 5 - ReactWindows/ReactNative/Themes/Generic.xaml | 44 +- .../UIManager/BorderedContentControl.cs | 489 ++++++++++++++---- 3 files changed, 397 insertions(+), 141 deletions(-) diff --git a/ReactWindows/Playground/Resources/main.dev.jsbundle b/ReactWindows/Playground/Resources/main.dev.jsbundle index d14847d7663..3b2a79ee176 100644 --- a/ReactWindows/Playground/Resources/main.dev.jsbundle +++ b/ReactWindows/Playground/Resources/main.dev.jsbundle @@ -1197,14 +1197,9 @@ React.createElement(View,{elevation:'1.0'}, React.createElement(View,{style:{marginLeft:20}}, React.createElement(View,{style:{borderLeftWidth:5,borderRightWidth:10,borderTopWidth:2, borderBottomWidth: 8}}, React.createElement(View,{style:{margin:10,borderWidth:10,borderRadius:5,borderLeftColor:'red',borderRightColor:'blue',borderTopColor:'yellow',borderBottomColor:'green'}}, -<<<<<<< b2d817465495cc8d4b3944d1f307bb58fb27258e React.createElement(View,{style:{padding:10,flexDirection:'row'}}, React.createElement(Switch,null), React.createElement(Text,{style:{color:'orange',flex:1}},"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec.")))))));}}); -======= -React.createElement(View,{style:{padding:10}}, -React.createElement(Text,{style:{color:'orange'}},"Hello React Native")))))));}}); ->>>>>>> worked on borders a little - adding custom control theme template to handle setting custom border properties on BorderedContentControl. diff --git a/ReactWindows/ReactNative/Themes/Generic.xaml b/ReactWindows/ReactNative/Themes/Generic.xaml index 389a9ed6e7d..f07492299cf 100644 --- a/ReactWindows/ReactNative/Themes/Generic.xaml +++ b/ReactWindows/ReactNative/Themes/Generic.xaml @@ -9,39 +9,25 @@ - - + + + + + + /// Instantiates the . /// @@ -233,31 +199,186 @@ private void BorderedContentControl_SizeChanged(object sender, SizeChangedEventA private void LayoutBorderGeometry(Size newSize) { - //LeftStartPoint = new Point(LeftBorderThickness / 2, 0); - //LeftEndPoint = new Point(LeftBorderThickness / 2, newSize.Height); + var upperLeftLowerPoint = new Point(LeftBorderThickness / 2, TopBorderThickness + CornerRadius.TopLeft); + var upperLeftUpperPoint = new Point(LeftBorderThickness + CornerRadius.TopLeft, TopBorderThickness / 2); + var upperLeftCenterPoint = new Point(CornerRadius.TopLeft * 2, CornerRadius.TopLeft * 2); + var upperRightUpperPoint = new Point(newSize.Width - RightBorderThickness - CornerRadius.TopRight, TopBorderThickness / 2); + var upperRightLowerPoint = new Point(newSize.Width - (RightBorderThickness / 2), TopBorderThickness + CornerRadius.TopRight); + var upperRightCenterPoint = new Point(newSize.Width - CornerRadius.TopRight * 2, CornerRadius.TopRight * 2); + var lowerRightUpperPoint = new Point(newSize.Width - (RightBorderThickness / 2), newSize.Height - BottomBorderThickness - CornerRadius.BottomRight); + var lowerRigthLowerPoint = new Point(newSize.Width - RightBorderThickness - CornerRadius.BottomRight, newSize.Height - (BottomBorderThickness / 2)); + var lowerRightCenterPoint = new Point(newSize.Width - (CornerRadius.BottomRight * 2), newSize.Height - (CornerRadius.BottomRight * 2)); + var lowerLeftLowerPoint = new Point(LeftBorderThickness + CornerRadius.BottomLeft, newSize.Height - (BottomBorderThickness / 2)); + var lowerLeftUpperPoint = new Point(LeftBorderThickness / 2, newSize.Height - BottomBorderThickness - CornerRadius.BottomLeft); + var lowerLeftCenterPoint = new Point((CornerRadius.BottomLeft * 2), newSize.Height - (CornerRadius.BottomLeft * 2)); + + // left geometry var leftGeometry = new GeometryGroup(); - leftGeometry.Children.Add(new EllipseGeometry() { Center = new Point(LeftBorderThickness, TopBorderThickness.Top), RadiusX = CornerRadius.TopLeft, RadiusY = CornerRadius.BottomLeft}); - leftGeometry.Children.Add(new LineGeometry() {StartPoint = new Point(LeftBorderThickness / 2, 0 + CornerRadius.TopLeft), EndPoint = new Point(LeftBorderThickness / 2, newSize.Height - CornerRadius.BottomLeft)}); + + // upper left lower corner + leftGeometry.Children.Add(new PathGeometry + { + Figures = CreateFiguresForCorner(upperLeftLowerPoint, + upperLeftUpperPoint, + upperLeftCenterPoint, + CornerRadius.TopLeft, SweepDirection.Clockwise) + }); + + leftGeometry.Children.Add(new LineGeometry() {StartPoint = upperLeftLowerPoint, + EndPoint = lowerLeftUpperPoint + }); + + // lower left upper half + leftGeometry.Children.Add(new PathGeometry + { + Figures = CreateFiguresForCorner(lowerLeftUpperPoint, + lowerLeftLowerPoint, + lowerLeftCenterPoint, + CornerRadius.BottomLeft, SweepDirection.Counterclockwise) + }); + LeftBorderGeometry = leftGeometry; + + // top geometry + var topGeometry = new GeometryGroup(); + + // upper left upper half + topGeometry.Children.Add(new PathGeometry + { + Figures = CreateFiguresForCorner(upperLeftUpperPoint, + upperLeftLowerPoint, + upperLeftCenterPoint, + CornerRadius.TopLeft, SweepDirection.Counterclockwise) + }); + + topGeometry.Children.Add(new LineGeometry() + { + StartPoint = upperLeftUpperPoint, + EndPoint = upperRightUpperPoint + }); + + // upper right upper half + topGeometry.Children.Add(new PathGeometry + { + Figures = CreateFiguresForCorner(upperRightUpperPoint, + upperRightLowerPoint, + upperRightCenterPoint, + CornerRadius.TopRight, SweepDirection.Clockwise) + }); + + TopBorderGeometry = topGeometry; + + // right geometry + var rightGeometry = new GeometryGroup(); + + //upper right lower half + rightGeometry.Children.Add(new PathGeometry + { + Figures = CreateFiguresForCorner(upperRightLowerPoint, + upperRightUpperPoint, + upperRightCenterPoint, + CornerRadius.TopRight, SweepDirection.Counterclockwise) + }); + + rightGeometry.Children.Add(new LineGeometry() + { + StartPoint = upperRightLowerPoint, + EndPoint = lowerRightUpperPoint + }); + + // lower right upper half + rightGeometry.Children.Add(new PathGeometry + { + Figures = CreateFiguresForCorner(lowerRightUpperPoint, + lowerRigthLowerPoint, + lowerRightCenterPoint, + CornerRadius.BottomRight, SweepDirection.Clockwise) + }); + + RightBorderGeometry = rightGeometry; + + // bottom geometry + var bottomGeometry = new GeometryGroup(); + + //lower right lower half + bottomGeometry.Children.Add(new PathGeometry + { + Figures = CreateFiguresForCorner(lowerRigthLowerPoint, + lowerRightUpperPoint, + lowerRightCenterPoint, + CornerRadius.BottomRight, SweepDirection.Counterclockwise) + }); + + bottomGeometry.Children.Add(new LineGeometry() + { + StartPoint = lowerRigthLowerPoint, + EndPoint = lowerLeftLowerPoint + }); + + // lower left lower half + bottomGeometry.Children.Add(new PathGeometry + { + Figures = CreateFiguresForCorner(lowerLeftLowerPoint, + lowerLeftUpperPoint, + lowerLeftCenterPoint, + CornerRadius.BottomLeft, SweepDirection.Clockwise) + }); + + BottomBorderGeometry = bottomGeometry; } - protected override void OnApplyTemplate() + private PathFigureCollection CreateFiguresForCorner(Point startPoint, Point endPoint, Point centerPoint, double radius, SweepDirection sweepDirection) { - base.OnApplyTemplate(); + var figures = new PathFigureCollection(); + var figure = new PathFigure() {StartPoint = startPoint }; + if (radius > 0) + { + figure.Segments.Add(GetArcSegment(startPoint, endPoint, centerPoint, radius, sweepDirection)); + } + else + { + figure.Segments.Add(new LineSegment() { Point = endPoint}); + } + figures.Add(figure); + return figures; } - private bool HasCustomBorder + private ArcSegment GetArcSegment(Point startPoint, Point endPoint, Point centerPoint, double radius, SweepDirection sweepDirection) { - get + return new ArcSegment() { - return _customBorder != null || - _customLeftBorder != null || - _customRightBorder != null || - _customTopBorder != null || - _customBottomBorder != null; - } + 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); } + protected override void OnApplyTemplate() + { + base.OnApplyTemplate(); + } + + //private bool HasCustomBorder + //{ + // get + // { + // return _customBorder != null || + // _customLeftBorder != null || + // _customRightBorder != null || + // _customTopBorder != null || + // _customBottomBorder != null; + // } + //} + ///// ///// An intentional override of the ///// property that returns the child without any borders. @@ -288,9 +409,10 @@ private bool HasCustomBorder public void SetBorderWidth(double width) { LeftBorderThickness = width; - TopBorderThickness = new Thickness(0, width, 0, 0); - RightBorderThickness = new Thickness(0, 0, width, 0); - BottomBorderThickness = new Thickness(0, 0, 0, width); + TopBorderThickness = width; + RightBorderThickness = width; + BottomBorderThickness = width; + //LeftBorderThickness = new Thickness(width, 0, 0, 0); //TopBorderThickness = new Thickness(0, width, 0, 0); //RightBorderThickness = new Thickness(0, 0, width, 0); @@ -317,40 +439,27 @@ public void SetBorderWidth(double width) /// The width. public void SetBorderWidth(CSSSpacingType kind, double width) { - var thickness = _customBorder.BorderThickness; - switch (kind) + if (kind == CSSSpacingType.All) { - 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; + } switch (kind) { case CSSSpacingType.Left: - //LeftBorderThickness = new Thickness(width, 0, 0, 0); LeftBorderThickness = width; break; case CSSSpacingType.Top: - TopBorderThickness = new Thickness(0, width, 0, 0); + //TopBorderThickness = new Thickness(0, width, 0, 0); + TopBorderThickness = width; break; case CSSSpacingType.Right: - RightBorderThickness = new Thickness(0, 0, width, 0); + //RightBorderThickness = new Thickness(0, 0, width, 0); + RightBorderThickness = width; break; case CSSSpacingType.Bottom: - BottomBorderThickness = new Thickness(0, 0, 0, width); + //BottomBorderThickness = new Thickness(0, 0, 0, width); + BottomBorderThickness = width; break; case CSSSpacingType.All: SetBorderWidth(width); @@ -423,6 +532,172 @@ public void SetBorderWidth(CSSSpacingType kind, double width) //BorderThickness = thickness; } - //BorderThickness = thickness; + /// + /// Sets the border color. + /// + /// The masked color. + 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; + //} + } + + /// + /// Sets the border color. + /// + /// The width specification. + /// The masked color. + public void SetBorderColor(CSSSpacingType kind, uint color) + { + if (kind == CSSSpacingType.All) + { + SetBorderColor(color); + } + else + { + var brush = new SolidColorBrush(ColorHelpers.Parse(color)); + + //EnsureSideBorders(); + + switch (kind) + { + case CSSSpacingType.Left: + //_customLeftBorder.BorderBrush = brush; + LeftBorderBrush = brush; + break; + case CSSSpacingType.Top: + //_customTopBorder.BorderBrush = brush; + TopBorderBrush = brush; + break; + case CSSSpacingType.Right: + //_customRightBorder.BorderBrush = brush; + RightBorderBrush = brush; + break; + case CSSSpacingType.Bottom: + //_customBottomBorder.BorderBrush = brush; + BottomBorderBrush = brush; + break; + } + } + } + + /// + /// Sets the border radius. + /// + /// The radius. + public void SetBorderRadius(double radius) + { + CornerRadius = new CornerRadius(radius); + + //CornerRadius = new CornerRadius(radius); + //var cornerRadius = new CornerRadius(radius); + + //EnsureBorder(); + + //var cornerRadius = new CornerRadius(radius); + //if (!HasCustomBorder) + //{ + // CreateBorder(); + //} + + //if (_customBorder != null) + //{ + // _customBorder.CornerRadius = cornerRadius; + //} + //else + //{ + // //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); + //} + } + + //private void EnsureBorder() + //{ + // if (HasCustomBorder) + // { + // return; + // } + + // var inner = Content; + // base.Content = null; + // _customBorder = new Border(); + // _customBorder.BorderThickness = BorderThickness; + // _customBorder.BorderBrush = BorderBrush; + // base.Content = _customBorder; + // //_customBorder.Child = inner; + //} + + //private void EnsureSideBorders() + //{ + // if (HasCustomBorder && _customBorder == null) + // { + // return; + // } + + // _customLeftBorder = new Border(); + // _customRightBorder = new Border(); + // _customTopBorder = new Border(); + // _customBottomBorder = new Border(); + + // _customLeftBorder.Child = _customTopBorder; + // _customTopBorder.Child = _customRightBorder; + // _customRightBorder.Child = _customBottomBorder; + + // 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; + + // if (_customBorder != null) + // { + // _customBorder.Child = null; + // _customBorder = null; + // } + + // _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 From aa9fcd8dd74eb9794971a413c5d2e51491340f74 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Tue, 19 Jan 2016 12:01:20 -0600 Subject: [PATCH 08/16] fixes for corner radius geometry --- .../UIManager/BorderedContentControl.cs | 332 +++--------------- 1 file changed, 44 insertions(+), 288 deletions(-) diff --git a/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs b/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs index 88754b7e0a5..c77013ee7b2 100644 --- a/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs +++ b/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs @@ -53,7 +53,7 @@ public double LeftBorderThickness public static readonly DependencyProperty LeftBorderBrushProperty = DependencyProperty.Register("LeftBorderBrush", typeof(Brush), typeof(BorderedContentControl), - new PropertyMetadata(null)); + new PropertyMetadata(new SolidColorBrush(Colors.Black))); public Brush LeftBorderBrush { @@ -88,7 +88,7 @@ public double TopBorderThickness public static readonly DependencyProperty TopBorderBrushProperty = DependencyProperty.Register("TopBorderBrush", typeof(Brush), typeof(BorderedContentControl), - new PropertyMetadata(null)); + new PropertyMetadata(new SolidColorBrush(Colors.Black))); public Brush TopBorderBrush { @@ -123,7 +123,7 @@ public double RightBorderThickness public static readonly DependencyProperty RightBorderBrushProperty = DependencyProperty.Register("RightBorderBrush", typeof(Brush), typeof(BorderedContentControl), - new PropertyMetadata(null)); + new PropertyMetadata(new SolidColorBrush(Colors.Black))); public Brush RightBorderBrush { @@ -158,7 +158,7 @@ public double BottomBorderThickness public static readonly DependencyProperty BottomBorderBrushProperty = DependencyProperty.Register("BottomBorderBrush", typeof(Brush), typeof(BorderedContentControl), - new PropertyMetadata(null)); + new PropertyMetadata(new SolidColorBrush(Colors.Black))); public Brush BottomBorderBrush { @@ -168,27 +168,12 @@ public Brush BottomBorderBrush #endregion #endregion - 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; - - private double _leftBorderThickness; - private double _topBorderThickness; - private double _rightBorderThickness; - private double _bottomBorderThickness; - /// /// Instantiates the . /// - /// The content. public BorderedContentControl() { - DefaultStyleKey = typeof (BorderedContentControl); - BorderBrush = s_defaultBorderBrush; + DefaultStyleKey = typeof(BorderedContentControl); SizeChanged += BorderedContentControl_SizeChanged; } @@ -199,18 +184,21 @@ private void BorderedContentControl_SizeChanged(object sender, SizeChangedEventA private void LayoutBorderGeometry(Size newSize) { - var upperLeftLowerPoint = new Point(LeftBorderThickness / 2, TopBorderThickness + CornerRadius.TopLeft); - var upperLeftUpperPoint = new Point(LeftBorderThickness + CornerRadius.TopLeft, TopBorderThickness / 2); - var upperLeftCenterPoint = new Point(CornerRadius.TopLeft * 2, CornerRadius.TopLeft * 2); - var upperRightUpperPoint = new Point(newSize.Width - RightBorderThickness - CornerRadius.TopRight, TopBorderThickness / 2); - var upperRightLowerPoint = new Point(newSize.Width - (RightBorderThickness / 2), TopBorderThickness + CornerRadius.TopRight); - var upperRightCenterPoint = new Point(newSize.Width - CornerRadius.TopRight * 2, CornerRadius.TopRight * 2); - var lowerRightUpperPoint = new Point(newSize.Width - (RightBorderThickness / 2), newSize.Height - BottomBorderThickness - CornerRadius.BottomRight); - var lowerRigthLowerPoint = new Point(newSize.Width - RightBorderThickness - CornerRadius.BottomRight, newSize.Height - (BottomBorderThickness / 2)); - var lowerRightCenterPoint = new Point(newSize.Width - (CornerRadius.BottomRight * 2), newSize.Height - (CornerRadius.BottomRight * 2)); - var lowerLeftLowerPoint = new Point(LeftBorderThickness + CornerRadius.BottomLeft, newSize.Height - (BottomBorderThickness / 2)); - var lowerLeftUpperPoint = new Point(LeftBorderThickness / 2, newSize.Height - BottomBorderThickness - CornerRadius.BottomLeft); - var lowerLeftCenterPoint = new Point((CornerRadius.BottomLeft * 2), newSize.Height - (CornerRadius.BottomLeft * 2)); + var upperLeftLowerPoint = new Point(LeftBorderThickness / 2, (TopBorderThickness / 2) + CornerRadius.TopLeft); + var upperLeftUpperPoint = new Point((LeftBorderThickness / 2) + CornerRadius.TopLeft, TopBorderThickness / 2); + var upperLeftCenterPoint = new Point((LeftBorderThickness / 2) + CornerRadius.TopLeft, (TopBorderThickness / 2) + CornerRadius.TopLeft); + + var upperRightUpperPoint = new Point(newSize.Width - ((RightBorderThickness / 2) + CornerRadius.TopRight), TopBorderThickness / 2); + var upperRightLowerPoint = new Point(newSize.Width - (RightBorderThickness / 2), (TopBorderThickness / 2) + CornerRadius.TopRight); + var upperRightCenterPoint = new Point(newSize.Width - ((RightBorderThickness / 2) + CornerRadius.TopRight), (TopBorderThickness / 2) + CornerRadius.TopRight); + + var lowerRightUpperPoint = new Point(newSize.Width - (RightBorderThickness / 2), newSize.Height - ((BottomBorderThickness / 2) + CornerRadius.BottomRight)); + var lowerRigthLowerPoint = new Point(newSize.Width - ((RightBorderThickness / 2) + CornerRadius.BottomRight), newSize.Height - (BottomBorderThickness / 2)); + var lowerRightCenterPoint = new Point(newSize.Width - ((RightBorderThickness / 2) + CornerRadius.BottomRight), newSize.Height - ((BottomBorderThickness / 2) + CornerRadius.BottomRight)); + + var lowerLeftLowerPoint = new Point((LeftBorderThickness / 2) + CornerRadius.BottomLeft, newSize.Height - (BottomBorderThickness / 2)); + var lowerLeftUpperPoint = new Point(LeftBorderThickness / 2, newSize.Height - ((BottomBorderThickness / 2) + CornerRadius.BottomLeft)); + var lowerLeftCenterPoint = new Point((LeftBorderThickness / 2) + CornerRadius.TopLeft, newSize.Height - ((BottomBorderThickness / 2) + CornerRadius.BottomRight)); // left geometry var leftGeometry = new GeometryGroup(); @@ -338,6 +326,7 @@ private PathFigureCollection CreateFiguresForCorner(Point startPoint, Point endP else { figure.Segments.Add(new LineSegment() { Point = endPoint}); + //figure.Segments.Add(new QuadraticBezierSegment() { Point1 = startPoint, Point2 = endPoint}); } figures.Add(figure); return figures; @@ -362,46 +351,6 @@ private Point GetArcMidPoint(Vector2 a, Vector2 b, Vector2 center, float radius) return new Point(center.X + m.X, center.Y + m.Y); } - protected override void OnApplyTemplate() - { - base.OnApplyTemplate(); - } - - //private bool HasCustomBorder - //{ - // get - // { - // return _customBorder != null || - // _customLeftBorder != null || - // _customRightBorder != null || - // _customTopBorder != null || - // _customBottomBorder != null; - // } - //} - - ///// - ///// An intentional override of the - ///// property that returns the child without any borders. - ///// - //public new UIElement Content - //{ - // get - // { - // if (!HasCustomBorder) - // { - // return (UIElement)base.Content; - // } - // else if (_customBorder != null) - // { - // return _customBorder.Child; - // } - // else - // { - // return _customBottomBorder.Child; - // } - // } - //} - /// /// Sets the border width. /// @@ -412,24 +361,7 @@ public void SetBorderWidth(double width) TopBorderThickness = width; RightBorderThickness = width; BottomBorderThickness = width; - - //LeftBorderThickness = new Thickness(width, 0, 0, 0); - //TopBorderThickness = new Thickness(0, width, 0, 0); - //RightBorderThickness = new Thickness(0, 0, width, 0); - //BottomBorderThickness = new Thickness(0, 0, 0, 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); - //} + Padding = new Thickness(width); } /// @@ -443,93 +375,30 @@ public void SetBorderWidth(CSSSpacingType kind, double width) { } - - switch (kind) + else { - case CSSSpacingType.Left: - LeftBorderThickness = width; - break; - case CSSSpacingType.Top: - //TopBorderThickness = new Thickness(0, width, 0, 0); - TopBorderThickness = width; - break; - case CSSSpacingType.Right: - //RightBorderThickness = new Thickness(0, 0, width, 0); - RightBorderThickness = width; - break; - case CSSSpacingType.Bottom: - //BottomBorderThickness = new Thickness(0, 0, 0, width); - BottomBorderThickness = width; - break; - case CSSSpacingType.All: - SetBorderWidth(width); - break; + var padding = Padding; + switch (kind) + { + case CSSSpacingType.Left: + LeftBorderThickness = width; + padding.Left = width; + break; + case CSSSpacingType.Top: + TopBorderThickness = width; + padding.Top = width; + break; + case CSSSpacingType.Right: + RightBorderThickness = width; + padding.Right = width; + break; + case CSSSpacingType.Bottom: + BottomBorderThickness = width; + padding.Bottom = width; + break; + } + Padding = padding; } - - //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; - // } - // //var thickness = 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 - //{ - // switch (kind) - // { - // case CSSSpacingType.Left: - // _customLeftBorder.BorderThickness = new Thickness(width, 0, 0, 0); - // break; - // case CSSSpacingType.Top: - // _customTopBorder.BorderThickness = new Thickness(0, width, 0, 0); - // break; - // case CSSSpacingType.Right: - // _customRightBorder.BorderThickness = new Thickness(0, 0, width, 0); - // break; - // case CSSSpacingType.Bottom: - // _customBottomBorder.BorderThickness = new Thickness(0, 0, 0, width); - // break; - // } - //} - - //BorderThickness = thickness; } /// @@ -538,30 +407,11 @@ public void SetBorderWidth(CSSSpacingType kind, double width) /// The masked color. 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; - //} } /// @@ -579,24 +429,18 @@ public void SetBorderColor(CSSSpacingType kind, uint color) { var brush = new SolidColorBrush(ColorHelpers.Parse(color)); - //EnsureSideBorders(); - switch (kind) { case CSSSpacingType.Left: - //_customLeftBorder.BorderBrush = brush; LeftBorderBrush = brush; break; case CSSSpacingType.Top: - //_customTopBorder.BorderBrush = brush; TopBorderBrush = brush; break; case CSSSpacingType.Right: - //_customRightBorder.BorderBrush = brush; RightBorderBrush = brush; break; case CSSSpacingType.Bottom: - //_customBottomBorder.BorderBrush = brush; BottomBorderBrush = brush; break; } @@ -610,94 +454,6 @@ public void SetBorderColor(CSSSpacingType kind, uint color) public void SetBorderRadius(double radius) { CornerRadius = new CornerRadius(radius); - - //CornerRadius = new CornerRadius(radius); - //var cornerRadius = new CornerRadius(radius); - - //EnsureBorder(); - - //var cornerRadius = new CornerRadius(radius); - //if (!HasCustomBorder) - //{ - // CreateBorder(); - //} - - //if (_customBorder != null) - //{ - // _customBorder.CornerRadius = cornerRadius; - //} - //else - //{ - // //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); - //} } - - //private void EnsureBorder() - //{ - // if (HasCustomBorder) - // { - // return; - // } - - // var inner = Content; - // base.Content = null; - // _customBorder = new Border(); - // _customBorder.BorderThickness = BorderThickness; - // _customBorder.BorderBrush = BorderBrush; - // base.Content = _customBorder; - // //_customBorder.Child = inner; - //} - - //private void EnsureSideBorders() - //{ - // if (HasCustomBorder && _customBorder == null) - // { - // return; - // } - - // _customLeftBorder = new Border(); - // _customRightBorder = new Border(); - // _customTopBorder = new Border(); - // _customBottomBorder = new Border(); - - // _customLeftBorder.Child = _customTopBorder; - // _customTopBorder.Child = _customRightBorder; - // _customRightBorder.Child = _customBottomBorder; - - // 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; - - // if (_customBorder != null) - // { - // _customBorder.Child = null; - // _customBorder = null; - // } - - // _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 From ad1ac93f4ab4f747c4ac7d9b4412bf6f8146bdc3 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Tue, 19 Jan 2016 12:37:04 -0600 Subject: [PATCH 09/16] some pre-code review cleanup --- ReactWindows/Playground/App.xaml | 8 -------- ReactWindows/Playground/MainPage.xaml | 4 +--- ReactWindows/ReactNative/Views/View/ReactPanel.cs | 5 +---- ReactWindows/ReactNative/Views/View/ReactViewManager.cs | 1 - 4 files changed, 2 insertions(+), 16 deletions(-) diff --git a/ReactWindows/Playground/App.xaml b/ReactWindows/Playground/App.xaml index 7db4f2a909c..1db0328c427 100644 --- a/ReactWindows/Playground/App.xaml +++ b/ReactWindows/Playground/App.xaml @@ -4,12 +4,4 @@ xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:Playground" RequestedTheme="Light"> - - diff --git a/ReactWindows/Playground/MainPage.xaml b/ReactWindows/Playground/MainPage.xaml index 1ff1f98ce34..b7d4a5110ce 100644 --- a/ReactWindows/Playground/MainPage.xaml +++ b/ReactWindows/Playground/MainPage.xaml @@ -9,8 +9,6 @@ mc:Ignorable="d"> - - - + \ No newline at end of file diff --git a/ReactWindows/ReactNative/Views/View/ReactPanel.cs b/ReactWindows/ReactNative/Views/View/ReactPanel.cs index d75d32d6f6d..c15748701e4 100644 --- a/ReactWindows/ReactNative/Views/View/ReactPanel.cs +++ b/ReactWindows/ReactNative/Views/View/ReactPanel.cs @@ -24,10 +24,7 @@ public class ReactPanel : Canvas, ICatalystInterceptingViewGroup, ReactPointerEv public ReactPanel() : base() { - //Background = new SolidColorBrush(Colors.Blue); - //HorizontalAlignment = HorizontalAlignment.Stretch; - //VerticalAlignment = VerticalAlignment.Stretch; - this.SizeChanged += OnBoundsChanged; + SizeChanged += OnBoundsChanged; } public PointerEvents PointerEvents diff --git a/ReactWindows/ReactNative/Views/View/ReactViewManager.cs b/ReactWindows/ReactNative/Views/View/ReactViewManager.cs index dc4d8acddaa..77f2b6faca4 100644 --- a/ReactWindows/ReactNative/Views/View/ReactViewManager.cs +++ b/ReactWindows/ReactNative/Views/View/ReactViewManager.cs @@ -187,7 +187,6 @@ public void SetBorderColor(BorderedContentControl view, int index, uint? color) protected override FrameworkElement CreateViewInstance(ThemedReactContext reactContext) { return new BorderedContentControl() { Content = new ReactPanel()}; - //return new BorderedContentControl(new ReactPanel()); } private ReactPanel GetPanel(FrameworkElement element) From 065dc1a679c85ea1ee3cb6bbb2937550da2a61ac Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Wed, 20 Jan 2016 09:34:15 -0600 Subject: [PATCH 10/16] some code review cleanup --- ReactWindows/ReactNative/ReactNative.csproj | 1 + .../UIManager/BorderedContentControl.cs | 239 +++--------------- 2 files changed, 35 insertions(+), 205 deletions(-) diff --git a/ReactWindows/ReactNative/ReactNative.csproj b/ReactWindows/ReactNative/ReactNative.csproj index 93126fb8c90..bc8f7a8ef01 100644 --- a/ReactWindows/ReactNative/ReactNative.csproj +++ b/ReactWindows/ReactNative/ReactNative.csproj @@ -159,6 +159,7 @@ + diff --git a/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs b/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs index c77013ee7b2..e7287a8daa0 100644 --- a/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs +++ b/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs @@ -1,173 +1,18 @@ using Facebook.CSSLayout; -using System.Diagnostics; using System.Numerics; using Windows.Foundation; -using Windows.Foundation.Numerics; using Windows.UI; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media; -using Vector2 = System.Numerics.Vector2; namespace ReactNative.UIManager { /// /// A single child control for managing a border. /// - public class BorderedContentControl : ContentControl + public partial class BorderedContentControl : ContentControl { - #region DependencyProperties - public static readonly DependencyProperty CornerRadiusProperty = DependencyProperty.Register("CornerRadius", - typeof(CornerRadius), - typeof(BorderedContentControl), - new PropertyMetadata(null)); - - public CornerRadius CornerRadius - { - get { return (CornerRadius)GetValue(CornerRadiusProperty); } - set { SetValue(CornerRadiusProperty, value); } - } - #region Left Border - public static readonly DependencyProperty LeftBorderGeometryProperty = DependencyProperty.Register("LeftBorderGeometry", - typeof(GeometryGroup), - typeof(BorderedContentControl), - new PropertyMetadata(null)); - - public GeometryGroup LeftBorderGeometry - { - get { return (GeometryGroup)GetValue(LeftBorderGeometryProperty); } - set { SetValue(LeftBorderGeometryProperty, value); } - } - - public static readonly DependencyProperty LeftBorderThicknessProperty = DependencyProperty.Register("LeftBorderThickness", - typeof(double), - typeof(BorderedContentControl), - new PropertyMetadata(null)); - - public double LeftBorderThickness - { - get { return (double)GetValue(LeftBorderThicknessProperty); } - set { SetValue(LeftBorderThicknessProperty, value); } - } - - public static readonly DependencyProperty LeftBorderBrushProperty = DependencyProperty.Register("LeftBorderBrush", - typeof(Brush), - typeof(BorderedContentControl), - new PropertyMetadata(new SolidColorBrush(Colors.Black))); - - public Brush LeftBorderBrush - { - get { return (Brush)GetValue(LeftBorderBrushProperty); } - set { SetValue(LeftBorderBrushProperty, value); } - } - #endregion - - #region TopBorder - public static readonly DependencyProperty TopBorderGeometryProperty = DependencyProperty.Register("TopBorderGeometry", - typeof(GeometryGroup), - typeof(BorderedContentControl), - new PropertyMetadata(null)); - - public GeometryGroup TopBorderGeometry - { - get { return (GeometryGroup)GetValue(TopBorderGeometryProperty); } - set { SetValue(TopBorderGeometryProperty, value); } - } - - public static readonly DependencyProperty TopBorderThicknessProperty = DependencyProperty.Register("TopBorderThickness", - typeof(double), - typeof(BorderedContentControl), - new PropertyMetadata(null)); - - public double TopBorderThickness - { - get { return (double)GetValue(TopBorderThicknessProperty); } - set { SetValue(TopBorderThicknessProperty, value); } - } - - public static readonly DependencyProperty TopBorderBrushProperty = DependencyProperty.Register("TopBorderBrush", - typeof(Brush), - typeof(BorderedContentControl), - new PropertyMetadata(new SolidColorBrush(Colors.Black))); - - public Brush TopBorderBrush - { - get { return (Brush)GetValue(TopBorderBrushProperty); } - set { SetValue(TopBorderBrushProperty, value); } - } - #endregion - - #region RightBorder - public static readonly DependencyProperty RightBorderGeometryProperty = DependencyProperty.Register("RightBorderGeometry", - typeof(GeometryGroup), - typeof(BorderedContentControl), - new PropertyMetadata(null)); - - public GeometryGroup RightBorderGeometry - { - get { return (GeometryGroup)GetValue(RightBorderGeometryProperty); } - set { SetValue(RightBorderGeometryProperty, value); } - } - - public static readonly DependencyProperty RightBorderThicknessProperty = DependencyProperty.Register("RightBorderThickness", - typeof(double), - typeof(BorderedContentControl), - new PropertyMetadata(null)); - - public double RightBorderThickness - { - get { return (double)GetValue(RightBorderThicknessProperty); } - set { SetValue(RightBorderThicknessProperty, value); } - } - - public static readonly DependencyProperty RightBorderBrushProperty = DependencyProperty.Register("RightBorderBrush", - typeof(Brush), - typeof(BorderedContentControl), - new PropertyMetadata(new SolidColorBrush(Colors.Black))); - - public Brush RightBorderBrush - { - get { return (Brush)GetValue(RightBorderBrushProperty); } - set { SetValue(RightBorderBrushProperty, value); } - } - #endregion - - #region BottomBorder - public static readonly DependencyProperty BottomBorderGeometryProperty = DependencyProperty.Register("BottomBorderGeometry", - typeof(GeometryGroup), - typeof(BorderedContentControl), - new PropertyMetadata(null)); - - public GeometryGroup BottomBorderGeometry - { - get { return (GeometryGroup)GetValue(BottomBorderGeometryProperty); } - set { SetValue(BottomBorderGeometryProperty, value); } - } - - public static readonly DependencyProperty BottomBorderThicknessProperty = DependencyProperty.Register("BottomBorderThickness", - typeof(double), - typeof(BorderedContentControl), - new PropertyMetadata(null)); - - public double BottomBorderThickness - { - get { return (double)GetValue(BottomBorderThicknessProperty); } - set { SetValue(BottomBorderThicknessProperty, value); } - } - - public static readonly DependencyProperty BottomBorderBrushProperty = DependencyProperty.Register("BottomBorderBrush", - typeof(Brush), - typeof(BorderedContentControl), - new PropertyMetadata(new SolidColorBrush(Colors.Black))); - - public Brush BottomBorderBrush - { - get { return (Brush)GetValue(BottomBorderBrushProperty); } - set { SetValue(BottomBorderBrushProperty, value); } - } - #endregion - #endregion - /// /// Instantiates the . /// @@ -204,26 +49,22 @@ private void LayoutBorderGeometry(Size newSize) var leftGeometry = new GeometryGroup(); // upper left lower corner - leftGeometry.Children.Add(new PathGeometry - { - Figures = CreateFiguresForCorner(upperLeftLowerPoint, + leftGeometry.Children.Add(CreateCornerGeometry(upperLeftLowerPoint, upperLeftUpperPoint, upperLeftCenterPoint, - CornerRadius.TopLeft, SweepDirection.Clockwise) - }); + CornerRadius.TopLeft, + SweepDirection.Clockwise)); leftGeometry.Children.Add(new LineGeometry() {StartPoint = upperLeftLowerPoint, EndPoint = lowerLeftUpperPoint }); // lower left upper half - leftGeometry.Children.Add(new PathGeometry - { - Figures = CreateFiguresForCorner(lowerLeftUpperPoint, + leftGeometry.Children.Add(CreateCornerGeometry(lowerLeftUpperPoint, lowerLeftLowerPoint, lowerLeftCenterPoint, - CornerRadius.BottomLeft, SweepDirection.Counterclockwise) - }); + CornerRadius.BottomLeft, + SweepDirection.Counterclockwise)); LeftBorderGeometry = leftGeometry; @@ -231,13 +72,11 @@ private void LayoutBorderGeometry(Size newSize) var topGeometry = new GeometryGroup(); // upper left upper half - topGeometry.Children.Add(new PathGeometry - { - Figures = CreateFiguresForCorner(upperLeftUpperPoint, + topGeometry.Children.Add(CreateCornerGeometry(upperLeftUpperPoint, upperLeftLowerPoint, upperLeftCenterPoint, - CornerRadius.TopLeft, SweepDirection.Counterclockwise) - }); + CornerRadius.TopLeft, + SweepDirection.Counterclockwise)); topGeometry.Children.Add(new LineGeometry() { @@ -246,13 +85,11 @@ private void LayoutBorderGeometry(Size newSize) }); // upper right upper half - topGeometry.Children.Add(new PathGeometry - { - Figures = CreateFiguresForCorner(upperRightUpperPoint, + topGeometry.Children.Add(CreateCornerGeometry(upperRightUpperPoint, upperRightLowerPoint, upperRightCenterPoint, - CornerRadius.TopRight, SweepDirection.Clockwise) - }); + CornerRadius.TopRight, + SweepDirection.Clockwise)); TopBorderGeometry = topGeometry; @@ -260,13 +97,11 @@ private void LayoutBorderGeometry(Size newSize) var rightGeometry = new GeometryGroup(); //upper right lower half - rightGeometry.Children.Add(new PathGeometry - { - Figures = CreateFiguresForCorner(upperRightLowerPoint, + rightGeometry.Children.Add(CreateCornerGeometry(upperRightLowerPoint, upperRightUpperPoint, upperRightCenterPoint, - CornerRadius.TopRight, SweepDirection.Counterclockwise) - }); + CornerRadius.TopRight, + SweepDirection.Counterclockwise)); rightGeometry.Children.Add(new LineGeometry() { @@ -275,13 +110,11 @@ private void LayoutBorderGeometry(Size newSize) }); // lower right upper half - rightGeometry.Children.Add(new PathGeometry - { - Figures = CreateFiguresForCorner(lowerRightUpperPoint, + rightGeometry.Children.Add(CreateCornerGeometry(lowerRightUpperPoint, lowerRigthLowerPoint, lowerRightCenterPoint, - CornerRadius.BottomRight, SweepDirection.Clockwise) - }); + CornerRadius.BottomRight, + SweepDirection.Clockwise)); RightBorderGeometry = rightGeometry; @@ -289,13 +122,11 @@ private void LayoutBorderGeometry(Size newSize) var bottomGeometry = new GeometryGroup(); //lower right lower half - bottomGeometry.Children.Add(new PathGeometry - { - Figures = CreateFiguresForCorner(lowerRigthLowerPoint, + bottomGeometry.Children.Add(CreateCornerGeometry(lowerRigthLowerPoint, lowerRightUpperPoint, lowerRightCenterPoint, - CornerRadius.BottomRight, SweepDirection.Counterclockwise) - }); + CornerRadius.BottomRight, + SweepDirection.Counterclockwise)); bottomGeometry.Children.Add(new LineGeometry() { @@ -304,35 +135,33 @@ private void LayoutBorderGeometry(Size newSize) }); // lower left lower half - bottomGeometry.Children.Add(new PathGeometry - { - Figures = CreateFiguresForCorner(lowerLeftLowerPoint, + bottomGeometry.Children.Add(CreateCornerGeometry(lowerLeftLowerPoint, lowerLeftUpperPoint, lowerLeftCenterPoint, - CornerRadius.BottomLeft, SweepDirection.Clockwise) - }); + CornerRadius.BottomLeft, + SweepDirection.Clockwise)); BottomBorderGeometry = bottomGeometry; } - private PathFigureCollection CreateFiguresForCorner(Point startPoint, Point endPoint, Point centerPoint, double radius, SweepDirection sweepDirection) + private PathGeometry CreateCornerGeometry(Point startPoint, Point endPoint, Point centerPoint, double radius, SweepDirection sweepDirection) { - var figures = new PathFigureCollection(); - var figure = new PathFigure() {StartPoint = startPoint }; + var geometry = new PathGeometry(); + + var figure = new PathFigure() { StartPoint = startPoint }; if (radius > 0) { - figure.Segments.Add(GetArcSegment(startPoint, endPoint, centerPoint, radius, sweepDirection)); + figure.Segments.Add(CreateArcSegment(startPoint, endPoint, centerPoint, radius, sweepDirection)); } else { - figure.Segments.Add(new LineSegment() { Point = endPoint}); - //figure.Segments.Add(new QuadraticBezierSegment() { Point1 = startPoint, Point2 = endPoint}); + figure.Segments.Add(new LineSegment() { Point = endPoint }); } - figures.Add(figure); - return figures; + geometry.Figures.Add(figure); + return geometry; } - private ArcSegment GetArcSegment(Point startPoint, Point endPoint, Point centerPoint, double radius, SweepDirection sweepDirection) + private ArcSegment CreateArcSegment(Point startPoint, Point endPoint, Point centerPoint, double radius, SweepDirection sweepDirection) { return new ArcSegment() { From 84d36ee7eb2b3aa6cb1f34fe41296bc50e6f3088 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Wed, 20 Jan 2016 09:34:42 -0600 Subject: [PATCH 11/16] code review cleanup --- .../UIManager/DependencyProperties.cs | 161 ++++++++++++++++++ 1 file changed, 161 insertions(+) create mode 100644 ReactWindows/ReactNative/UIManager/DependencyProperties.cs diff --git a/ReactWindows/ReactNative/UIManager/DependencyProperties.cs b/ReactWindows/ReactNative/UIManager/DependencyProperties.cs new file mode 100644 index 00000000000..20f9b6f0883 --- /dev/null +++ b/ReactWindows/ReactNative/UIManager/DependencyProperties.cs @@ -0,0 +1,161 @@ +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)); + + public CornerRadius CornerRadius + { + get { return (CornerRadius)GetValue(CornerRadiusProperty); } + set { SetValue(CornerRadiusProperty, value); } + } + #region Left Border + public static DependencyProperty LeftBorderGeometryProperty { get; } = DependencyProperty.Register("LeftBorderGeometry", + typeof(GeometryGroup), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public GeometryGroup LeftBorderGeometry + { + get { return (GeometryGroup)GetValue(LeftBorderGeometryProperty); } + set { SetValue(LeftBorderGeometryProperty, value); } + } + + public static DependencyProperty LeftBorderThicknessProperty { get; } = DependencyProperty.Register("LeftBorderThickness", + typeof(double), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public double LeftBorderThickness + { + get { return (double)GetValue(LeftBorderThicknessProperty); } + set { SetValue(LeftBorderThicknessProperty, value); } + } + + public static DependencyProperty LeftBorderBrushProperty { get; } = DependencyProperty.Register("LeftBorderBrush", + typeof(Brush), + typeof(BorderedContentControl), + new PropertyMetadata(new SolidColorBrush(Colors.Black))); + + public Brush LeftBorderBrush + { + get { return (Brush)GetValue(LeftBorderBrushProperty); } + set { SetValue(LeftBorderBrushProperty, value); } + } + #endregion + + #region TopBorder + public static DependencyProperty TopBorderGeometryProperty { get; } = DependencyProperty.Register("TopBorderGeometry", + typeof(GeometryGroup), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public GeometryGroup TopBorderGeometry + { + get { return (GeometryGroup)GetValue(TopBorderGeometryProperty); } + set { SetValue(TopBorderGeometryProperty, value); } + } + + public static DependencyProperty TopBorderThicknessProperty { get; } = DependencyProperty.Register("TopBorderThickness", + typeof(double), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public double TopBorderThickness + { + get { return (double)GetValue(TopBorderThicknessProperty); } + set { SetValue(TopBorderThicknessProperty, value); } + } + + public static DependencyProperty TopBorderBrushProperty { get; } = DependencyProperty.Register("TopBorderBrush", + typeof(Brush), + typeof(BorderedContentControl), + new PropertyMetadata(new SolidColorBrush(Colors.Black))); + + public Brush TopBorderBrush + { + get { return (Brush)GetValue(TopBorderBrushProperty); } + set { SetValue(TopBorderBrushProperty, value); } + } + #endregion + + #region RightBorder + public static DependencyProperty RightBorderGeometryProperty { get; } = DependencyProperty.Register("RightBorderGeometry", + typeof(GeometryGroup), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public GeometryGroup RightBorderGeometry + { + get { return (GeometryGroup)GetValue(RightBorderGeometryProperty); } + set { SetValue(RightBorderGeometryProperty, value); } + } + + public static DependencyProperty RightBorderThicknessProperty { get; } = DependencyProperty.Register("RightBorderThickness", + typeof(double), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public double RightBorderThickness + { + get { return (double)GetValue(RightBorderThicknessProperty); } + set { SetValue(RightBorderThicknessProperty, value); } + } + + public static DependencyProperty RightBorderBrushProperty { get; } = DependencyProperty.Register("RightBorderBrush", + typeof(Brush), + typeof(BorderedContentControl), + new PropertyMetadata(new SolidColorBrush(Colors.Black))); + + public Brush RightBorderBrush + { + get { return (Brush)GetValue(RightBorderBrushProperty); } + set { SetValue(RightBorderBrushProperty, value); } + } + #endregion + + #region BottomBorder + public static DependencyProperty BottomBorderGeometryProperty { get; } = DependencyProperty.Register("BottomBorderGeometry", + typeof(GeometryGroup), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public GeometryGroup BottomBorderGeometry + { + get { return (GeometryGroup)GetValue(BottomBorderGeometryProperty); } + set { SetValue(BottomBorderGeometryProperty, value); } + } + + public static DependencyProperty BottomBorderThicknessProperty { get; } = DependencyProperty.Register("BottomBorderThickness", + typeof(double), + typeof(BorderedContentControl), + new PropertyMetadata(null)); + + public double BottomBorderThickness + { + get { return (double)GetValue(BottomBorderThicknessProperty); } + set { SetValue(BottomBorderThicknessProperty, value); } + } + + public static DependencyProperty BottomBorderBrushProperty { get; } = DependencyProperty.Register("BottomBorderBrush", + typeof(Brush), + typeof(BorderedContentControl), + new PropertyMetadata(new SolidColorBrush(Colors.Black))); + + public Brush BottomBorderBrush + { + get { return (Brush)GetValue(BottomBorderBrushProperty); } + set { SetValue(BottomBorderBrushProperty, value); } + } + #endregion + #endregion + } +} From 9d4d35e6a26e11f3273bca301ec3dcf87ea5412d Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Wed, 20 Jan 2016 10:11:19 -0600 Subject: [PATCH 12/16] rebased and code review work --- ReactWindows/ReactNative/UIManager/BorderedContentControl.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs b/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs index e7287a8daa0..460f46ba7ae 100644 --- a/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs +++ b/ReactWindows/ReactNative/UIManager/BorderedContentControl.cs @@ -202,7 +202,7 @@ public void SetBorderWidth(CSSSpacingType kind, double width) { if (kind == CSSSpacingType.All) { - + SetBorderWidth(width); } else { From 3b81bc88c11d57bd49db705d73ce6d1a41c6ece6 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Wed, 20 Jan 2016 10:21:01 -0600 Subject: [PATCH 13/16] more CR cleanup --- ReactWindows/Playground/MainPage.xaml | 14 --------- ReactWindows/ReactNative/ReactRootView.cs | 4 --- .../ReactNative/UIManager/RootViewManager.cs | 3 +- .../UIManager/SizeMonitoringPanel.cs | 31 ------------------- .../ReactNative/UIManager/UIManagerModule.cs | 3 -- .../UIManager/UIViewOperationQueue.cs | 1 - .../ReactNative/Views/View/ReactPanel.cs | 1 - 7 files changed, 1 insertion(+), 56 deletions(-) delete mode 100644 ReactWindows/Playground/MainPage.xaml delete mode 100644 ReactWindows/ReactNative/UIManager/SizeMonitoringPanel.cs diff --git a/ReactWindows/Playground/MainPage.xaml b/ReactWindows/Playground/MainPage.xaml deleted file mode 100644 index b7d4a5110ce..00000000000 --- a/ReactWindows/Playground/MainPage.xaml +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/ReactWindows/ReactNative/ReactRootView.cs b/ReactWindows/ReactNative/ReactRootView.cs index ec66892ee29..d397799b50e 100644 --- a/ReactWindows/ReactNative/ReactRootView.cs +++ b/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; diff --git a/ReactWindows/ReactNative/UIManager/RootViewManager.cs b/ReactWindows/ReactNative/UIManager/RootViewManager.cs index cc1ac7f54f7..4683338c7ca 100644 --- a/ReactWindows/ReactNative/UIManager/RootViewManager.cs +++ b/ReactWindows/ReactNative/UIManager/RootViewManager.cs @@ -1,5 +1,4 @@ -using Windows.UI.Xaml.Controls; - + namespace ReactNative.UIManager { /// diff --git a/ReactWindows/ReactNative/UIManager/SizeMonitoringPanel.cs b/ReactWindows/ReactNative/UIManager/SizeMonitoringPanel.cs deleted file mode 100644 index bc8cb0d564a..00000000000 --- a/ReactWindows/ReactNative/UIManager/SizeMonitoringPanel.cs +++ /dev/null @@ -1,31 +0,0 @@ -using Windows.UI.Xaml; -using Windows.UI.Xaml.Controls; - -namespace ReactNative.UIManager -{ - /// - /// allows registering for size change events. The main purpose for this class is to hide complexity of ReactRootView - /// - public class SizeMonitoringPanel : Grid - { - private ISizeChangedListener _onSizeChangedListener; - /// - /// Gets or sets the size change listener for the control - /// - public ISizeChangedListener SizeChangedListener - { - get { return _onSizeChangedListener; } - set { _onSizeChangedListener = value; } - } - - public SizeMonitoringPanel() - { - SizeChanged += SizeMonitoringPanel_SizeChanged; - } - - private void SizeMonitoringPanel_SizeChanged(object sender, SizeChangedEventArgs e) - { - _onSizeChangedListener?.OnSizeChanged(this, e); - } - } -} diff --git a/ReactWindows/ReactNative/UIManager/UIManagerModule.cs b/ReactWindows/ReactNative/UIManager/UIManagerModule.cs index a947499ebaa..244ef2724b9 100644 --- a/ReactWindows/ReactNative/UIManager/UIManagerModule.cs +++ b/ReactWindows/ReactNative/UIManager/UIManagerModule.cs @@ -2,11 +2,8 @@ using ReactNative.Bridge; using ReactNative.Tracing; using ReactNative.UIManager.Events; -using ReactNative.Views; using System; using System.Collections.Generic; -using Windows.UI.Xaml; -using Windows.UI.Xaml.Controls; namespace ReactNative.UIManager { diff --git a/ReactWindows/ReactNative/UIManager/UIViewOperationQueue.cs b/ReactWindows/ReactNative/UIManager/UIViewOperationQueue.cs index 666ad12cb03..25760f5a718 100644 --- a/ReactWindows/ReactNative/UIManager/UIViewOperationQueue.cs +++ b/ReactWindows/ReactNative/UIManager/UIViewOperationQueue.cs @@ -4,7 +4,6 @@ using System; using System.Collections.Generic; using System.Threading; -using Windows.UI.Xaml.Controls; namespace ReactNative.UIManager { diff --git a/ReactWindows/ReactNative/Views/View/ReactPanel.cs b/ReactWindows/ReactNative/Views/View/ReactPanel.cs index c15748701e4..f51c66f0030 100644 --- a/ReactWindows/ReactNative/Views/View/ReactPanel.cs +++ b/ReactWindows/ReactNative/Views/View/ReactPanel.cs @@ -1,7 +1,6 @@ using ReactNative.Touch; using ReactNative.UIManager; using System; -using Windows.UI; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Input; From 87f4b81adcc45ba528300443f99917996ad50699 Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Wed, 20 Jan 2016 10:24:16 -0600 Subject: [PATCH 14/16] more CR cleanup --- ReactWindows/ReactNative/UIManager/RootViewManager.cs | 3 +-- ReactWindows/ReactNative/UIManager/UIImplementation.cs | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/ReactWindows/ReactNative/UIManager/RootViewManager.cs b/ReactWindows/ReactNative/UIManager/RootViewManager.cs index 4683338c7ca..04925cfa3ab 100644 --- a/ReactWindows/ReactNative/UIManager/RootViewManager.cs +++ b/ReactWindows/ReactNative/UIManager/RootViewManager.cs @@ -1,5 +1,4 @@ - -namespace ReactNative.UIManager +namespace ReactNative.UIManager { /// /// View manager for react root view components. diff --git a/ReactWindows/ReactNative/UIManager/UIImplementation.cs b/ReactWindows/ReactNative/UIManager/UIImplementation.cs index bf53efbe991..02847387b51 100644 --- a/ReactWindows/ReactNative/UIManager/UIImplementation.cs +++ b/ReactWindows/ReactNative/UIManager/UIImplementation.cs @@ -7,7 +7,6 @@ using System.Diagnostics; using System.Globalization; using System.Runtime.CompilerServices; -using Windows.UI.Xaml.Controls; namespace ReactNative.UIManager { From 3100e82c52091a63f825b5831755100286607e4d Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Wed, 20 Jan 2016 10:27:24 -0600 Subject: [PATCH 15/16] more CR cleanup --- ReactWindows/ReactNative.sln | 12 ------------ .../ReactNative/UIManager/UIImplementation.cs | 4 ++-- 2 files changed, 2 insertions(+), 14 deletions(-) diff --git a/ReactWindows/ReactNative.sln b/ReactWindows/ReactNative.sln index 9508231c3d8..b0e0d4cb1eb 100644 --- a/ReactWindows/ReactNative.sln +++ b/ReactWindows/ReactNative.sln @@ -11,35 +11,26 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "ReactNative.Tests", "ReactN EndProject Global GlobalSection(SolutionConfigurationPlatforms) = preSolution - Debug|Any CPU = Debug|Any CPU Debug|ARM = Debug|ARM Debug|x64 = Debug|x64 Debug|x86 = Debug|x86 - Release|Any CPU = Release|Any CPU Release|ARM = Release|ARM Release|x64 = Release|x64 Release|x86 = Release|x86 EndGlobalSection GlobalSection(ProjectConfigurationPlatforms) = postSolution - {C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU - {C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Debug|Any CPU.Build.0 = Debug|Any CPU {C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Debug|ARM.ActiveCfg = Debug|ARM {C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Debug|ARM.Build.0 = Debug|ARM {C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Debug|x64.ActiveCfg = Debug|x64 {C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Debug|x64.Build.0 = Debug|x64 {C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Debug|x86.ActiveCfg = Debug|x86 {C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Debug|x86.Build.0 = Debug|x86 - {C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Release|Any CPU.ActiveCfg = Release|Any CPU - {C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Release|Any CPU.Build.0 = Release|Any CPU {C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Release|ARM.ActiveCfg = Release|ARM {C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Release|ARM.Build.0 = Release|ARM {C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Release|x64.ActiveCfg = Release|x64 {C7673AD5-E3AA-468C-A5FD-FA38154E205C}.Release|x64.Build.0 = Release|x64 {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 @@ -49,7 +40,6 @@ Global {D52267B5-396F-424A-BB26-C9E750032846}.Debug|x86.ActiveCfg = Debug|x86 {D52267B5-396F-424A-BB26-C9E750032846}.Debug|x86.Build.0 = Debug|x86 {D52267B5-396F-424A-BB26-C9E750032846}.Debug|x86.Deploy.0 = Debug|x86 - {D52267B5-396F-424A-BB26-C9E750032846}.Release|Any CPU.ActiveCfg = Release|x86 {D52267B5-396F-424A-BB26-C9E750032846}.Release|ARM.ActiveCfg = Release|ARM {D52267B5-396F-424A-BB26-C9E750032846}.Release|ARM.Build.0 = Release|ARM {D52267B5-396F-424A-BB26-C9E750032846}.Release|ARM.Deploy.0 = Release|ARM @@ -59,7 +49,6 @@ 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|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 @@ -69,7 +58,6 @@ 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|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/UIManager/UIImplementation.cs b/ReactWindows/ReactNative/UIManager/UIImplementation.cs index 02847387b51..add882508fd 100644 --- a/ReactWindows/ReactNative/UIManager/UIImplementation.cs +++ b/ReactWindows/ReactNative/UIManager/UIImplementation.cs @@ -109,8 +109,8 @@ public void RemoveRootView(int rootViewTag) /// The event dispatcher. public void UpdateRootNodeSize( int rootViewTag, - float newWidth, - float newHeight, + int newWidth, + int newHeight, EventDispatcher eventDispatcher) { var rootCssNode = _shadowNodeRegistry.GetNode(rootViewTag); From 014ad088557415a57443877bfa44acbfccffcd9d Mon Sep 17 00:00:00 2001 From: Jason Fox Date: Wed, 20 Jan 2016 11:26:29 -0600 Subject: [PATCH 16/16] CR cleanup --- .../ReactNative.Tests.csproj | 26 ++ ReactWindows/ReactNative.sln | 16 ++ ReactWindows/ReactNative/ReactNative.csproj | 2 +- ReactWindows/ReactNative/Themes/Generic.xaml | 18 +- ...redContentControl.DependencyProperties.cs} | 94 +++++-- .../UIManager/BorderedContentControl.cs | 256 +++++++++--------- 6 files changed, 248 insertions(+), 164 deletions(-) rename ReactWindows/ReactNative/UIManager/{DependencyProperties.cs => BorderedContentControl.DependencyProperties.cs} (56%) diff --git a/ReactWindows/ReactNative.Tests/ReactNative.Tests.csproj b/ReactWindows/ReactNative.Tests/ReactNative.Tests.csproj index 2de50f43ac3..867e3d2a92a 100644 --- a/ReactWindows/ReactNative.Tests/ReactNative.Tests.csproj +++ b/ReactWindows/ReactNative.Tests/ReactNative.Tests.csproj @@ -181,6 +181,32 @@ 14.0 + + true + bin\Debug\ + DEBUG;TRACE;NETFX_CORE;WINDOWS_UWP;CODE_ANALYSIS + ;2008 + true + full + AnyCPU + false + prompt + MinimumRecommendedRules.ruleset + true + + + bin\Release\ + TRACE;NETFX_CORE;WINDOWS_UWP;CODE_ANALYSIS + true + ;2008 + true + pdbonly + AnyCPU + false + prompt + MinimumRecommendedRules.ruleset + true +