Fixed: Setting the ListPicker.selectedIndex on pageLoaded selects the correct item but it is not rendered.

CrossPlatformModules.csproj

@@ -60,6 +60,11 @@
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(VSToolsPath)\WebApplications\Microsoft.WebApplication.targets" Condition="'$(VSToolsPath)' != ''" />
   <ItemGroup>
+    <TypeScriptCompile Include="apps\pickers-demo\app.ts" />
+    <TypeScriptCompile Include="apps\pickers-demo\main-page.ts">
+      <DependentUpon>main-page.xml</DependentUpon>
+    </TypeScriptCompile>
+    <TypeScriptCompile Include="apps\pickers-demo\model.ts" />
     <TypeScriptCompile Include="apps\gallery-app\app.ts" />
     <TypeScriptCompile Include="apps\gallery-app\main-page.ts">
       <DependentUpon>main-page.xml</DependentUpon>
@@ -493,6 +498,9 @@
     <TypeScriptCompile Include="libjs.d.ts" />
   </ItemGroup>
   <ItemGroup>
+    <Content Include="apps\pickers-demo\main-page.xml">
+      <SubType>Designer</SubType>
+    </Content>
     <Content Include="apps\gallery-app\layouts\dock-layout.xml" />
     <Content Include="apps\template-settings\app.css" />
     <Content Include="apps\tests\app\binding_tests.xml" />
@@ -1381,6 +1389,7 @@
     <Content Include="CreateNewModule.md" />
     <Content Include="DebugV8Heap.md" />
     <Content Include="apps\TelerikNEXT\package.json" />
+    <Content Include="apps\pickers-demo\package.json" />
     <None Include="js-libs\esprima\LICENSE.BSD" />
     <Content Include="source-control.md" />
     <Content Include="ui\segmented-bar\package.json">
@@ -1458,7 +1467,7 @@
           <SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
         </WebProjectProperties>
       </FlavorProperties>
-      <UserProperties ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" />
+      <UserProperties ui_2layouts_2wrap-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2grid-layout_2package_1json__JSONSchema="" ui_2layouts_2dock-layout_2package_1json__JSONSchema="" ui_2layouts_2absolute-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2layouts_2linear-layout_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2web-view_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2content-view_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2gallery-app_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2absolute-layout-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" apps_2editable-text-demo_2package_1json__JSONSchema="http://json.schemastore.org/package" ui_2scroll-view_2package_1json__JSONSchema="http://json.schemastore.org/package" />
     </VisualStudio>
   </ProjectExtensions>
-</Project>
+</Project>

apps/pickers-demo/app.ts

@@ -0,0 +1,3 @@
+import application = require("application");
+application.mainModule = "app/main-page";
+application.start();

apps/pickers-demo/main-page.ts

@@ -0,0 +1,34 @@
+import observableModule = require("data/observable");
+import pagesModule = require("ui/page");
+import model = require("./model");
+import enums = require("ui/enums");
+import labelModule = require("ui/label");
+import listPickerModule = require("ui/list-picker");
+import datePickerModule = require("ui/date-picker");
+import timePickerModule = require("ui/time-picker");
+
+var viewModel: model.WebViewModel;
+var page: pagesModule.Page;
+var label: labelModule.Label;
+var listPicker: listPickerModule.ListPicker;
+var datePicker: datePickerModule.DatePicker;
+var timePicker: timePickerModule.TimePicker;
+
+export function onPageLoaded(args: observableModule.EventData) {
+    viewModel = new model.WebViewModel();
+    page = <pagesModule.Page>args.object;
+    page.bindingContext = viewModel;
+
+    viewModel.items = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+    viewModel.selectedIndex = 5;
+
+    label = page.getViewById<labelModule.Label>("label");
+    listPicker = page.getViewById<listPickerModule.ListPicker>("listPicker");
+    datePicker = page.getViewById<datePickerModule.DatePicker>("datePicker");
+    timePicker = page.getViewById<timePickerModule.TimePicker>("timePicker");
+}
+
+export function onTap(args: observableModule.EventData) {
+    console.log("onTap");
+    viewModel.items = ["Male", "Female"];
+}

apps/pickers-demo/main-page.xml

@@ -0,0 +1,9 @@
+<Page loaded="onPageLoaded">
+  <StackLayout id="stack">
+    <Button id="button" text="GO!" height="50" width="100" tap="onTap"/>
+    <Label id="label" text="{{ selectedIndex }}" height="50" width="100" />
+    <ListPicker id="listPicker" selectedIndex="{{ selectedIndex }}" items="{{ items }}"/>
+    <DatePicker id="datePicker"/>
+    <TimePicker id="timePicker"/>
+  </StackLayout>
+</Page>

apps/pickers-demo/model.ts

@@ -0,0 +1,27 @@
+import observable = require("data/observable");
+
+export class WebViewModel extends observable.Observable {
+    constructor() {
+        super();
+    }
+
+    private _selectedIndex: number;
+    get selectedIndex(): number {
+        return this._selectedIndex;
+    }
+    set selectedIndex(value: number) {
+        console.log("selectedIndex:" + value);
+        this._selectedIndex = value;
+        this.notify({ object: this, eventName: observable.knownEvents.propertyChange, propertyName: "selectedIndex", value: value });
+    }
+    
+    private _items: Array<string> 
+    get items(): Array<string> {
+        return this._items;
+    }
+    set items(value: Array<string>) {
+        console.log("items:" + value);
+        this._items = value;
+        this.notify({ object: this, eventName: observable.knownEvents.propertyChange, propertyName: "items", value: value });
+    }
+}

apps/pickers-demo/package.json

@@ -0,0 +1,2 @@
+{ "name" : "pickers-demo",
+  "main" : "app.js" }

ui/list-picker/list-picker.android.ts

@@ -56,6 +56,7 @@ export class ListPicker extends common.ListPicker {
             },
 
             format: function (index: number) {
+                console.log("format(" + index + ")");
                 if (this.owner) {
                     return this.owner._getItemAsString(index);
                 }
@@ -70,10 +71,22 @@ export class ListPicker extends common.ListPicker {
             },
 
             onValueChange: function (picker: android.widget.NumberPicker, oldVal: number, newVal: number) {
+                console.log("onValueChange("+oldVal+", "+newVal+")");
                 if (this.owner) {
                     this.owner._onPropertyChangedFromNative(common.ListPicker.selectedIndexProperty, newVal);
                 }
             }
         }));
+
+        this._fixDisappearingSelectedItem();        
+    }
+
+    private _fixDisappearingSelectedItem() {
+        //HACK: http://stackoverflow.com/questions/17708325/android-numberpicker-with-formatter-does-not-format-on-first-rendering/26797732
+        //dgel's solution doesn't work for me: when I tap on the picker, formatting disappears again.This bug is caused by input filter set on EditText inside NumberPicker when setDisplayValues isn't used. So I came up with this workaround:
+        var mInputTextField = java.lang.Class.forName("android.widget.NumberPicker").getDeclaredField("mInputText");
+        mInputTextField.setAccessible(true);
+        var mInputText = <android.widget.EditText>mInputTextField.get(this._android);
+        mInputText.setFilters([]);
     }
 }