SelectedBackgroundColor property exposed via css. (#2973)

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

@@ -1,13 +1,13 @@
 <Page>
 	<StackLayout>
-		<SegmentedBar selectedIndex="2" style="color: yellow; background-color: blue; font-weight: bold; font-size: 20; font-style: italic; font-family: monospace;" selectedBackgroundColor="red">
+		<SegmentedBar selectedIndex="2" style="color: yellow; background-color: blue; font-weight: bold; font-size: 20; font-style: italic; font-family: monospace; selected-background-color: red;">
 			<SegmentedBar.items>
 				<SegmentedBarItem title="Item 1" />
 				<SegmentedBarItem title="Item 2" />
 				<SegmentedBarItem title="Item 3" />
 			</SegmentedBar.items>
 		</SegmentedBar>
-		<SegmentedBar selectedIndex="2" style="margin: 5; color: yellow; background-color: blue; font-weight: bold; font-size: 20; font-style: italic; font-family: monospace; height: 72; border-width: 2; border-radius: 7; border-color:green;" selectedBackgroundColor="red">
+		<SegmentedBar selectedIndex="2" style="margin: 5; color: yellow; background-color: blue; font-weight: bold; font-size: 20; font-style: italic; font-family: monospace; height: 72; border-width: 2; border-radius: 7; border-color:green; selected-background-color: red;">
 			<SegmentedBar.items>
 				<SegmentedBarItem title="Item 1" />
 				<SegmentedBarItem title="Item 2" />

tns-core-modules/ui/segmented-bar/segmented-bar-common.ts

@@ -77,14 +77,12 @@ export class SegmentedBar extends view.View implements definition.SegmentedBar {
     }
 
     get selectedBackgroundColor(): color.Color {
-        return this._getValue(SegmentedBar.selectedBackgroundColorProperty);
+        return this.style.selectedBackgroundColor;
     }
     set selectedBackgroundColor(value: color.Color) {
-        this._setValue(SegmentedBar.selectedBackgroundColorProperty,
+        this.style.selectedBackgroundColor = value;
-            value instanceof color.Color ? value : new color.Color(<any>value));
     }
-
+    
-    public static selectedBackgroundColorProperty = new dependencyObservable.Property("selectedBackgroundColor", "SegmentedBar", new proxy.PropertyMetadata(undefined));
     public static selectedIndexProperty = new dependencyObservable.Property("selectedIndex", "SegmentedBar", new proxy.PropertyMetadata(undefined));
     public static itemsProperty = new dependencyObservable.Property("items", "SegmentedBar", new proxy.PropertyMetadata(undefined));
     public static selectedIndexChangedEvent = "selectedIndexChanged";

tns-core-modules/ui/segmented-bar/segmented-bar.android.ts

@@ -63,23 +63,6 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
         var tabHost = <android.widget.TabHost>view.android;
         var tabIndex: number;
 
-        if (view.selectedBackgroundColor) {
-            ensureSegmentedBarColorDrawableClass();
-            for (tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
-                var vg = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
-
-                var stateDrawable = new android.graphics.drawable.StateListDrawable();
-
-                var arr = (<any>Array).create("int", 1);
-                arr[0] = R_ATTR_STATE_SELECTED;
-                var colorDrawable: android.graphics.drawable.ColorDrawable = new SegmentedBarColorDrawableClass(view.selectedBackgroundColor.android)
-                stateDrawable.addState(arr, colorDrawable);
-                stateDrawable.setBounds(0, 15, vg.getRight(), vg.getBottom());
-
-                vg.setBackgroundDrawable(stateDrawable);
-            }
-        }
-
         for (tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
             var tabChild = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
             var t = <android.widget.TextView>tabChild.getChildAt(1);
@@ -292,6 +275,45 @@ export class SegmentedBarStyler implements style.Styler {
         };
     }
 
+    // selectedBackgroundColor methods
+    private static setSelectedBackgroundColorProperty(v: view.View, newValue: any) {
+        ensureSegmentedBarColorDrawableClass();
+        let tabHost = <android.widget.TabHost>v._nativeView;
+        for (let tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
+            let vg = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
+
+            let stateDrawable = new android.graphics.drawable.StateListDrawable();
+
+            let arr = (<any>Array).create("int", 1);
+            arr[0] = R_ATTR_STATE_SELECTED;
+            let colorDrawable: android.graphics.drawable.ColorDrawable = new SegmentedBarColorDrawableClass(newValue)
+            stateDrawable.addState(arr, colorDrawable);
+            stateDrawable.setBounds(0, 15, vg.getRight(), vg.getBottom());
+
+            vg.setBackground(stateDrawable);
+        }
+    }
+
+    private static resetSelectedBackgroundColorProperty(v: view.View, nativeValue: Array<android.graphics.drawable.Drawable>) {
+        let tabHost = <android.widget.TabHost>v._nativeView;
+        ensureSegmentedBarColorDrawableClass();
+        for (let tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
+            let vg = <android.view.ViewGroup>tabHost.getTabWidget().getChildTabViewAt(tabIndex);
+            vg.setBackground(nativeValue[tabIndex]);
+        }
+    }
+
+    private static getSelectedBackgroundColorProperty(v: view.View): Array<android.graphics.drawable.Drawable> {
+        var tabHost = <android.widget.TabHost>v._nativeView;
+        let result = [];
+        for (let tabIndex = 0; tabIndex < tabHost.getTabWidget().getTabCount(); tabIndex++) {
+            let background = tabHost.getTabWidget().getChildTabViewAt(tabIndex).getBackground();
+            result.push(background);
+        }
+        
+        return result;
+    }
+
     public static registerHandlers() {
         style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
             SegmentedBarStyler.setColorProperty,
@@ -301,6 +323,10 @@ export class SegmentedBarStyler implements style.Styler {
             SegmentedBarStyler.setFontInternalProperty,
             SegmentedBarStyler.resetFontInternalProperty,
             SegmentedBarStyler.getFontInternalProperty), "SegmentedBar");
+        style.registerHandler(style.selectedBackgroundColorProperty, new style.StylePropertyChangedHandler(
+            SegmentedBarStyler.setSelectedBackgroundColorProperty,
+            SegmentedBarStyler.resetSelectedBackgroundColorProperty,
+            SegmentedBarStyler.getSelectedBackgroundColorProperty), "SegmentedBar");
     }
 }
 

tns-core-modules/ui/segmented-bar/segmented-bar.ios.ts

@@ -68,20 +68,6 @@ function onItemsPropertyChanged(data: dependencyObservable.PropertyChangeData) {
 }
 (<proxy.PropertyMetadata>common.SegmentedBar.itemsProperty.metadata).onSetNativeValue = onItemsPropertyChanged;
 
-function onSelectedBackgroundColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
-    var view = <SegmentedBar>data.object;
-    if (!view.ios) {
-        return;
-    }
-
-    ensureColor();
-
-    if (data.newValue instanceof color.Color) {
-        view.ios.tintColor = data.newValue.ios;
-    }
-}
-(<proxy.PropertyMetadata>common.SegmentedBar.selectedBackgroundColorProperty.metadata).onSetNativeValue = onSelectedBackgroundColorPropertyChanged;
-
 export class SegmentedBarItem extends common.SegmentedBarItem {
     public _update() {
         if (this._parent) {
@@ -209,6 +195,39 @@ export class SegmentedBarStyler implements style.Styler {
         return currentFont;
     }
 
+    //Selected background color methods
+    private static setSelectedBackgroundColorProperty(v: view.View, newValue: any) {
+        if (!v.ios) {
+            return;
+        }
+
+        ensureColor();
+
+        if (newValue instanceof color.Color) {
+            v.ios.tintColor = newValue.ios;
+        }
+    }
+
+    private static resetSelectedBackgroundColorProperty(v: view.View, nativeValue: any) {
+        if (!v.ios) {
+            return;
+        }
+
+        ensureColor();
+
+        if (nativeValue instanceof color.Color) {
+            v.ios.tintColor = nativeValue.ios;
+        }
+    }
+
+    private static getSelectedBackgroundColorProperty(v: view.View): any {
+        if (!v.ios) {
+            return;
+        }
+
+        return v.ios.tintColor; 
+    }
+
     public static registerHandlers() {
         style.registerHandler(style.colorProperty, new style.StylePropertyChangedHandler(
             SegmentedBarStyler.setColorProperty,
@@ -217,6 +236,10 @@ export class SegmentedBarStyler implements style.Styler {
             SegmentedBarStyler.setFontInternalProperty,
             SegmentedBarStyler.resetFontInternalProperty,
             SegmentedBarStyler.getNativeFontValue), "SegmentedBar");
+        style.registerHandler(style.selectedBackgroundColorProperty, new style.StylePropertyChangedHandler(
+            SegmentedBarStyler.setSelectedBackgroundColorProperty,
+            SegmentedBarStyler.resetSelectedBackgroundColorProperty,
+            SegmentedBarStyler.getSelectedBackgroundColorProperty), "SegmentedBar");
     }
 }
 

tns-core-modules/ui/styling/style.d.ts

@@ -108,6 +108,9 @@ declare module "ui/styling/style" {
         public selectedTabTextColor: Color;
         public androidSelectedTabHighlightColor: Color;
 
+        //SegmentedBar-specific props
+        public selectedBackgroundColor: Color;
+
         constructor(parentView: View);
 
         public _beginUpdate();
@@ -177,6 +180,8 @@ declare module "ui/styling/style" {
     export var selectedTabTextColorProperty: styleProperty.Property;
     export var androidSelectedTabHighlightColorProperty: styleProperty.Property;
 
+    export var selectedBackgroundColorProperty: styleProperty.Property;
+
     // Helper property holding most layout related properties available in CSS.
     // When layout related properties are set in CSS we chache them and send them to the native view in a single call.
     export var nativeLayoutParamsProperty: styleProperty.Property;

tns-core-modules/ui/styling/style.ts

@@ -864,6 +864,13 @@ export class Style extends DependencyObservable implements styling.Style {
         this._setValue(androidSelectedTabHighlightColorProperty, value);
     }
 
+    get selectedBackgroundColor(): Color {
+        return this._getValue(selectedBackgroundColorProperty);
+    }
+    set selectedBackgroundColor(value: Color) {
+        this._setValue(selectedBackgroundColorProperty, value);
+    }
+
     public _updateTextDecoration() {
         if (this._getValue(textDecorationProperty) !== enums.TextDecoration.none) {
             this._applyProperty(textDecorationProperty, this._getValue(textDecorationProperty));
@@ -1132,6 +1139,11 @@ export var androidSelectedTabHighlightColorProperty = new styleProperty.Property
     new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
     converters.colorConverter);
 
+// SegmentedBar-specific props
+export var selectedBackgroundColorProperty = new styleProperty.Property("selectedBackgroundColor", "selected-background-color",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
+    converters.colorConverter);
+
 // Helper property holding most layout related properties available in CSS.
 // When layout related properties are set in CSS we chache them and send them to the native view in a single call.
 export var nativeLayoutParamsProperty = new styleProperty.Property("nativeLayoutParams", "nativeLayoutParams",

tns-core-modules/ui/styling/styling.d.ts

@@ -318,6 +318,11 @@
          */
         androidSelectedTabHighlightColor: color.Color;
 
+        /**
+         * Gets or sets the selected background color of a SegmentedBar.
+         */
+        selectedBackgroundColor: color.Color;
+
         //@private
         public _beginUpdate();
         public _endUpdate();