WD130P104P109_KK_WindowsPhone.indd

Size: px

Start display at page:

Download "WD130P104P109_KK_WindowsPhone.indd"

せとかさわまつ
7 years ago
Views:

1 Windows Phone Metro UI Jump into Metro! Windows Phone Windows Phone Microsoft Expression Blend Windows 8 Windows Phone P013 Ken Azuma P104 UX Daizen Ikehara P105 P109 View & Download Windows 8 Consumer Preview Metro 2 29 Windows 8 Consumer Preview 01 Windows Web Windows Phone started Metro UI OS 01 Windows 8 Consumer Preview consumer-preview Metro UI Windows Phone Windows Phone 02 Windows 8 Metro Metro OS Windows 02 Windows 8 Consumer Preview Windows Metro UI OS Phone Metro Windows 8 Metro 03 Windows Phone Metro Windows Store Windows Phone P109 Windows 8 Metro Windows Phone Metro Windows Phone Metro 04 Metro UI cookbook 104 Web Designing

com/ja-jp/home/getting_ started Metro UI OS 01 Windows 8 Consumer Preview http://windows.microsoft.

2 Windows Phone UI Silverlight XAML WebBrowser HTML Silverlight Windows Phone Microsoft Expression Blend EB XAML Windows Phone Apps Art Galley Windows Phone phone/hh Expression Blend UI EB P105 P106 Metro P107 P108 Expression Blend Expression Blend 02 UI 03 EB Visual Studio Visual Studio Visual Studio XAML Expression Blend Windows Phone Silverlight WPF Windows Presentation Foundation Windows 8 Metro Style XAML XAML UI EB Visual Studio Visual Studio EB EB TextBlock Image MediaElement Rectangle Shape Image 04 Image Source MainPage.xaml <Image Margin="103,165,117,287" Source="2011p.png" Stretch="Fill"/> Source MediaElement 05 Image Source Web Designing 105

com/ja-jp/windows phone/hh544699 02 Expression Blend UI EB P105 P106 Metro P107 P108 Expression Blend Expression Blend 02 UI 03 EB Visual Studio Visual Studio Visual Studio XAML

3 状態とビヘイビアーによるインタラクションデザインここでは画面上に 3 つのボタンのクリックに連動して配置されている 3 つの画像の表示状態を切り替えるという実装について考えてみよう 01 Silverlightではアプリケーションの状態ステートを決めておきあらかじめロジックが実装されているビヘイビアーという機能を利用すれば C# や VB Visual Basic といったコードビハインドを利用しなくてもアプリケーションへの機能の追加や拡張ができる EB を使ってこれら 2 つの仕組みを設定すると 01 のようなインタラクションを簡単に実現 01 初期状態は何も画像を表示していないがユーザーがボタンここでは画像1 画像2 画像3 を押すことでそれぞれの画像を切り替えて表示するという実装を行ってみるできるまずは UI 上に 3 枚それぞれの画面が表示されるという状態を作成してみようまでで重なりあっている 3 つの Image コントロールのうち 1 つのみを表示しているという状態が 3 つ作成されたことになるあとはボタンクリック時にそれぞれの状態へと遷移させることになるこの後に GoToStateAction と呼ばれるビヘイビアーを利用すると特定の UI 要素のイベントにあわせて 05 の状態を呼び出すことができるここまでで 3 つの特定画像のみ表示させる状態 02 ベースの状態は画像が何も表示されていないため 3 つの Image コントロールの Visibility プロパティを Collapsed 重ねて表示と設定する 03 状態パネルを開き右上の状態グループの追加ボタンを押して新しい状態グループを作成する今回は ImageStateGroup と名づけているを作成し状態を呼び出す GoToStateBehavior を 3 つのボタンに割り当てという状況を実現したことになるクリックイベントにコードを記述する方法に比べ UI 上の状態とトリガーになるアクションがお互いに依存しないモジュールとして分割されているため後々の UI 自体の変更に対しても最小限の変更で対応が可能になる 09 応用として Grid や StackPanel といったレイアウト用のコントロールを利用すれば複数のまとまった UI 要素に対して状態を設定できるので試してみよう 06 アセットパネルでビヘイビアー GoToState Action を選択し設定を行いたい UI 要素へたとえば画像 1 ボタンドラッグする追加されるとオブジェクトとタイムラインパネルにも GoToStateAction が表示される 106 Web Designing 04 次にグループ名の右側の状態の追加ボタンを押して状態を追加するここでは Image1State と名づけたプロパティパネルでは表示させる Image コントロールの Visibility プロパティを Visible にそれ以外を Collapsed と設定する 07 オブジェクトとタイムラインパネルに配置されたビヘイビアーを選択しプロパティパネルを開くここには処理を発動させるトリガーイベント発動条件そしてどの状態へ移行させるかを指定できるトリガーの EventName には Click イベントを共通プロパティの StateName には状態名 Image1State などを設定するの処理を 2 回繰り返して Image 2State Image3State を作成するそれぞれの状態では別々の Image コントロールについて Visibility の設定が行われることになるの処理を別の 2 つの Button コントロールに対しても繰り返すこれらの作業でそれぞれのボタンのクリックイベントから各状態へと遷移させる設定が整った 09 たとえばButton を RadioButton に変更してチェック時に表示を切り替えるといった UI も Expression Blend のみの作業で可能だ

枚それぞれの画面が表示されるという状態を作成してみよう 02 05 05 までで重なりあっている 3 つの Image コントロールのうち 1 つのみを表示しているという状態が 3 つ作成されたことになるあとはボタンクリック時にそれぞれの状態へと遷移させることになるこの後に GoToStateAction と呼ばれるビヘイビアーを利用すると特定の UI

4 レイアウトとナビゲーションを極めるさらに Windows Phone アプリケーションでは 1 画面をページという形で設定しているページ遷移を行う場合いくつかの方法とレイアウトが用意されているが今回は大まかに 3 つの解説を行うまずは HyperlinkButtonの活用についてだテキストリンクをクリックすると指定した画面に切り替わる HyperlinkButton コントロールは画面上アートボードに HyperlinkButton を配置し遷移先のページを NavigateUri プロパティに記述することで実装できる Web サイトのハイパーリンクに似た設定で画面遷移が行えるようになる EB ではぺージ NavigateUri を指定す 01 アセットパネルから HyperlinkButton をアートボードに追加ここではさわやかな春部分した後左 Content プロパティと NavigateUri プロパティを設定すれば画面遷移を行えるようになる右 02 MainPage.xaml <HyperlinkButton Content=" さわやかな春 " NavigateUri="/WP_PageNavigation;component/Contents/Spring1.xaml"/> HyperlinkButton によってクリック時に Contents\Spring1.xaml に遷移するように設定されているる際に一覧から選択するだけだ今回は詳しい解説を省くがもちろんボタンクリックイベントの処理ロジック上などからもページ遷移が可能だまたぺージ遷移については履歴を自動で管理しているのでハードウェアキーのページ遷移戻るボタンでページを戻すこともできる 03 ページの遷移パノラマとピボット戻る処理ほかの遷移のバリエーションには 2 種類ある一つはパノラマで 1 枚の横長キャンパス上に複数のページが配置されているようなレイアウトパターンだ 04 ページ遷移はユーザーのパン画面に指先を置き画面に接触させたまま指先を動かすまたはフリック移動したい方向に画面を指先で素早くなぞ 03 HyperlinkButton による遷移と戻るボタンによる戻る処理が実装されたパンまたはフリックで 1 ページ分の遷移が可能パノラマるで行う連続性流れのある表示を行いたい場合パンまたはフリックによる循環構造でコンテンツが回遊する状態ピボットに有効だもう 1 つがピボットだパノラマに似ているナビゲーションだが大きなデータのフィルタリングや複数のデータの表示などを意図して用意されたレイアウトパターンだこちらもユーザーのパンやフリックでページ遷移を行うが最終ページからさらに遷移をした場合最初のページに戻るという循環構造となっているユーザーの指の動きで遷移を行うパノラマパンまたはフリックで一画面分の遷移を行うそれぞれが関連性のあるコンテンツをレイアウトしたい際に適している 05 パンやフリック操作でページを切り替えるのはパノラマと同じ右方向に続けて遷移した場合最初のページに循環して戻る上の場合冬のあとに春が表示されるなおパノラマとピボットという 2つのページ遷移については Windows Phone パノラマアプリケーション Windows Phoneピボットアプリケーション 06 というテンプレートが用意されている 06 EB 左 Visual Studio 右ともにパノラマピボットアプリケーション用のプロジェクトテンプレートが用意されているまた個別に Panorama Pivot コントロールも提供されている Web Designing 107

$xaml"/> HyperlinkButton によってクリック時に Contents\Spring1.$

5 01 OS 01 OS SMS API SmsComposeTask 01OS 01 OS Visual Studio 05 MainPage.xaml or MSDN Windows Phone 28v=vs.92%29.aspx 04 2 SMS SmsComposeTask GSM WP_Tasks Visual Studio UI MainPage.xaml.cs using Microsoft.Phone. Tasks <Button x:name="smsbutton" Content="SMS " Click="SMSButton_Click" /> 06 MainPage.xaml.cs using Microsoft.Phone.Tasks; 07 MainPage.xaml private void SMSButton_Click(object sender, RoutedEventArgs e) { // SmsComposeTask smscomposetask = new SmsComposeTask(); // smscomposetask.show(); } SMS 08 OS SMS Click Show To Body 108 Web Designing

$xaml private void SMSButton_Click(object sender, RoutedEventArgs e) { // SmsComposeTask smscomposetask = new SmsComposeTask(); // smscomposetask.$

6 App Hub 02 xap xap App Hub 01 Marketplace Visual Studio Release Any CPU App Hub Expression Blend Windows Phone Icon Maker CodePlex png AppHub Marketplace 173.png AppHub Marketplace 99.png AppHub Marketplace Background.png ApplicationIcon.png MarketplaceTestKit xap 09 App Hub MSDN Windows Phone 08 App.xaml.cs 07 App.xaml.cs //Application.Current.Host.Settings.EnableFrameRateCounter = true; Go Metro Metro Style Metro Style Go Metro Metro StyleGo Metro Facebook Go Metro Facebook Web Designing 109

png 173 173 AppHub Marketplace 99.png 99 99 AppHub Marketplace Background.png 173 173 ApplicationIcon.

自己紹介池原大然デベロッパーエバンジェリスト INETA 登録スピーカー Blog

自己紹介池原大然デベロッパーエバンジェリスト INETA 登録スピーカー Blog Expression Blend を用いた Windows Phone アプリケーションインフラジスティックスジャパン池原大然自己紹介池原大然デベロッパーエバンジェリスト INETA 登録スピーカー Email dikehara@infragistics.com Blog http://bit.ly/igdaizen Twitter @Neri78 本日お話させていただくこと開発環境のおさらいと