diff --git a/apps/app/ui-tests-app/css/list-picker.ts b/apps/app/ui-tests-app/css/list-picker.ts
new file mode 100644
index 000000000..78606aca1
--- /dev/null
+++ b/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 };
+}
\ No newline at end of file
diff --git a/apps/app/ui-tests-app/css/list-picker.xml b/apps/app/ui-tests-app/css/list-picker.xml
new file mode 100644
index 000000000..9849ff1c2
--- /dev/null
+++ b/apps/app/ui-tests-app/css/list-picker.xml
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/apps/app/ui-tests-app/css/main-page.ts b/apps/app/ui-tests-app/css/main-page.ts
index d8d28ca32..c4cffb190 100644
--- a/apps/app/ui-tests-app/css/main-page.ts
+++ b/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);
diff --git a/tns-core-modules/ui/list-picker/list-picker.android.ts b/tns-core-modules/ui/list-picker/list-picker.android.ts
index 93e514aeb..71ba9eb91 100644
--- a/tns-core-modules/ui/list-picker/list-picker.android.ts
+++ b/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 = 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 = view._nativeView;
+ ListPickerStyler._setNumberPickerTextColor(picker, newValue);
+ }
+
+ private static resetColorProperty(view: View, nativeValue: any) {
+ var picker = 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);
+ (picker.getChildAt(i)).setTextColor(newValue);
+ }
+ }
+ }
+}
+
+ListPickerStyler.registerHandlers();
\ No newline at end of file
diff --git a/tns-core-modules/ui/list-picker/list-picker.ios.ts b/tns-core-modules/ui/list-picker/list-picker.ios.ts
index 2e2cc45e3..109df5fca 100644
--- a/tns-core-modules/ui/list-picker/list-picker.ios.ts
+++ b/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;
public static initWithOwner(owner: WeakRef): 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), { [NSForegroundColorAttributeName]: pickerView.tintColor });
+ return title;
}
-
- return row.toString();
+ return NSAttributedString.alloc().initWithStringAttributes(row.toString(), { [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 = view._nativeView;
+ picker.backgroundColor = newValue;
+ }
+
+ private static resetBackgroundColorProperty(view: View, nativeValue: any) {
+ var picker = view._nativeView;
+ picker.backgroundColor = nativeValue;
+ }
+
+ private static getBackgroundColorProperty(view: View): any {
+ var picker = view._nativeView;
+ return picker.backgroundColor;
+ }
+
+ // color
+ private static setColorProperty(view: View, newValue: any) {
+ var picker = view._nativeView;
+ picker.tintColor = newValue;
+ }
+
+ private static resetColorProperty(view: View, nativeValue: any) {
+ var picker = view._nativeView;
+ picker.tintColor = nativeValue;
+ }
+
+ private static getColorProperty(view: View): any {
+ var picker = 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();
\ No newline at end of file