Windows Phone 8 アプリ開発 02.デザイン
•
1 like•1,276 views
•Windows Phone Design Style •アプリのデザイン •XAMLレイアウト入門 •スタイルとテーマ •デザイン時データ •データバインディング •リストとLongListSelector
Recommended
More Related Content
Similar to Windows Phone 8 アプリ開発 02.デザイン
Similar to Windows Phone 8 アプリ開発 02.デザイン (20)
Windows Phone 8 アプリ開発 02.デザイン
- 2. 本資料は Microsoft Virtual Academy - Building Windows Phone 8 Apps Development Jump Start - M2: Designing Windows Phone Applications を日本語訳し再構成したものです。
- 3. Agenda Windows Phone Design Style アプリのデザイン XAMLレイアウト入門 スタイルとテーマ デザイン時データ データバインディング リストとLongListSelector
- 4. Windows Phone Design Style
- 5. The Windows Phone Design Style いつの間にかメトロから名称変更 見た目と操作感の統一 (日本の)地下鉄で採用されているサイ ンから発想 •タイポグラフィ •機能的なミニマムなデザイン アプリはこのスタイルを踏襲する事
- 11. アプリのデザイン
- 12. まず、紙上でデザインしてみよう VS2012+Office2013 = StoryBoard Windows Phoneステイシル&パッド • http://www.uistencils.com/ 12:38 text text text 12:38 text
- 14. ここまでできたらVisual Studioで かっこいいアプリをつくるためには、 コードとデザインを分離 •デザイナーはデザインに集中できる •プログラマはコードに集中できる XAMLとWindows Phone SDK •コードとデザインの分離をサポート
- 16. ツールでの作業: デザイン Blendを使ってUXデザイナがUI実装 •Blend for Visual Studio 2012
- 18. デザインスタイルとプログラミング プログラマは問題解決を念頭に • スタート地点としては最良 最近はUIの「見た目」も重要 • どんなによいコードで実装しても 使うのが難しかったら使ってもらえない Windows Phoneアプリを作るうえではUI に関心を持ちましょう グラフィックデザイナーの知り合いがい るなら開発チームに入ってもらうのがい いでしょう
- 19. 代表的なテンプレート Windows Phone アプリ • 無地のページテンプレート Windows Phone データバインドアプリ • Model-ViewModel-Viewのテンプレート Windows Phone パノラマアプリ • 異なる画面デザイン間をフリックで移動 する”Pivot”を作るテンプレート Windows Phone ピポットアプリ • パン操作で横長の画面を移動す る”Panorama”を作るテンプレート
- 20. XAMLレイアウト入門
- 22. Pivot Pages <phone:PhoneApplicationPage x:Class="RecipeDetailPage" ... /> <Grid x:Name="LayoutRoot" Background="Transparent"> <phone:Pivot Title=“PIVOT APPLICATION"> <!--Pivot item one--> <phone:PivotItem Header=“item1"> <Grid> </Grid> </phone:PivotItem> <!--Pivot item two--> <phone:PivotItem Header=“item2"> <Grid> </Grid> </phone:PivotItem> </phone:Pivot> </Grid> </phone:PhoneApplicationPage>
- 23. XAML and Objects XAML •XML Application Markup Language XAML要素=System.Windows.Controls 名前空間のオブジェクト 画面項目の見た目は、XAML要素に対 するレンダリング結果で決まる
- 27. 構成要素のXAML定義 <!--Pivot item one--> <phone:PivotItem Header="recipe"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Image Grid.Row=“0” Stretch="UniformToFill"/> <ScrollViewer Grid.Row="1"> <TextBlock TextWrapping="Wrap" /> </ScrollViewer> <StackPanel Grid.Row="2" Orientation="Horizontal"> <TextBlock Text="Prep time: " /> <TextBlock MinWidth="200" /> </StackPanel> </Grid> </phone:PivotItem>
- 28. グリッド構造 <!--Pivot item one--> <phone:PivotItem Header="recipe"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Image Grid.Row=“0” Stretch="UniformToFill"/> <ScrollViewer Grid.Row="1"> <TextBlock TextWrapping="Wrap" /> </ScrollViewer> <StackPanel Grid.Row="2" Orientation="Horizontal"> <TextBlock Text="Prep time: " /> <TextBlock MinWidth="200" /> </StackPanel> </Grid> </phone:PivotItem>
- 29. Demo: Laying out a Page http://code.msdn.microsoft.com/Windows-Phone-8-JumpStart-a6d1ed23
- 30. スタイルとテーマ
- 32. ブラシリソース Name 型 説明 PhoneAccentBrush SolidColorBrush 関心のある項目を選別する前景色 PhoneForegroundBrush SolidColorBrush 既定の前景色と境界線の色 PhoneBackgroundBrush SolidColorBrush ページおよびその他のコントロールの既定の背 景色 PhoneContrastBackgroundBrush SolidColorBrush 対照的な要素の背景色 PhoneContrastForegroundBrush SolidColorBrush 対照的な要素の前景色 PhoneDisabledBrush SolidColorBrush 無効化された前景および色 PhoneSubtleBrush SolidColorBrush 薄い前景と境界線 TransparentBrush SolidColorBrush 背景およびタッチ ターゲットに使用される 100% 透明なブラシ PhoneSemitransparentBrush SolidColorBrush イメージの背景にコントラストを付けるために 使用される部分的に透明な背景ブラシ PhoneChromeBrush SolidColorBrush アプリケーション バーの色に合わせるために 使用されます
- 33. TextBoxブラシ Name 型 説明 PhoneTextBoxBrush SolidColorBrush TextBox コントロール用のブラシ PhoneTextCaretBrush SolidColorBrush TextBox 内のキャレット用のブラシ PhoneTextBoxForegroundBrush SolidColorBrush TextBox コントロールの前景用のブラシ PhoneTextBoxEditBackgroundBrush SolidColorBrush TextBox コントロール編集背景用のブラシ PhoneTextBoxEditBorderBrush SolidColorBrush TextBox コントロール編集境界用のブラシ PhoneTextBoxReadOnlyBrush SolidColorBrush TextBox コントロール読み取り専用状態用の ブラシ PhoneTextBoxSelectionForegroundBrush SolidColorBrush TextBox コントロール選択前景用のブラシ
- 34. RadioButtonおよびCheckBoxのブラシ Name 型 説明 PhoneRadioCheckBoxBrush SolidColorBrush RadioButton と CheckBox 用のブラシ PhoneRadioCheckBoxDisabledBrush SolidColorBrush 無効にされた RadioButton と CheckBox の状 態に使用するブラシ PhoneRadioCheckBoxCheckBrush SolidColorBrush CheckBox チェック用のブラシ PhoneRadioCheckBoxCheckDisabledBrush SolidColorBrush 無効にされた CheckBox チェック用のブラシ PhoneRadioCheckBoxPressedBrush SolidColorBrush RadioButton と CheckBox の押された状態に 使用するブラシ PhoneRadioCheckBoxPressedBorderBrush SolidColorBrush RadioButton と CheckBox の押された状態に 使用するブラシ
- 35. 組込みスタイルを使う スタイルで指定されるプロパティ •FontFamily •FontSize •Foreground •Margin 設定はStyleプロパティ • {StaticResource PhoneTextSmallStyle} • {StaticResource PhoneTextNormalStyle} • {StaticResource PhoneTextSubTitleStyle}
- 36. テキストスタイル(その1) Name 対象: 型 説明 PhoneTextBlockBase TextBlock Style FontFamily: PhoneFontFamilyNormal FontSize: PhoneFontSizeNormal Foreground: PhoneForegroundBrush Margin: PhoneHorizontalMargin PhoneTextNormalStyle TextBlock Style BasedOn: PhoneTextBlockBase PhoneTextSubtleStyle TextBlock Style BasedOn: PhoneTextBlockBase Foreground: PhoneSubtleBrush PhoneTextTitle1Style TextBlock Style BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeExtraExtraLarge PhoneTextTitle2Style TextBlock Style BasedOn: PhoneTextBlockBase FontFamily:PhoneFontFamilySemiLight FontSize: PhoneFontSizeLarge PhoneTextTitle3Style TextBlock Style BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeMedium PhoneTextSmallStyle TextBlock Style BasedOn: PhoneTextBlockBase FontSize: PhoneFontSizeSmall Foreground: PhoneSubtleBrush PhoneTextLargeStyle TextBlock Style BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeLarge PhoneTextExtraLargeStyle TextBlock Style BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeExtraLarge
- 37. テキストスタイル(その2) Name 対象: 型 説明 PhoneTextGroupHeaderStyle TextBlock Style BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilySemiLight FontSize: PhoneFontSizeLarge Foreground: PhoneSubtleBrush PhoneTextContrastStyle TextBlock Style BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilySemiBold Foreground: PhoneContrastForegroundBrush PhoneTextAccentStyle TextBlock Style BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilySemiBold Foreground: PhoneAccentBrush PhoneTextHugeStyle TextBlock Style BasedOn: PhoneTextBlockBase FontFamily: PhoneFontFamilyLight FontSize: PhoneFontSizeHuge
- 39. テーマによる制御 テーマはlightとDark •背景色と文字色は自動変更 •テーマ別の制御用リソースもある テーマ別表示制御リソース テーマ別非透明度リソース Name 型 説明 PhoneDarkThemeVisibility Visibility 黒のテーマでは表示され、白のテーマでは折りたたまれます PhoneLightThemeVisibility Visibility 白のテーマでは表示され、黒のテーマでは折りたたまれます Name 型 説明 PhoneDarkThemeOpacity Double 濃いテーマでは 1、薄いテーマでは 0 PhoneLightThemeOpacity Double 黒のテーマでは 0、白のテーマでは 1
- 45. 配置用グリッドの使用 LayoutRootの先頭に設置 •先頭にすると最背面配置 <Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />
- 46. Marginプロパティで余白設定 <phone:PivotItem Header="recipe"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="240"/> <RowDefinition Height="*"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Image x:Name="RecipeImage" Margin="12" Stretch="UniformToFill"/> <ScrollViewer Grid.Row="1"> <TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" Margin="12,0,0,0" /> </ScrollViewer> <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="12" HorizontalAlignment="Left" > <TextBlock Text="Prep time: " Margin="0" /> <TextBlock x:Name="PrepTimeTextBlock" /> </StackPanel> </Grid> </phone:PivotItem>
- 47. Demo: Working with Style and Alignment http://code.msdn.microsoft.com/wpapps/Windows-Phone-8-JumpStart-ae4731ac
- 48. デザイン時データ
- 53. データバインディング
- 54. データバインディング 画面にデータを表示する方法として簡単なのは、 UIコントロールのプロパティに値を代入する方 法 • 例) textBox1.Text = "Hello, world"; 画面を直接変更するコードは変化に弱く、バグ が混入しやすいという側面があります 解決策はXAMLデータバインディングの採用 • データバインディングのソース（データ供給元） となるクラスをViewModelと呼びます UIコントロールはViewModelクラスのプロパ ティから表示値を自動的に取得 • プロパティ値が変われば表示も自動更新 • 画面入力はバインディングしたViewModelクラス のプロパティに自動反映
- 55. データバインディングの記述 Publicなプロパティを指定 • ImageコントロールのSourceプロパティと ViewModelクラスのBackgroudImageプロパ ティをバインディング データソースの定義 • データソースはコードで、 FrameworkElementがベースとなっているコ ントロール、フレーム、ページの DataContextプロパティに代入 • リストコントロールならItemSource <Image Stretch="UniformToFill" Source="{Binding BackgroundImage}"/>
- 56. データバインディングモデル Modeプロパティで同期方向を指定可能 • OneTime • １度だけ設定、以降の変更は反映されない • OneWay • データオブジェクトからの変更は反映 • 画面入力値はオブジェクトに伝搬されない • TwoWay • 変更点は双方向で伝搬される <Image Stretch="UniformToFill" Source="{Binding BackgroundImage, Mode=OneWay} "/>
- 58. WP7.1でのViewModel実装例 文字列でプロパティ名を指定 VB • NotifyPropertyChanged(“ID”) • Private Sub NotifyPropertyChanged(propertyName As String) C# • NotifyPropertyChanged(“ID”) • private void NotifyPropertyChanged(String propertyName)
- 59. WP8でのViewModel実装例 CallerMemberName属性を使う VB • Me.SetProperty() • Protected Sub SetProperty(<CallerMemberName> Optional propertyName As String = Nothing) As Boolean C# • this.SetProperty() • protected void SetProperty ([CallerMemberName] String propertyName = null)
- 60. リストをバインディングする ItemTemplate=“{…}” ItemsSourace=“{Binding …}” • ObservableCollectionをバインド • INotifyPropertyChangedを実装したクラス の中でのみObservableCollectionを定義可能 Public Property ItemGroups As ObservableCollection(Of RecipeDataGroup)
- 61. ObservableCollection バインディング用コレクション •要素の追加/削除で NotifyPropertyChangedを自動発呼 VB • Public Property Items As ObservableCollection(Of ItemViewContent) C# • Public ObservableCollection<ItemViewContent> Item {get; set;}
- 62. Model-ViewModel-View Model • ローカルやWebサービスからのデータなどを 公開するクラス ViewModel • Viewでデータバインドできる プロパティやメソッドを持ったクラス View • データ表示、ユーザ入力などの機能を備えた プレゼンテーションクラス • Viewにはアプリロジックを含まない • ViewModelとバインド http://msdn.microsoft.com/ja-jp/library/windowsphone/develop/gg521153.aspx
- 65. LongListSelectorの機能 ListBox拡張版 フラットリスト ヘッダ付グループリスト ジャンプリスト データ仮想化 元々はSilverlight Toolkit • ROMに含まれるようになって性能向上 • ListBoxの代わりに常用
- 68. リストとテンプレート リストに表示する内容はカスタマイズ可能 各要素はそれぞれ別テンプレートで指定 LongListSelectorには指定できる要素が多い • GroupFooterTemplate • グループ化した後ろに表示する内容を指定 • GroupHeaderTemplate • グループ化した先頭に表示する内容を指定 • ItemTemplate • １レコード分のレイアウトを指定 • JumpListStyle • JampListが有効な時のレイアウトを指定 • ListFooterTemplate • リストの終わりに表示する内容を指定 • ListHeaderTemplate • リストの先頭に表示する内容を指定 データ項目の表示を変えたいときはItemTemplateを変更
- 70. DataTemplateのXAML記述例 <phone:PhoneApplicationPage.Resources> <DataTemplate x:Key="RecipeDataGroupTemplate"> <Grid Margin="5" > <Grid.ColumnDefinitions> <ColumnDefinitionWidth="150"/> <ColumnDefinitionWidth="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Image Source="{Binding Image}"Width="150" Stretch="UniformToFill" Grid.RowSpan="2"/> <TextBlockText="{BindingTitle}" Grid.Column="1" Grid.Row="0" Style="{StaticResource …}"/> <TextBlockText="{Binding Description}" Grid.Column="1" Grid.Row="1" Style="{StaticResource …}" /> </Grid> </DataTemplate> </phone:PhoneApplicationPage.Resources>
- 71. Demo: Data Templates and Lists http://code.msdn.microsoft.com/Windows-Phone-8-JumpStart-ccebd0ea
- 72. Summary デザインで重要な５つの事柄 • 綺麗で、軽く、開放感があり、機敏に • 分かりやすいタイポグラフィ • 躍動感あふれるモーション • コンテンツを変に飾り立てない • 本物のデジタル性 – インフォグラフィック UIデザインはXAMLで記述 プロジェクトテンプレートはWindows Phone Design に準拠 Blendはデザイン時データを表示しながら作業可能 XAMLでデータバインディングするには、データクラ スのプロパティを指定 リスト要素のデザインはテンプレートで定義