IOS stylers

CrossPlatformModules.csproj

@@ -192,6 +192,9 @@
     <Content Include="apps\ui-tests-app\action-bar\all.xml">
       <SubType>Designer</SubType>
     </Content>
+    <Content Include="apps\ui-tests-app\action-bar\clean.xml">
+      <SubType>Designer</SubType>
+    </Content>
     <Content Include="apps\ui-tests-app\tab-view\background.xml">
       <SubType>Designer</SubType>
     </Content>
@@ -214,6 +217,8 @@
       <SubType>Designer</SubType>
     </Content>
     <Content Include="apps\ui-tests-app\app.css" />
+    <TypeScriptCompile Include="apps\ui-tests-app\action-bar\all.ts" />
+    <TypeScriptCompile Include="apps\ui-tests-app\action-bar\color.ts" />
     <TypeScriptCompile Include="apps\ui-tests-app\nordic\nordic.ts">
       <DependentUpon>nordic.xml</DependentUpon>
     </TypeScriptCompile>

apps/ui-tests-app/action-bar/all.ts

@@ -0,0 +1,5 @@
+import frame = require("ui/frame");
+
+export function navigate(args) {
+    frame.topmost().navigate("action-bar/clean");
+}

apps/ui-tests-app/action-bar/all.xml

@@ -8,6 +8,6 @@
     </ActionBar>
   </Page.actionBar>
   <StackLayout>
-    <Button text="do nothing"/>
+    <Button text="go to cleared page" tap="navigate"/>
   </StackLayout>
 </Page>

apps/ui-tests-app/action-bar/clean.xml

@@ -0,0 +1,13 @@
+<Page>
+  <Page.actionBar>
+    <ActionBar title="Page Title">
+      <NavigationButton text="go back"/>
+      <ActionBar.actionItems>
+        <ActionItem text="ITEM" />
+      </ActionBar.actionItems>
+    </ActionBar>
+  </Page.actionBar>
+  <StackLayout>
+    <Button text="do nothing"/>
+  </StackLayout>
+</Page>

apps/ui-tests-app/action-bar/color.ts

@@ -0,0 +1,5 @@
+import frame = require("ui/frame");
+
+export function navigate(args) {
+    frame.topmost().navigate("action-bar/clean");
+}

apps/ui-tests-app/action-bar/color.xml

@@ -1,6 +1,6 @@
 <Page>
   <Page.actionBar>
-    <ActionBar title="Page Title" style="background-color: green;">
+    <ActionBar title="Page Title" style="color: green;">
       <NavigationButton text="go back"/>
       <ActionBar.actionItems>
         <ActionItem text="ITEM" />
@@ -8,6 +8,6 @@
     </ActionBar>
   </Page.actionBar>
   <StackLayout>
-    <Button text="do nothing"/>
+    <Button text="go to cleared page" tap="navigate"/>
   </StackLayout>
 </Page>

ui/action-bar/action-bar.d.ts

@@ -203,4 +203,9 @@ declare module "ui/action-bar" {
     export class NavigationButton extends ActionItemBase {
 
     }
+
+    //@private
+    export function _setNavBarColor(navBar: UINavigationBar, color: UIColor);
+    export function _setNavBarBackgroundColor(navBar: UINavigationBar, color: UIColor);
+    //@endprivate
 }

ui/action-bar/action-bar.ios.ts

@@ -80,6 +80,9 @@ export class ActionBar extends common.ActionBar {
 
         // Populate action items
         this.populateMenuItems(navigationItem);
+
+        // update colors explicitly - they may have to be cleared form a previous page
+        this.updateColors(navigationBar);
     }
 
     private populateMenuItems(navigationItem: UINavigationItem) {
@@ -129,6 +132,21 @@ export class ActionBar extends common.ActionBar {
         return barButtonItem;
     }
 
+    private updateColors(navBar: UINavigationBar) {
+        var color = this.color;
+        if (color) {
+            navBar.titleTextAttributes = <any>{ [NSForegroundColorAttributeName]: color.ios };
+            navBar.tintColor = color.ios;
+        }
+        else {
+            navBar.titleTextAttributes = null;
+            navBar.tintColor = null;
+        }
+
+        var bgColor = this.backgroundColor;
+        navBar.barTintColor = bgColor ? bgColor.ios : null;
+    }
+
     public _onTitlePropertyChanged() {
         if (!this.page) {
             return;

ui/styling/stylers.ios.ts

@@ -16,6 +16,14 @@ interface TextUIView {
     textColor: UIColor;
 }
 
+var ignorePropertyHandler = new stylersCommon.StylePropertyChangedHandler(
+    (view, val) => {
+        // empty
+    },
+    (view, val) => {
+        // empty
+    });
+
 export class DefaultStyler implements definition.stylers.Styler {
     //Background methods
     private static setBackgroundInternalProperty(view: view.View, newValue: any) {
@@ -537,13 +545,13 @@ export class SwitchStyler implements definition.stylers.Styler {
             SwitchStyler.resetColorProperty,
             SwitchStyler.getNativeColorValue), "Switch");
 
-        var bkgHandler = new stylersCommon.StylePropertyChangedHandler(
+        style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
             SwitchStyler.setBackgroundColorProperty,
             SwitchStyler.resetBackgroundColorProperty,
-            SwitchStyler.getBackgroundColorProperty);
+            SwitchStyler.getBackgroundColorProperty), "Switch");
 
-        style.registerHandler(style.backgroundColorProperty, bkgHandler, "Switch");
+        // Ignore the default backgroundInternalProperty handler
-        style.registerHandler(style.backgroundInternalProperty, bkgHandler, "Switch");
+        style.registerHandler(style.backgroundInternalProperty, ignorePropertyHandler, "Switch");
     }
 }
 
@@ -634,16 +642,35 @@ export class ActionBarStyler implements definition.stylers.Styler {
     private static setColorProperty(view: view.View, newValue: any) {
         var topFrame = frame.topmost();
         if (topFrame) {
-            var bar = topFrame.ios.controller.navigationBar;
+            var navBar = topFrame.ios.controller.navigationBar;
-            (<any>bar).titleTextAttributes = { [NSForegroundColorAttributeName]: newValue };
+            navBar.titleTextAttributes = <any>{ [NSForegroundColorAttributeName]: newValue };
+            navBar.tintColor = newValue;
         }
     }
 
     private static resetColorProperty(view: view.View, nativeValue: any) {
         var topFrame = frame.topmost();
         if (topFrame) {
-            var bar = topFrame.ios.controller.navigationBar;
+            var navBar = topFrame.ios.controller.navigationBar;
-            (<any>bar).titleTextAttributes = null;
+            navBar.titleTextAttributes = null;
+            navBar.tintColor = null;
+        }
+    }
+
+    // background-color
+    private static setBackgroundColorProperty(view: view.View, newValue: any) {
+        var topFrame = frame.topmost();
+        if (topFrame) {
+            var navBar = topFrame.ios.controller.navigationBar;
+            navBar.barTintColor = newValue;
+        }
+    }
+
+    private static resetBackgroundColorProperty(view: view.View, nativeValue: any) {
+        var topFrame = frame.topmost();
+        if (topFrame) {
+            var navBar = topFrame.ios.controller.navigationBar;
+            navBar.barTintColor = null;
         }
     }
 
@@ -651,6 +678,12 @@ export class ActionBarStyler implements definition.stylers.Styler {
         style.registerHandler(style.colorProperty, new stylersCommon.StylePropertyChangedHandler(
             ActionBarStyler.setColorProperty,
             ActionBarStyler.resetColorProperty), "ActionBar");
+
+        style.registerHandler(style.backgroundColorProperty, new stylersCommon.StylePropertyChangedHandler(
+            ActionBarStyler.setBackgroundColorProperty,
+            ActionBarStyler.resetBackgroundColorProperty), "ActionBar");
+
+        style.registerHandler(style.backgroundInternalProperty, ignorePropertyHandler, "ActionBar");
     }
 }