ListPicker color and bckgColor set from CSS

apps/app/ui-tests-app/css/list-picker.ts

@@ -0,0 +1,7 @@
+export function loaded(args) {
+    var items = [];
+    for (var i = 0; i < 100; i++) {
+        items.push("name" + i);
+    }
+    args.object.bindingContext = { items: items };
+}

apps/app/ui-tests-app/css/list-picker.xml

@@ -0,0 +1,5 @@
+<Page loaded="loaded">
+	<StackLayout>
+		<ListPicker items="{{ items }}" style="color: deeppink; background-color:lightskyblue" />
+	</StackLayout>
+</Page>

apps/app/ui-tests-app/css/main-page.ts

@@ -37,6 +37,7 @@ export function pageLoaded(args: EventData) {
     examples.set("all-uniform-border", "css/all-uniform-border");
     examples.set("all-non-uniform-border", "css/all-non-uniform-border");
     examples.set("margins-paddings-with-percentage", "css/margins-paddings-with-percentage");
+    examples.set("list-picker", "css/list-picker");
     //examples.set("border-playground", "css/border-playground");
 
     let viewModel = new SubMainPageViewModel(wrapLayout, examples);

tns-core-modules/ui/list-picker/list-picker.android.ts

@@ -2,6 +2,8 @@
 import dependencyObservable = require("ui/core/dependency-observable");
 import utils = require("utils/utils")
 import * as types from "utils/types";
+import { Styler, colorProperty, registerHandler, StylePropertyChangedHandler } from "ui/styling/style";
+import { View } from "ui/core/view";
 
 global.moduleMerge(common, exports);
 
@@ -60,7 +62,7 @@ export class ListPicker extends common.ListPicker {
         mInputTextField.setAccessible(true);
         this._editText = <android.widget.EditText>mInputTextField.get(this._android);
         this._editText.setFilters([]);
-        
+
         //Since the Android NumberPicker has to always have at least one item, i.e. minValue=maxValue=value=0, we don't want this zero showing up when this.items is empty.
         this._editText.setText(" ", android.widget.TextView.BufferType.NORMAL);
     }
@@ -93,7 +95,7 @@ export class ListPicker extends common.ListPicker {
         if (!this.android) {
             return;
         }
-        
+
         //HACK: Force the stubborn NumberPicker to render correctly when we have 0 or 1 items.
         this.android.setFormatter(null);
         this.android.setFormatter(this._formatter); //Force the NumberPicker to call our Formatter 
@@ -103,4 +105,40 @@ export class ListPicker extends common.ListPicker {
         this._editText.invalidate(); //Force the EditText to redraw
         this.android.invalidate();
     }
-} 
+}
+
+export class ListPickerStyler implements Styler {
+    // color
+    private static setColorProperty(view: View, newValue: any) {
+        var picker = <android.widget.NumberPicker>view._nativeView;
+        ListPickerStyler._setNumberPickerTextColor(picker, newValue);
+    }
+
+    private static resetColorProperty(view: View, nativeValue: any) {
+        var picker = <android.widget.NumberPicker>view._nativeView;
+        ListPickerStyler._setNumberPickerTextColor(picker, nativeValue);
+    }
+
+    public static registerHandlers() {
+        registerHandler(colorProperty, new StylePropertyChangedHandler(
+            ListPickerStyler.setColorProperty,
+            ListPickerStyler.resetColorProperty), "ListPicker");
+    }
+
+    private static _setNumberPickerTextColor(picker: android.widget.NumberPicker, newValue: any) {
+        let childrenCount = picker.getChildCount();
+
+        for (let i = 0; i < childrenCount; i++) {
+            let child = picker.getChildAt(i);
+            if (child instanceof android.widget.EditText) {
+                let selectorWheelPaintField = picker.getClass().getDeclaredField("mSelectorWheelPaint");
+                selectorWheelPaintField.setAccessible(true);
+
+                selectorWheelPaintField.get(picker).setColor(newValue);
+                (<android.widget.EditText>picker.getChildAt(i)).setTextColor(newValue);
+            }
+        }
+    }
+}
+
+ListPickerStyler.registerHandlers();

tns-core-modules/ui/list-picker/list-picker.ios.ts

@@ -1,6 +1,8 @@
 import common = require("./list-picker-common");
 import dependencyObservable = require("ui/core/dependency-observable");
 import * as types from "utils/types";
+import { backgroundColorProperty, colorProperty, registerHandler, Styler, StylePropertyChangedHandler } from "ui/styling/style";
+import { View } from "ui/core/view";
 
 global.moduleMerge(common, exports);
 
@@ -49,7 +51,7 @@ export class ListPicker extends common.ListPicker {
 
 class ListPickerDataSource extends NSObject implements UIPickerViewDataSource {
     public static ObjCProtocols = [UIPickerViewDataSource];
-    
+
     private _owner: WeakRef<ListPicker>;
 
     public static initWithOwner(owner: WeakRef<ListPicker>): ListPickerDataSource {
@@ -79,13 +81,13 @@ class ListPickerDelegateImpl extends NSObject implements UIPickerViewDelegate {
         return delegate;
     }
 
-    public pickerViewTitleForRowForComponent(pickerView: UIPickerView, row: number, component: number): string {
+    public pickerViewAttributedTitleForRowForComponent(pickerView: UIPickerView, row: number, component: number): NSAttributedString {
         let owner = this._owner.get();
         if (owner) {
-            return owner._getItemAsString(row);
+            let title = NSAttributedString.alloc().initWithStringAttributes(owner._getItemAsString(row), <any>{ [NSForegroundColorAttributeName]: pickerView.tintColor });
+            return title;
         }
-
-        return row.toString();
+        return NSAttributedString.alloc().initWithStringAttributes(row.toString(), <any>{ [NSForegroundColorAttributeName]: pickerView.tintColor });
     }
 
     public pickerViewDidSelectRowInComponent(pickerView: UIPickerView, row: number, component: number): void {
@@ -95,3 +97,51 @@ class ListPickerDelegateImpl extends NSObject implements UIPickerViewDelegate {
         }
     }
 }
+
+export class ListPickerStyler implements Styler {
+    // background-color
+    private static setBackgroundColorProperty(view: View, newValue: any) {
+        var picker = <UIPickerView>view._nativeView;
+        picker.backgroundColor = newValue;
+    }
+
+    private static resetBackgroundColorProperty(view: View, nativeValue: any) {
+        var picker = <UIPickerView>view._nativeView;
+        picker.backgroundColor = nativeValue;
+    }
+
+    private static getBackgroundColorProperty(view: View): any {
+        var picker = <UIPickerView>view._nativeView;
+        return picker.backgroundColor;
+    }
+    
+    // color
+    private static setColorProperty(view: View, newValue: any) {
+        var picker = <UIPickerView>view._nativeView;
+        picker.tintColor = newValue;
+    }
+
+    private static resetColorProperty(view: View, nativeValue: any) {
+        var picker = <UIPickerView>view._nativeView;
+        picker.tintColor = nativeValue;
+    }
+
+    private static getColorProperty(view: View): any {
+        var picker = <UIPickerView>view._nativeView;
+        return picker.tintColor;
+    }
+
+    public static registerHandlers() {
+        registerHandler(backgroundColorProperty, new StylePropertyChangedHandler(
+            ListPickerStyler.setBackgroundColorProperty,
+            ListPickerStyler.resetBackgroundColorProperty,
+            ListPickerStyler.getBackgroundColorProperty), "ListPicker");
+
+        registerHandler(colorProperty, new StylePropertyChangedHandler(
+            ListPickerStyler.setColorProperty,
+            ListPickerStyler.resetColorProperty,
+            ListPickerStyler.getColorProperty), "ListPicker");
+    }
+}
+
+ListPickerStyler.registerHandlers();