Fixes #153 - Adds background color to the ReactViewManager.

ReactWindows/Playground/index.ios.js

@@ -24,16 +24,31 @@ const styles={
    }
 };
 
-var {AppRegistry, View, Text, TextInput, Image } = React;
+var {AppRegistry, View, Text, TextInput, Image, Switch } = React;
 
     var ReactRoot = React.createClass({
 
 	getInitialState: function(){
 		var text = "You can see me!";
         var longText = "This is such a long text that it needs to go into a new lineThis is such a long text that it needs to go into a new lineThis is such a long text that it needs to go into a new lineThis is such a long text that it needs to go into a new lineThis is such a long text that it needs to go into a new line";
 
-		return {value: text,
-                longText: longText};
+        return {
+            value: text,
+            longText: longText,
+            isToggled: false,
+            w: 100,
+            h: 150
+        };
+	},
+
+	onToggle: function(value) {
+	    this.setState({isToggled: value});
+	    if (value) {
+	        this.setState({w: 150, h: 100});
+	    }
+	    else {
+	        this.setState({w: 100, h: 150});
+	    }
 	},
 
     render: function() {
@@ -54,6 +69,8 @@ var {AppRegistry, View, Text, TextInput, Image } = React;
               <View style={styles.views}>
                  <Image source={{uri: 'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'}} style={styles.images}/>
               </View>
+              <View style={{width: this.state.w, height: this.state.h, backgroundColor: 'red'}} />
+              <Switch onValueChange={this.onToggle} value={this.state.isToggled} />
             </View>
         );
     }

ReactWindows/ReactNative/UIManager/NativeViewHierarchyManager.cs

@@ -514,13 +514,12 @@ private void DropView(FrameworkElement view)
             var viewManager = default(ViewManager);
             if (_tagsToViewManagers.TryGetValue(tag, out viewManager))
             {
-                var viewGroup = view as Panel;
                 var viewGroupManager = viewManager as ViewGroupManager;
-                if (viewGroup != null && viewGroupManager != null)
+                if (viewGroupManager != null)
                 {
-                    for (var i = viewGroupManager.GetChildCount(viewGroup) - 1; i >= 0; --i)
+                    for (var i = viewGroupManager.GetChildCount(view) - 1; i >= 0; --i)
                     {
-                        var child = viewGroupManager.GetChildAt(viewGroup, i);
+                        var child = viewGroupManager.GetChildAt(view, i);
                         var managedChild = default(FrameworkElement);
                         if (_tagsToViews.TryGetValue(child.GetTag(), out managedChild))
                         {
@@ -529,7 +528,7 @@ private void DropView(FrameworkElement view)
                     }
                 }
 
-                viewGroupManager.RemoveAllChildren(viewGroup);
+                viewGroupManager.RemoveAllChildren(view);
             }
 
             _tagsToViews.Remove(tag);

ReactWindows/ReactNative/UIManager/ViewGroupManager.cs

@@ -1,6 +1,5 @@
 using System;
 using Windows.UI.Xaml;
-using Windows.UI.Xaml.Controls;
 
 namespace ReactNative.UIManager
 {
@@ -9,6 +8,15 @@ namespace ReactNative.UIManager
     /// </summary>
     public abstract class ViewGroupManager : ViewManager
     {
+        /// <summary>
+        /// The <see cref="Type"/> instance that represents the type of shadow
+        /// node that this manager will return from
+        /// <see cref="CreateShadowNodeInstance"/>.
+        /// 
+        /// This method will be used in the bridge initialization phase to
+        /// collect properties exposed using the <see cref="ReactPropertyAttribute"/>
+        /// annotation from the <see cref="ReactShadowNode"/> subclass.
+        /// </summary>
         public sealed override Type ShadowNodeType
         {
             get

ReactWindows/ReactNative/UIManager/ViewManager.cs

@@ -142,6 +142,19 @@ public virtual void OnDropViewInstance(ThemedReactContext reactContext, Framewor
         /// <param name="extraData">The extra data.</param>
         public abstract void UpdateExtraData(FrameworkElement root, object extraData);
 
+        /// <summary>
+        /// Implement this method to receive events/commands directly from
+        /// JavaScript through the <see cref="UIManager"/>.
+        /// </summary>
+        /// <param name="root">
+        /// The view instance that should receive the command.
+        /// </param>
+        /// <param name="commandId">Identifer for the command.</param>
+        /// <param name="args">Optional arguments for the command.</param>
+        public virtual void ReceiveCommand(FrameworkElement view, int commandId, JArray args)
+        {
+        }
+
         /// <summary>
         /// Creates a new view instance of type <typeparamref name="TFrameworkElement"/>.
         /// </summary>
@@ -172,18 +185,5 @@ protected virtual void AddEventEmitters(ThemedReactContext reactContext, Framewo
         protected virtual void OnAfterUpdateTransaction(FrameworkElement view)
         {
         }
-
-        /// <summary>
-        /// Implement this method to receive events/commands directly from
-        /// JavaScript through the <see cref="UIManager"/>.
-        /// </summary>
-        /// <param name="root">
-        /// The view instance that should receive the command.
-        /// </param>
-        /// <param name="commandId">Identifer for the command.</param>
-        /// <param name="args">Optional arguments for the command.</param>
-        public virtual void ReceiveCommand(FrameworkElement view, int commandId, JArray args)
-        {
-        }
     }
 }

ReactWindows/ReactNative/Views/View/ReactViewManager.cs

@@ -5,6 +5,7 @@
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Automation.Peers;
 using Windows.UI.Xaml.Automation.Provider;
+using Windows.UI.Xaml.Media;
 
 namespace ReactNative.Views.View
 {
@@ -101,7 +102,7 @@ public override void ReceiveCommand(FrameworkElement view, int commandId, JArray
         }
 
         /// <summary>
-        /// The border radius of the <see cref="ReactRootView"/>.
+        /// Sets the border radius of the <see cref="ReactPanel"/>.
         /// </summary>
         /// <param name="view">The view panel.</param>
         /// <param name="radius">The border radius value.</param>
@@ -111,6 +112,21 @@ public void SetBorderRadius(BorderedContentControl view, double radius)
             view.SetBorderRadius(radius);
         }
 
+        /// <summary>
+        /// Sets the background color of the <see cref="ReactPanel"/>.
+        /// </summary>
+        /// <param name="view">The view panel.</param>
+        /// <param name="color">The masked color value.</param>
+        [ReactProperty(ViewProperties.BackgroundColor)]
+        public void SetBackgroundColor(BorderedContentControl view, uint? color)
+        {
+            if (color.HasValue)
+            {
+                var panel = GetPanel(view);
+                panel.Background = new SolidColorBrush(ColorHelpers.Parse(color.Value));
+            }
+        }
+
         /// <summary>
         /// Sets the elevation transformation effect of the <see cref="ReactPanel"/>. 
         /// </summary>