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 http://jp.infragistics.com/ View & Download Windows 8 Consumer Preview Metro 2 29 Windows 8 Consumer Preview 01 Windows Web http://book.mycom.co.jp/wd/ Windows Phone http://create.msdn.com/ja-jp/home/getting_ started Metro UI OS 01 Windows 8 Consumer Preview http://windows.microsoft.com/ja-jp/windows-8/ 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 03 04 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
Windows Phone UI Silverlight XAML WebBrowser HTML Silverlight Windows Phone Microsoft Expression Blend EB XAML 01 4 01 Windows Phone Apps Art Galley Windows Phone http://msdn.microsoft.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 Expression Blend Windows Phone Silverlight WPF Windows Presentation Foundation Windows 8 Metro Style XAML XAML UI EB Visual Studio Visual Studio EB 04 03 EB TextBlock Image MediaElement Rectangle Shape Image 04 Image Source 05 06 06 MainPage.xaml <Image Margin="103,165,117,287" Source="2011p.png" Stretch="Fill"/> Source MediaElement 05 Image Source Web Designing 105
状態とビヘイビアーによる インタラクションデザイン ここでは 画面上に 3 つのボタンのクリックに連 動して 配置されている 3 つの画像の表示状態を切り 替える という実装について考えてみよう 01 Silverlightでは アプリケーションの 状態 ステー ト を決めておき あらかじめロジックが実装されて いる ビヘイビアー という機能を利用すれば C# や VB Visual Basic といったコードビハインドを利 用しなくても アプリケーションへの機能の追加や拡 張ができる EB を使って これら 2 つの仕組みを設定 すると 01 のようなインタラクションを簡単に実現 01 初期状態は何も画像を表示していないが ユーザーがボタン ここでは 画像1 画像2 画像3 を押すことで それぞれの画像を切り替えて表示するという実装を行ってみる できる まずは UI 上に 3 枚それぞれの画面が表示さ れるという 状態 を作成してみよう 02 05 05 までで 重なりあっている 3 つの Image コント ロールのうち 1 つのみを表示しているという 状態 が 3 つ作成されたことになる あとはボタンクリック 時にそれぞれの状態へと遷移させることになる この 後に GoToStateAction と呼ばれるビヘイビアー を利用すると 特定の UI 要素のイベントにあわせて 05 の状態を呼び出すことができる 06 08 ここまでで 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 など を設定する 05 02 04 の処理を 2 回繰り返して Image 2State Image3State を作成する それぞれの 状態では 別々の Image コントロールについて Visibility の設定が行われることになる 08 06 07 の 処 理 を 別 の 2 つ の Button コントロールに対して も繰り返す これらの 作業で それぞれのボ タンのクリックイベン トから各状態へと遷移 させる設定が整った 09 たとえばButton を RadioButton に 変 更して チェ ッ ク時に表 示を切り替 える といった UI も Expression Blend の みの作業で可能だ
レイアウトとナビゲーションを極める さらに 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 に遷移するように設定されている る際に一覧から選択するだけだ 01 02 今回は詳しい解説を省くが もちろんボタンク リックイベントの処理ロジック上などからもペー ジ遷移が可能だ また ぺージ遷移については履歴 を自動で管理しているので ハードウェアキーの ページ遷移 戻る ボタンでページを戻すこともできる 03 ページの遷移 パノラマ と ピボット 戻る 処理 ほかの遷移のバリエーションには 2 種類ある 一つ は パノラマ で 1 枚の横長キャンパス上に複数の ページが配置されているようなレイアウトパターンだ 04 ページ遷移はユーザーのパン 画面に指先を 置き 画面に接触させたまま指先を動かす またはフ リック 移動したい方向に画面を指先で素早くなぞ 03 HyperlinkButton による遷移と戻るボタンによる 戻る 処理が実装された パンまたはフリックで 1 ページ分の遷移が可能 パノラマ る で行う 連続性 流れのある表示を行いたい場合 パンまたはフリックによる循環構造で コンテンツが回遊する状態 ピボット に有効だ もう 1 つが ピボット だ パノラマに似ているナ ビゲーションだが 大きなデータのフィルタリングや 複数のデータの表示などを意図して用意されたレイ アウトパターンだ こちらもユーザーのパンやフリッ クでページ遷移を行うが 最終ページからさらに遷移 をした場合 最初のページに戻るという循環構造と なっている 05 04 ユーザーの指の動きで遷移を行う パノラマ パンまたは フリックで一画面分の遷移を行う それぞれが関連性のあるコ ンテンツをレイアウトしたい際に適している 05 パンやフリック操作でページを切り替えるのはパ ノラマと同じ 右方向に続けて遷移した場合 最初の ページに循環して戻る 上の場合 冬 のあとに 春 が表示される なお パノラマとピボットという 2つのページ遷移 については Windows Phone パノラマ アプリケー ション Windows Phoneピボット アプリケーショ ン 06 というテンプレートが用意されている 06 EB 左 Visual Studio 右 ともにパノラマ ピボットアプ リケーション用のプロジェクトテンプレートが用意されている ま た 個別に Panorama Pivot コントロールも提供されている Web Designing 107
01 OS 01 OS SMS API 02 03 SmsComposeTask 01OS 01 OS 02 03 Visual Studio 05 MainPage.xaml or 02 02 MSDN Windows Phone http://msdn.microsoft.com/ja-jp/library/ff769542% 28v=vs.92%29.aspx 04 2 SMS SmsComposeTask GSM WP_Tasks Visual Studio UI 04 05 MainPage.xaml.cs using Microsoft.Phone. Tasks 06 07 08 <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 01 02 01 02 Show To Body 108 Web Designing
App Hub 02 xap xap App Hub 01 Marketplace Visual Studio Release Any CPU 02 03 01 App Hub 4 http://create.msdn.com/ja-jp 04 Expression Blend 03 05 Windows Phone Icon Maker CodePlex http://wpiconmaker.codeplex.com/ 04 3 06 3 480 800 1 07 08 200.png 200 200 AppHub Marketplace 173.png 173 173 AppHub Marketplace 99.png 99 99 AppHub Marketplace Background.png 173 173 ApplicationIcon.png 62 62 06 05 MarketplaceTestKit xap 09 App Hub MSDN Windows Phone 08 App.xaml.cs 07 App.xaml.cs 1 08 09 //Application.Current.Host.Settings.EnableFrameRateCounter = true; Go Metro Metro Style Metro Style Go Metro Metro StyleGo Metro Facebook Go Metro Facebook http://www.facebook.com/5metro Web Designing 109