Windows Phone 8 アプリ開発 03.構築

  • 401 views
Uploaded on

ページ遷移 …

ページ遷移
アプリバー
画面方向変化の取得
画面解像度の取得
ローカライズ
Windows Phone Toolkit
ページ遷移アニメーション

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
401
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Windows Phone 8アプリ開発03.構築2013.03.15初音玲
  • 2. 本資料はMicrosoft Virtual Academy- Building Windows Phone 8 Apps Development Jump Start- M3: Building Windows Phone Applicationsを日本語訳し再構成したものです。
  • 3. Agendaページ遷移アプリバー画面方向変化の取得画面解像度の取得ローカライズWindows Phone Toolkitページ遷移アニメーション
  • 4. ページ遷移
  • 5. フレームとページフレーム• 最上位コンテナ• PhoneApplicationFrameクラス• ページ、システムトレー、アプリバーを含むページ• フレーム全体に広がっている• PhoneApplicationPageクラス• タイトル含む• アプリバーを任意に表示12:38フレームページApplication Bar
  • 6. ページナビゲーションページベースのナビゲーションモデル• Webページと同様• ページの識別はURI• 基本的に状態を保持しないVBMe.NavigationService.Navigate(NewUri("/Views/NextPage.xaml", UriKind.Relative))C#this.NavigationService.Navigate( newUri(“/Views/NextPage.xaml", UriKind.Relative));
  • 7. ページ戻りページベースのナビゲーションモデル•Webページと同様•ページの識別はURI•基本的に状態を保持しないVBMe.NavigationService.GoBackC#this.NavigationService.GoBack();
  • 8. 戻るキーの動作変更戻るキーの動作を変更•例)Popupパネルを表示時戻るキーでページ戻りではなくパネルのクローズを期待
  • 9. 戻るキーの動作変更XAML<phone:PhoneApplicationPageBackKeyPress="PhoneApplicationPage_BackKeyPress“ …>コードPhoneApplicationPage_BackKeyPress• e.Cancel = True
  • 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”)ThenDim msgAs String = NavigationContext.QueryString(“msg”)Me.TextBlock1.Text = msgEnd IfEnd Sub
  • 11. ページ間のオブジェクト渡しページ間でのオブジェクト渡しが必要になるときは以外と多い•リストから項目を選択⇒詳細ページへオブジェクトをパラメタ渡しは困難解決方法はAppでViewModelを保持•パラメタに選択項目のIDを設定•IDでViewModelからデータを特定
  • 12. 巡回ナビゲーションの扱いメインページ→ページ2→ページ3→メインページこのときに戻るキーを押したときに何が起こるでしょうか?• ユーザーはアプリの終了を予想• 実際は、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 AndAlsoNavigationContext.QueryString.ContainsKey(“home”) ThenDo While (NavigationService.CanGoBack)NavigationService.RemoveBackEntryLoopEnd IfMybase.OnNavigatedTo(e)
  • 14. Demoページ遷移http://code.msdn.microsoft.com/Windows-Phone-8-JumpStart-6fbb8fc9
  • 15. アプリバー
  • 16. システムトレイとアプリバーSystem Tray (システムトレイ)• 状態情報を表示• システム側が管理• アプリから表示/非表示制御可能• Microsoft.Phone.Shell.SystemTray.IsVisible=FalseApplication Bar (アプリバー)• 全体に対する処理のためのボタンを配置• 局所の場合はPopupメニュー
  • 17. アプリバー独自メニューではなくアプリバーを使用最大4つのボタンとオプションメニューが配置可能ボタンは3つ以下でもOK右端の「…」をタップするとメニューを表示ボタンの画像は透過PNG12:38
  • 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>
  • 19. 横向き時のアプリバー横向き時はサイドにアプリバーを描画向きが変わるときは定義済アニメーションが実行される12:38
  • 20. アプリバーの非透明度opacityプロパティの値が1未満• スクリーン領域のサイズは変わらず、その上にアプリバーが表示されるopacityプロパティの値が1• スクリーン領域はアプリバーを除いた大きさに自動リサイズ
  • 21. Blendでのアプリバーデザイン
  • 22. Demoアプリバーのデザインhttp://code.msdn.microsoft.com/Windows-Phone-8-JumpStart-a5ca5d4b
  • 23. 画面方向変化の取得
  • 24. 画面の向きサンプルアプリは横向き表示に未対応すべてのアプリが横向き表示できるわけではなく、また対応する必要があるというわけではありません縦向き、横向きのどちらをまたは両方をサポートするか決めることができます
  • 25. Visual Studio 2012の新機能デザイナーを表示したときに[デバイス]-[デバイスウィドウ]• [向き]で縦と横が選べる
  • 26. 向きの選択サポート方向• ページ単位でXAMLプロパティを指定して、利用可能な向きを選択可能SupportedOrientations=“Portrait”SupportedOrientations=“PortraitOrLandscape”• 向きが変わった時にはイベント発生
  • 27. 横向きにはレイアウトの対応が必要横向きに最適化したレイアウトレイアウト未対応
  • 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 OrElseMe.Orientation = PageOrientation.LandscapeRight) ThenDirectionsScrollViewer.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)ElseDirectionsScrollViewer.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 IfEnd Sub
  • 31. Demo横向き対応http://code.msdn.microsoft.com/Windows-Phone-8-JumpStart-14a6b956
  • 32. 画面解像度の取得
  • 33. 3つの画面解像度
  • 34. 異なった3種類のUIに対応必要あり?答えは「No!」WPはピクセル非依存のデバイス•OSがスケール解像度を使って解決解像度 Aspect比スケールファクタースケール解像度WVGA 800 x 480 15:9 1.0x scale 800 x 480WXGA 1280 x 768 15:9 1.6x scale 800 x 480720p 1280 x 720 16:91.5x scale +80ピクセル853 x 480
  • 35. グリッドの行に“Auto”と“*”を指定Height=“Auto”•コントロールの高さに合わせたいグリッドの行の高さ指定に“Auto”Height=“*”•その他は高さ指定に“*”•もし、複数の行で高さ指定に“*”を指定したときは均等に高さが割り振られる
  • 36. 対応済みレイアウトHeight=“240”• 画像は一定サイズHeight=“*”• 画面サイズに応じてサイズ調整Height=“Auto”• TextBlockで必要なサイズに自動調整WVGAWXGA720p
  • 37. 画像WXGA (1280 x 768) の解像度前提でイメージを提供• WXGAに高品質のイメージを提供• WCGAでは自動的に縮小表示?• 720p (1280 x 720)でも高品質な画像表示がしたい必要ならば3つの解像度に応じた画像を設定可能• 例) MyImage.wvga.pngMyImage.wxga.pngMyImage.720p.png• Application.Current.Host.Content.ScaleFactorプロパティで画面解像度を取得100→WVGA160→WXGA150→700p• 解像度に応じた画像をロードするコードを記述
  • 38. スプラッシュスクリーンSplashScreenImage.jpgは768x1280の解像度で用意• 自動的に他の解像度のサイズに合わせて表示解像度それぞれに応じたスプラッシュスクリーンを提供したいならば、以下の名前で画像を「追加で」用意• SplashScreenImage.Screen-WVGA.jpg• SplashScreenImage.Screen-WXGA.jpg• SplashScreenImage.Screen-720p.jpg• SplashScreenImage.jpgファイルも必要
  • 39. アプリアイコンとタイルアイコンとタイルをWXGA用に用意フレームワークが自動的にWVGAと720pの解像度用に変更タイルサイズ WXGAApplication Icon 100 x 100Small 159 x 159Medium 336 x 336Large 691 x 691
  • 40. Demoマルチ解像度対応http://code.msdn.microsoft.com/Windows-Phone-8-JumpStart-417a7389
  • 41. ローカライズ
  • 42. Windows Phone 8 Language Support50の言語をサポート• [設定]+[言語+地域]-[電話の言語]WP7.1では24言語のサポート
  • 43. Visual Studio 2012のテンプレートLocalizedStringsクラス• リソースへのアクセスを提供• An instance of this is create inApp.xaml in the ApplicationResources with the keyLocalizedStringsResources¥AppResources.resx• いくつかの文字列が定義済• ローカリゼーション対応したい文字列リテラルはresxファイルに定義MainPage.xaml.cs• アプリバーのローカライズ用のコードがコメントアウトされて定義されている
  • 44. XAMLから文字列リソースにアクセスLocalizedStringにあるキーをStaticResourceとしてTextBlockのTextプロパティにバインド
  • 45. 多言語アプリツールキットインストール•http://go.microsoft.com/fwlink/?LinkID=253896&clcid=0x411有効化•[ツール]-[多言語アプリツールキットの有効化]メニュー
  • 46. プロジェクトへの言語の追加プロジェクトを右クリック• [翻訳言語の追加]メニュー[翻訳言語]ウィンドウで追加する言語を選んで[OK]• 英語を追加するなら、en-USResourcesフォルダにファイルが追加される• AppResources.en-US.xlf
  • 47. 他言語への翻訳プロジェクトを右クリック• [リビルド]メニューResourcesフォルダのxlfファイルを右クリック• [機械翻訳を生成]メニューRespircesフォルダのresxファイルを右クリック
  • 48. 既定の言語の設定WMAppManifest.xml[パッケージ]タブ• 既定の言語リソース名を選択• 日本語ならば「日本語(日本)」
  • 49. Demoローカリゼーションhttp://code.msdn.microsoft.com/Windows-Phone-8-JumpStart-413005e7
  • 50. Windows Phone Toolkit
  • 51. Windows Phone ToolkitMicrosoft Windows Phoneチームの製品• 以前は‘Silverlight Toolkit’• Windows Phone Toolkitは標準コントロールにない新機能を提供• ソースコード、サンプル、ドキュメントを含んだWindows Phone用コントロール集3か月ごとに更新• バグフィックス• 新コントロール
  • 52. Windows Phone Toolkitの入手法http://phone.codeplex.comサンプルコード付きソースコードバイナリインストールはNuGet•msi形式などでは提供されない
  • 53. NuGet.NET用パッケージ管理システムサードパーティ製ライブラリの導入を簡素化開発者向け無料のオープンソースNuGetクライアントはVisual Studio 2012 (Express含む)に同封NuGetを使ってWindows Phone Toolkitをプロジェクトに追加
  • 54. Windows Phone Toolkitコントロール
  • 55. ContextMenu
  • 56. DatePicker and TimePicker
  • 57. ToggleSwitch
  • 58. WrapPanel
  • 59. ListPickerWP7 ComboBox要素が少ない時のDropdownリスト要素が多いと画面を使った一覧選択
  • 60. その他のコントロールCustom MessageBoxRating controlAutoCompleteBoxExpanderViewHubTile などダウンロード元• http://phone.codeplex.com
  • 61. ページ遷移アニメーション
  • 62. ページ遷移アニメーションページ遷移アニメーションをアプリにつかすると、組み込みアプリと同じようなページ遷移を実現可能様々な遷移アニメーションがある• ロール、旋回、回転、スライド、ターンPhoneApplicationFrameの代わりにTransitionFrame• App.Xaml.vbのInitializePhoneApplicationメソッドPrivate Sub InitializePhoneApplication()If phoneApplicationInitialized ThenReturnEnd IfRootFrame = New PhoneApplicationFrame()RootFrame = New TransitionFrame()AddHandler RootFrame.Navigated, AddressOf CompleteInitializePhoneApplication ナビゲーション エラーを処理しますAddHandler RootFrame.NavigationFailed, AddressOf RootFrame_NavigationFailed次のナビゲーションでバックスタックをクリアして、AddHandler RootFrame.Navigated, AddressOf CheckForResetNavigation 再初期化しないようにしますphoneApplicationInitialized = TrueEnd Sub
  • 63. 有効化XAMLでWindows Phone Toolkit の名前空間を指定<phone:PhoneApplicationPagexmlns: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>
  • 64. チルトエフェクトページ上のすべてのコントロールにチルトエフェクトをかけるのは簡単<PhoneApplicationPage …toolkit:TiltEffect.IsTiltEnabled=“True”特定のコントロールのみも可能<ToggleButton …toolkit:TiltEffect.IsTiltEnabled=“True”
  • 65. Demoページ遷移アニメーションhttp://code.msdn.microsoft.com/Windows-Phone-8-JumpStart-7294e4df
  • 66. Summary• ページ遷移はURIに基づいて実行される• 戻るボタンは前ページへ遷移• URIにQueryStringを設定することで文字列を受け渡せる• ローカリゼーションのサポートはテンプレートに組込済• 自動調整があるので異なる解像度への対応は容易• WXGAを前提に作成すれば低解像度時にきれいに自動縮小される• Windows Phone ToolkitはMSが提供しているVisual Studioの追加ライブラリ• Windows Phone Toolkitにはアプリにページ遷移アニメーションやチルトエフェクトなどを追加する機能がある