diff --git a/CrossPlatformModules.csproj b/CrossPlatformModules.csproj index 36753dc3f..59a20fcbd 100644 --- a/CrossPlatformModules.csproj +++ b/CrossPlatformModules.csproj @@ -82,6 +82,7 @@ main-page.xml + main-page.xml @@ -96,15 +97,13 @@ details-page.xml - - main-page.xml - binding_tests.xml + @@ -542,6 +541,8 @@ Designer + + @@ -551,6 +552,11 @@ + + + + + @@ -1511,7 +1517,7 @@ False - + \ No newline at end of file diff --git a/apps/template-master-detail/app.css b/apps/template-master-detail/app.css index d7e46cecb..64530bbd8 100644 --- a/apps/template-master-detail/app.css +++ b/apps/template-master-detail/app.css @@ -13,15 +13,22 @@ ListView { horizontal-align: center; } +.detail-title { + margin: 10; + font-size: 26; + color: #3c3c3c; + horizontal-align: center; +} + .listItem { margin: 10; horizontal-align: center; color: #808080; - font-size: 24; + font-size: 20; } .info { margin: 10; - font-size: 24; + font-size: 20; color: #808080; } diff --git a/apps/template-master-detail/details-page.ts b/apps/template-master-detail/details-page.ts index f5cf8a2b4..a41dcea7b 100644 --- a/apps/template-master-detail/details-page.ts +++ b/apps/template-master-detail/details-page.ts @@ -1,8 +1,8 @@ import pages = require("ui/page"); import observable = require("data/observable"); - +import vmModule = require("./main-view-model"); // Event handler for Page "navigatedTo" event attached in details-page.xml export function pageNavigatedTo(args: observable.EventData) { var page = args.object; - page.bindingContext = page.navigationContext; + page.bindingContext = vmModule.mainViewModel.get("selectedItem"); } diff --git a/apps/template-master-detail/details-page.xml b/apps/template-master-detail/details-page.xml index 5d5be2a4c..b37a41623 100644 --- a/apps/template-master-detail/details-page.xml +++ b/apps/template-master-detail/details-page.xml @@ -1,6 +1,5 @@ - - - + + \ No newline at end of file diff --git a/apps/template-master-detail/details-view.xml b/apps/template-master-detail/details-view.xml new file mode 100644 index 000000000..b6a4c11b9 --- /dev/null +++ b/apps/template-master-detail/details-view.xml @@ -0,0 +1,4 @@ + + diff --git a/apps/template-master-detail/main-page.minWH600.xml b/apps/template-master-detail/main-page.minWH600.xml new file mode 100644 index 000000000..f1b30e0dc --- /dev/null +++ b/apps/template-master-detail/main-page.minWH600.xml @@ -0,0 +1,17 @@ + + + + \ No newline at end of file diff --git a/apps/template-master-detail/main-page.ts b/apps/template-master-detail/main-page.ts index b50df57f4..ca1064889 100644 --- a/apps/template-master-detail/main-page.ts +++ b/apps/template-master-detail/main-page.ts @@ -1,9 +1,12 @@ import observable = require("data/observable"); import pages = require("ui/page"); import frames = require("ui/frame"); +import platform = require("platform"); import listView = require("ui/list-view"); import vmModule = require("./main-view-model"); +var twoPaneLayout = Math.min(platform.screen.mainScreen.widthDIPs, platform.screen.mainScreen.heightDIPs) > 600; + // Event handler for Page "loaded" event attached in main-page.xml export function pageLoaded(args: observable.EventData) { var page = args.object; @@ -12,8 +15,9 @@ export function pageLoaded(args: observable.EventData) { export function listViewItemTap(args: listView.ItemEventData) { // Navigate to the details page with context set to the current data item - frames.topmost().navigate({ - moduleName: "app/details-page", - context: args.view.bindingContext - }); + if (!twoPaneLayout) { + frames.topmost().navigate("app/details-page"); + } + + vmModule.mainViewModel.set("selectedItem", args.view.bindingContext); } \ No newline at end of file diff --git a/apps/template-master-detail/main-page.xml b/apps/template-master-detail/main-page.xml index 1e957cf08..b15e0d6ac 100644 --- a/apps/template-master-detail/main-page.xml +++ b/apps/template-master-detail/main-page.xml @@ -1,4 +1,5 @@ - +