Windows Phone 8 アプリ開発 03.構築
•
0 recomendaciones•758 vistas
ページ遷移 アプリバー 画面方向変化の取得 画面解像度の取得 ローカライズ Windows Phone Toolkit ページ遷移アニメーション
Recomendados
Más contenido relacionado
Similar a Windows Phone 8 アプリ開発 03.構築
Similar a Windows Phone 8 アプリ開発 03.構築 (20)
Último
Último (7)
Windows Phone 8 アプリ開発 03.構築
- 2. 本資料は Microsoft Virtual Academy - Building Windows Phone 8 Apps Development Jump Start - M3: Building Windows Phone Applications を日本語訳し再構成したものです。
- 4. ページ遷移
- 5. フレームとページ フレーム • 最上位コンテナ • PhoneApplicationFrameクラス • ページ、システムトレー、アプ リバーを含む ページ • フレーム全体に広がっている • PhoneApplicationPageクラス • タイトル含む • アプリバーを任意に表示 12:38 フレーム ページ Application Bar
- 6. ページナビゲーション ページベースのナビゲーションモデル • Webページと同様 • ページの識別はURI • 基本的に状態を保持しない VB Me.NavigationService.Navigate(New Uri("/Views/NextPage.xaml", UriKind.Relative)) C# this.NavigationService.Navigate( new Uri(“/Views/NextPage.xaml", UriKind.Relative));
- 10. ページ間のデータ渡し 【呼出し元】 Me.NavigationService.Navigate( New Uri("/SecondPage.xaml?msg=“ &TextBox1.Text, UriKind.Relative)) 【呼出し先】 Protected override Sub OnNavigatedTo(e As NavigationEventArgs) If NavigationContext.QueryString.ContainsKey(“msg”)Then Dim msgAs String = NavigationContext.QueryString(“msg”) Me.TextBlock1.Text = msg End If End Sub
- 12. 巡回ナビゲーションの扱い メインページ→ページ２→ページ３ →メインページ このときに戻るキーを押したときに 何が起こるでしょうか？ • ユーザーはアプリの終了を予想 • 実際は、3番目のページに戻る • WP7.0では戻る制御に複雑なコードが必要だった • WP7.1からは • NavigationService.RemoveBackEntry()
- 13. NavigationService.RemoveBackEntry() MainPageに巡回時にパラメタ指定 NavigationService.Navigate(new Uri("/Views/MainPage.xaml?home=true", UriKind.Relative)); MainPageのOnNavigatedTo()に処理追加 If e.NavigationMode = System.WIndows.Navigation.NavigationMoe.New AndAlso NavigationContext.QueryString.ContainsKey(“home”) Then Do While (NavigationService.CanGoBack) NavigationService.RemoveBackEntry Loop End If Mybase.OnNavigatedTo(e)
- 15. アプリバー
- 16. システムトレイとアプリバー System Tray (システムトレイ) • 状態情報を表示 • システム側が管理 • アプリから表示/非表示制御可 能 • Microsoft.Phone.Shell.SystemT ray.IsVisible=False Application Bar (アプリバー) • 全体に対する処理のためのボ タンを配置 • 局所の場合はPopupメニュー
- 18. XAMLでのアプリバー定義 <phone:PhoneApplicationPage x:Class="CRMapp.MainPage“ …> <phone:PhoneApplicationPage.ApplicationBar> <shell:ApplicationBar x:Name="AppBar" Opacity="1.0" IsMenuEnabled="True"> <shell:ApplicationBar.Buttons> <shell:ApplicationBarIconButton x:Name="NewContactButton“ IconUri="Images/appbar.new.rest.png" Text="New" Click="NewContactButton_Click"/> <shell:ApplicationBarIconButton x:Name="SearchButton" IconUri="Images/appbar.feature.search.rest.png" Text="Find" Click="SearchButton_Click"/> </shell:ApplicationBar.Buttons> <shell:ApplicationBar.MenuItems> <shell:ApplicationBarMenuItem x:Name="GenerateMenuItem" Text="Generate Data" Click="GenerateMenuItem_Click" /> <shell:ApplicationBarMenuItem x:Name="ClearMenuItem" Text="Clear Data" Click="ClearMenuItem_Click" /> </shell:ApplicationBar.MenuItems> </shell:ApplicationBar> </phone:PhoneApplicationPage.ApplicationBar> </phone:PhoneApplicationPage>
- 21. Blendでのアプリバーデザイン
- 23. 画面方向変化の取得
- 25. Visual Studio 2012の新機能 デザイナーを表示したときに[デバイス]- [デバイスウィドウ] • [向き]で縦と横が選べる
- 28. Gridを使った縦向きレイアウト 縦向きではGridの2番目のColumは未使用 Row 0:Height=“Auto” Row 1:Height=“240” Row 2:Height=“*” Row 3:Height=“Auto” Column 0:Width=“*”
- 29. 横向きレイアウトでの要素の移動 横向きでは •レシピ記述は2番目カラムに移動 •3番目の行は未使用 Row 0:Height=“Auto” Row 1:Height=“240” Row 3:Height=“Auto” Column 0:Width=“*” Column 0:Width=“Auto”
- 30. 要素の移動 Private Sub PositionForOrientation() If (Me.Orientation = PageOrientation.LandscapeLeft OrElse Me.Orientation = PageOrientation.LandscapeRight) Then DirectionsScrollViewer.SetValue(Grid.RowProperty, 1) DirectionsScrollViewer.SetValue(Grid.ColumnProperty, 1) DirectionsScrollViewer.Margin = New Thickness(12, 0, 0, 0) RecipeGrid.Margin = New Thickness(12, -24, 0, 0) Else DirectionsScrollViewer.SetValue(Grid.RowProperty, 2) DirectionsScrollViewer.SetValue(Grid.ColumnProperty, 0) DirectionsScrollViewer.Margin = New Thickness(0, 0, 0, 0) RecipeGrid.Margin = New Thickness(12, 0, 0, 0) End If End Sub
- 32. 画面解像度の取得
- 33. ３つの画面解像度
- 34. 異なった3種類のUIに対応必要あり？ 答えは「No!」 WPはピクセル非依存のデバイス •OSがスケール解像度を使って解決 解像度 Aspect比 スケール ファクター スケール 解像度 WVGA 800 x 480 15:9 1.0x scale 800 x 480 WXGA 1280 x 768 15:9 1.6x scale 800 x 480 720p 1280 x 720 16:9 1.5x scale + 80ピクセル 853 x 480
- 36. 対応済みレイアウト Height=“240” • 画像は一定サイズ Height=“*” • 画面サイズに応じてサイズ調整 Height=“Auto” • TextBlockで必要なサイズに自動 調整 WVGA WXGA 720p
- 37. 画像 WXGA (1280 x 768) の解像度前提でイメージを提供 • WXGAに高品質のイメージを提供 • WCGAでは自動的に縮小表示？ • 720p (1280 x 720)でも高品質な画像表示がしたい 必要ならば３つの解像度に応じた画像を設定可能 • 例） MyImage.wvga.png MyImage.wxga.png MyImage.720p.png • Application.Current.Host.Content.ScaleFactorプロパ ティで画面解像度を取得 100→WVGA 160→WXGA 150→700p • 解像度に応じた画像をロードするコードを記述
- 38. スプラッシュスクリーン SplashScreenImage.jpgは768x1280の解 像度で用意 • 自動的に他の解像度のサイズに合わせて 表示 解像度それぞれに応じたスプラッシュス クリーンを提供したいならば、以下の名 前で画像を「追加で」用意 • SplashScreenImage.Screen-WVGA.jpg • SplashScreenImage.Screen-WXGA.jpg • SplashScreenImage.Screen-720p.jpg • SplashScreenImage.jpgファイルも必要
- 39. アプリアイコンとタイル アイコンとタイルをWXGA用に用意 フレームワークが自動的にWVGAと720p の解像度用に変更 タイルサイズ WXGA Application Icon 100 x 100 Small 159 x 159 Medium 336 x 336 Large 691 x 691
- 41. ローカライズ
- 42. Windows Phone 8 Language Support 50の言語をサポート • [設定]+[言語+地域]-[電話 の言語] WP7.1では24言語のサポー ト
- 43. Visual Studio 2012のテンプレート LocalizedStringsクラス • リソースへのアクセスを提供 • An instance of this is create in App.xaml in the Application Resources with the key LocalizedStrings Resources¥AppResources.resx • いくつかの文字列が定義済 • ローカリゼーション対応したい文字 列リテラルはresxファイルに定義 MainPage.xaml.cs • アプリバーのローカライズ用のコー ドがコメントアウトされて定義され ている
- 46. プロジェクトへの言語の追加 プロジェクトを右クリック • [翻訳言語の追加]メニュー [翻訳言語]ウィンドウで追加する言語を選んで[OK] • 英語を追加するなら、en-US Resourcesフォルダにファイルが追加される • AppResources.en-US.xlf
- 51. Windows Phone Toolkit Microsoft Windows Phoneチームの製品 • 以前は‘Silverlight Toolkit’ • Windows Phone Toolkitは標準コント ロールにない新機能を提供 • ソースコード、サンプル、ドキュメント を含んだWindows Phone用コントロール 集 3か月ごとに更新 • バグフィックス • 新コントロール
- 53. NuGet .NET用パッケージ管理システム サードパーティ製ライブラリの導入を簡素化 開発者向け 無料のオープンソース NuGetクライアントはVisual Studio 2012 (Express含む)に同封 NuGetを使ってWindows Phone Toolkitをプロジェクトに追加
- 55. ContextMenu
- 57. ToggleSwitch
- 58. WrapPanel
- 60. その他のコントロール Custom MessageBox Rating control AutoCompleteBox ExpanderView HubTile など ダウンロード元 • http://phone.codeplex.com
- 61. ページ遷移アニメーション
- 62. ページ遷移アニメーション ページ遷移アニメーションをアプリにつかすると、組 み込みアプリと同じようなページ遷移を実現可能 様々な遷移アニメーションがある • ロール、旋回、回転、スライド、ターン PhoneApplicationFrameの代わりにTransitionFrame • App.Xaml.vbのInitializePhoneApplicationメソッドPrivate Sub InitializePhoneApplication() If phoneApplicationInitialized Then Return End If ''RootFrame = New PhoneApplicationFrame() RootFrame = New TransitionFrame() AddHandler RootFrame.Navigated, AddressOf CompleteInitializePhoneApplication ' ナビゲーション エラーを処理します AddHandler RootFrame.NavigationFailed, AddressOf RootFrame_NavigationFailed '次のナビゲーションでバックスタックをクリアして、 AddHandler RootFrame.Navigated, AddressOf CheckForResetNavigation ' 再初期化しないようにします phoneApplicationInitialized = True End Sub
- 63. 有効化 XAMLでWindows Phone Toolkit の名前空間を指定 <phone:PhoneApplicationPage xmlns:toolkit=“clr-namespace:Microsoft.Phone.Controls;…” <toolkit:TransitionService.NavigationInTransition> <toolkit:NavigationInTransition> <toolkit:NavigationInTransition.Backward> <toolkit:TurnstileTransition Mode="BackwardIn"/> </toolkit:NavigationInTransition.Backward> <toolkit:NavigationInTransition.Forward> <toolkit:TurnstileTransition Mode="ForwardIn"/> </toolkit:NavigationInTransition.Forward> </toolkit:NavigationInTransition> </toolkit:TransitionService.NavigationInTransition> <toolkit:TransitionService.NavigationOutTransition> ： </toolkit:TransitionService.NavigationOutTransition>
- 66. Summary • ページ遷移はURIに基づいて実行される • 戻るボタンは前ページへ遷移 • URIにQueryStringを設定することで文字列を受け渡せる • ローカリゼーションのサポートはテンプレートに組込済 • 自動調整があるので異なる解像度への対応は容易 • WXGAを前提に作成すれば低解像度時にきれいに自動縮小 される • Windows Phone ToolkitはMSが提供しているVisual Studio の追加ライブラリ • Windows Phone Toolkitにはアプリにページ遷移アニメー ションやチルトエフェクトなどを追加する機能がある