ユニバーサル Windows アプリ開発
•
10 likes•2,925 views
・ユニバーサル Windows アプリ ・Visual Studio による開発 ・コード共通化における課題と解決方法 様々な解像度への対応 XAML の共有 プラットフォーム固有の XAML 作成 #ifdef Shared Project と partial class Portable Class Library と プラットフォーム抽象化 プラットフォーム固有のCSS による HTML / JavaScript 開発 プラットフォーム固有の WinJS への対応 デバイス間の状態の共有、ローミング
Recommended
Recommended
More Related Content
What's hot
What's hot (16)
Viewers also liked
Similar to ユニバーサル Windows アプリ開発
Similar to ユニバーサル Windows アプリ開発 (20)
More from Akira Onishi
More from Akira Onishi (12)
Recently uploaded
Recently uploaded (20)
ユニバーサル Windows アプリ開発
- 6.
- 9. App Model Tools StoreAPIs
- 10. App Model Tools StoreAPIs
- 11. common, similar rendering Button Slider ToggleSwitch ProgressBar etc (many more) common, different content Hub ListView GridView etc. common, different rendering DatePicker TimePicker CommandBar AppBar etc. unique SearchBox Pivot ContentDialog AutoSuggestBox etc.
- 12. User Interface Tools Store
- 13. User Interface App Model StoreAPIs
- 14. User Interface App Model ToolsAPIs
- 22. 22
- 26. Classes Structs Interfaces Windows 8.1 SDK 566 119 59 Windows Phone 8.1 SDK 624 131 57 +58 +12 -2
- 27. #if WINDOWS_APP var result = VisualStateManager.GoToState(this, "Windows", false); #elif WINDOWS_PHONE_APP var result = VisualStateManager.GoToState(this, "WindowsPhone", false); #endif
- 29. <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:PhotoSearch"> <Style x:Key="MonTextblock" TargetType="TextBlock"> <Setter Property="Foreground" Value="DeepPink"></Setter> </Style> <DataTemplate x:Name="APhotoTemplate"> <Grid> <Image Source="{Binding Path}" VerticalAlignment="Top" /> <TextBlock TextWrapping="Wrap" Text="{Binding Title}" FontSize="28" Margin="10"/> </Grid> </DataTemplate> </ResourceDictionary> <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:PhotoSearch"> <Style x:Key="MonTextblock" TargetType="TextBlock"> <Setter Property="Foreground" Value="Red"></Setter> </Style> <DataTemplate x:Name="APhotoTemplate"> <Grid> <Image Source="{Binding Path}" VerticalAlignment="Top" /> </Grid> </DataTemplate> </ResourceDictionary> PhotoSearch.Windows/CustomDictionary.xaml PhotoSearch.WindowsPhone/CustomDictionary.xaml PhotoSearch.Shared/MainPage.xaml <TextBlock Text="{Binding Title}" Style="{StaticResource MonTextblock}"/> <FlipView ItemsSource="{Binding Items}" ItemTemplate="{StaticResource APhotoTemplate}">
- 30.
- 32. Partial classes cleaner code Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References References App1_Shared ViewModel.cs ViewModel.cs ViewModel.cs App1_Shared App1_Shared Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_PCL References App1_PCL App1_PCL IAbstraction.cs PhoneImpl.cs WinImpl.cs Inversion of Control (IOC) purist; works also with PCL Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_Shared References App1_Shared App1_Shared #if block quick and dirty #if WINDOWS_PHONE_APP StatusBar.GetForCurrentView().HideAsync(); Windows.Phone.UI.Input.HardwareButtons.BackPressed += HardwareBackPressed; #endif #if WINAPI_FAMILY==WINAPI_FAMILY_PHONE_APP StatusBar::GetForCurrentView()->HideAsync(); #endif
- 33. Partial classes cleaner code Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References References App1_Shared ViewModel.cs ViewModel.cs ViewModel.cs App1_Shared App1_Shared Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_PCL References App1_PCL App1_PCL IAbstraction.cs PhoneImpl.cs WinImpl.cs Inversion of Control (IOC) purist; works also with PCL Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_Shared References App1_Shared App1_Shared #if block quick and dirty #if WINDOWS_PHONE_APP StatusBar.GetForCurrentView().HideAsync(); #endif // I can provide my own implementation of the missing APIs !!! namespace Windows.UI.ViewManagement { public class StatusBar { static StatusBar dummy = new StatusBar(); public static StatusBar GetForCurrentView() { return dummy; } public async Task HideAsync() {} } }
- 34. Partial classes cleaner code Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References References App1_Shared ViewModel.cs ViewModel.cs ViewModel.cs App1_Shared App1_Shared Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_PCL References App1_PCL App1_PCL IAbstraction.cs PhoneImpl.cs WinImpl.cs Inversion of Control (IOC) purist; works also with PCL Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_Shared References App1_Shared App1_Shared #if block quick and dirty // Windows¥ViewModel.cs public partial class ViewModel { async Task HideStatusBarAsync() { } } // Phone¥ViewModel.cs public partial class ViewModel { async Task HideStatusBarAsync() { await StatusBar.GetForCurrentView() .HideAsync(); } } // Shared¥Class1.cs await viewModel.HideStatusBarAsync();
- 35. Partial classes cleaner code Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References References App1_Shared ViewModel.cs ViewModel.cs ViewModel.cs App1_Shared App1_Shared Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_PCL References App1_PCL App1_PCL IAbstraction.cs PhoneImpl.cs WinImpl.cs Inversion of Control (IOC) purist; works also with PCL Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_Shared References App1_Shared App1_Shared #if block quick and dirty // Shared public interface IPlatformAbstractionLayer { Task HideStatusBarAsync(); } await pal.HideStatusBarAsync(); // Windows¥WinImpl.cs public class WindowsPAL: IPlatformAbstractionLayer { async Task HideStatusBarAsync() { } } // Phone¥PhoneImpl.cs public class PhonePAL : IPlatformAbstractionLayer { async Task HideStatusBarAsync() { await StatusBar.GetForCurrentView() .HideAsync(); } }
- 36. Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_Shared References App1_Shared App1_Shared #if block quick and dirty Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References App1_PCL References App1_PCL App1_PCL IAbstraction.cs PhoneImpl.cs WinImpl.cs Inversion of Control (IOC) purist; works also with PCL Partial classes cleaner code Solution 'App1' App1_Phone81 App1_Windows81 Class1.cs References References App1_Shared ViewModel.cs ViewModel.cs ViewModel.cs App1_Shared App1_Shared
- 37. 2560 x 1440 1920 x 1080 1366 x 768450 x 800 384 x 683
- 40. Solution 'App1' App1_Phone81 App1_Windows81 AdaptivePage.xaml References App1_Shared References App1_Shared App1_Shared Adaptive XAML cheap and easy Solution 'App1' App1_Phone81 App1_Windows81 References App1_Shared References App1_Shared App1_Shared NarrowPage.xaml WidePage.xaml Form-factor-specific tailored
- 41. Solution 'App1' App1_Phone81 App1_Windows81 AdaptivePage.xaml References App1_Shared References App1_Shared App1_Shared Solution 'App1' App1_Phone81 App1_Windows81 TabletPage.xaml References App1_Shared References App1_Shared App1_Shared PhonePage.xaml Adaptive XAML cheap and easy Solution 'App1' App1_Phone81 App1_Windows81 References App1_Shared References App1_Shared App1_Shared NarrowPage.xaml WidePage.xaml Form-factor-specific tailored #if WINDOWS_PHONE_APP rootFrame.Navigate(typeof(PhonePage)); #else rootFrame.Navigate(typeof(TabletPage)); #endif
- 42. Solution 'App1' App1_Phone81 App1_Windows81 AdaptivePage.xaml References App1_Shared References App1_Shared App1_Shared Solution 'App1' App1_Phone81 App1_Windows81 TabletPage.xaml References App1_Shared References App1_Shared App1_Shared PhonePage.xaml Adaptive XAML cheap and easy Solution 'App1' App1_Phone81 App1_Windows81 References App1_Shared References App1_Shared App1_Shared NarrowPage.xaml WidePage.xaml Form-factor-specific tailored static class PlatformAbstractionLayer { public static Type GetMainPageType() { return typeof(NarrowPage); } } var t = PlatformAbstractionLayer.GetMainPageType(); rootFrame.Navigate(t); static class PlatformAbstractionLayer { public static Type GetMainPageType() { return typeof(WidePage); } }
- 43. Solution 'App1' App1_Phone81 App1_Windows81 AdaptivePage.xaml References App1_Shared References App1_Shared App1_Shared Adaptive XAML cheap and easy Solution 'App1' App1_Phone81 App1_Windows81 References App1_Shared References App1_Shared App1_Shared NarrowPage.xaml WidePage.xaml Form-factor-specific tailored
- 44.
- 45. // プラットフォームの判定と // 利用するクラスの決定 if (! { } else { } <!– Shared.UI.Hub, Shared.UI.HubSection で抽象化 -> <section "Shared.UI.Hub"> <div "Shared.UI.HubSection" "{header: 'Section1'}"> <div "Controls.Section1"></div> </div> <div "Shared.UI.HubSection" "{header: 'Section2'}"> <div "Controls.Section2"></div> </div> </section> // Shared.UI.Hub, Shared.UI.HubSection の定義 WinJS.Namespace.define('Shared.UI', { Hub: hub, HubSection: hubSection });
- 46. Phone アプリ – PFN 12345 roaming Local Temp Windows アプリ – PFN 12345 roamingLocalTemp Local Cache PFN 12345 ローミング OneDrive stores up to 100kb of roaming data per app (not included in user quota). If app exceeds the limit, sync stops. Sync engine transfers data periodically based on triggers (user idle, battery, network, etc.) Other clients are notified of updated data via Windows Notification Service. If app is running when sync occurs, an event is raised.
- 47. private void OnSuspending(object sender, SuspendingEventArgs e) { // TODO: Save application state and stop any background activity ApplicationData.Current.RoamingSettings.Values["Hoge"] = model.Hoge; ApplicationData.Current.RoamingSettings.Values["Foo"] = model.Foo; } // TODO: Load state from previously suspended application model.Hoge = (bool?)ApplicationData.Current.RoamingSettings.Values["Hoge"] ?? false; model.Foo = (double?)ApplicationData.Current.RoamingSettings.Values["Foo"] ?? 1.0;