atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing.　なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

その０：はじめに。

連載：MetroUIから始めるWindows Phone 7

0から始めるExpression Blend再入門その２４,２５ が、気づいたらWindows Phone 7じゃないか！（棒


でもって、意外とMetroUIとかWP7らしいデザインとかって需要があるのかなぁと思ったので、
Expression Blendを使って”MetroUIから始めるWindows Phone 7”をやろうとおもいます。



MetroUIから〜とか言ってるけど、しばらくはBlendで出来るWP7の過去記事をまとめますね（ぉぃ



ターゲットはWindows Phone 7開発してみた人、デザインちょっとやりたい人ですね。
難易度的には、0から始めるExpression Blend再入門をひと通りやってれば、簡単じゃないかなぁと思います。
ようはExpression Blendを使うにあたっての用語が分かってればいけるかな！きっと！

まぁまぁ、またーりやっていきましょうかね。

その１：BackgroundColorに合わせて画面をデザインする

連載：MetroUIから始めるWindows Phone 7

//再掲載

BackgroundColorによって文字色が変えると、背景画像によって字が見えにくいとかあるかもしれません。
そこでBackgroundColorの反対色を設定する方法を紹介します。
１．BackgroundColorとなるPhoneBackgroundBrushをLayoutRootに設定します。

２．文字色をPhoneContrastBackgroundColor（反対色）に設定します。

これで、BackgroundColorによって表示が変わりました。
左が黒背景設定、右が白背景設定です。

３．この状態で背景画像にしたいイメージを半透明で設置します。

すると、このようにいい感じに表示されますね！
黒背景設定

白背景設定

その２：画像をジェスチャーで操作する。しかもノンコーディングで。

連載：MetroUIから始めるWindows Phone 7

//再掲載

以前のジェスチャーの実装方法で、こんなふうに書きました。
Windows Phone 7 のはてなフォトライフビューワを作る (後編)その３ージェスチャーを実装しようー
http://d.hatena.ne.jp/c-mitsuba/20110312#1299859371

しかし、やっぱりUIにコードを書きたくないので、ビヘイビアで実装する方法を紹介します。
これはWP7だけでなくSIlverlight・WPF・XNAでも利用できます。

今回使うビヘイビアはこれです。
Silverlight / Windows Phone 7 Multi-Touch Manipulation and Inertia Behavior
http://multitouch.codeplex.com/
http://gallery.expression.microsoft.com/MultiTouch

早速ためしてみましょう。
１．操作したい画像を置きます。

２．それをCanvasでくくります。

３．ダウンロードしてきたzipの中にある３つのdllを参照に追加します。
MultiTouch.Behaviors.Silverlight.WP7.dll
System.Windows.Input.Manipulations.dll
System.Windows.Interactivity.dll
４．ビヘイビアの中にある[MultiTouchManipulationBehavior]をimageに追加します。


５．すると、その他タブに設定が出ます。
回転や移動、拡大縮小のほか、最大最小サイズと加速度の適用が設定できます。

６．実行結果です。

Surfaceみたいなかんじですね！

Windows Phone 7が女子ウケしそうな３つの理由

WindowsPhone7

MetroUIかわいいよMetroUI、、そんなこといってたら。


とあるえのぐさんと、とあるMVVM王子につかまりましたｗｗｗ

Σ！

というわけで。。。。





実際、スタバで作業をしていてWindows Phone 7を横にぽんっとおいておくと、隣に座ってるお姉さんに声をかけられることがたまにあったりします。
たとえばマッサージ師さんだったり、大学生だったり、OLさんだったり。。
20代半ばのいわゆるナチュラル系女子な柔らかい印象のお姉さん。
あとは、ポスターとか紙媒体が好きそうな女の子に評判がいいかんじ。

ということで、Windows Phone 7が女子ウケしそうな３つの理由をまとめてみた。
たった３つと思うかもしれないが、この３つはiPhoneにもAndroidにもなかった要素じゃないかなぁ。


１．マイナスのデザイン

ホーム画面が四角形(=タイル)で構成されたシンプルなデザイン。
タイルの色はPhoneAccentColorで塗りつぶされ、メトロなアイコンで使われる色数は３種類ぐらい。
アイコンが抽象化されて、色そのものが持つ印象をユーザーに与える割合が大きくなった。

例えば男性的でモダンなホーム画面

例えばシンプルで女性的なホーム画面

２．嫌味のないアニメーション

画面をアンロックするときのパネルが落下するアニメーションや、タイルを展開する時のパラパラとしたアニメーション。
どちらも、シュッ！とかスパッ！といったスタイリッシュでかっこいいといったイメージではなくて、どちらかと言えば、ぽとん。とか、ぱらぱらぱら。。といった可愛げがあるイメージ。

３．写真の多用

抽象化されシンプルになったデザインは言い換えれば、味気ないとも言えるかもしれない。
でも、そこにいいアクセントを加えるのが写真の多用かなぁと思った。

Peopleタイルに友達のプリクラがパラパラと表示されたりすると、それは一昔前のプリクラ帳を思い出したりする。
それにPeopleハブにフィードが表示されるあたり、持つ人が持てば、電子化された動的なプリクラ帳になったりするのかなぁと。
Musicタイルが再生しているアーティストに変わるのもお洒落で評判がいいですね。

まとめ。

iPhoneはグラデーションでリッチさを表現するし、Androidはごてごてしがちなアニメーションでリッチさを表現しようとする。
一方でWindows Phone 7はよりシンプルに、より抽象化していった印象。

あとはクックパッドとかルナルナとかアプリケーションが充実するのと、やっぱり端末が可愛くないのでNokiaに期待したいところ。
女子に流行れば、他のクラスタにも流行るだろうし！

あとは、
「このくっくぱっどアプリ、僕が作ったんですよー」
「きゃーすてきー！」
このくだりだけですね！

カフェではわざとカウンターに座って、何気なくWindows Phone 7を見せつけよう！

その３：DataBindingをタイルっぽく

連載：MetroUIから始めるWindows Phone 7

サンプルデータをPanelにぽいっちょすると、ListBoxで一覧が表示されますよね。
今回はその辺のXAMLを編集して、タイルっぽく見せようと思います。
SampleDataSetをListで表示するとこんなかんじですね。

newPhotoListBox選択して右クリック、現在のテンプレートを編集を選択します。
すると、Bindingされたデータのレイアウトを編集することができます。

まずは画像のサイズをそれっぽくしましょう。
200*200にして、StretchをUniformToFillにします。

次にタイトルの位置を画像と重ねるように調整します。
スタックパネルでコントロールが縦積みになっているので、マージンで調整します。
今回は、Margin="5,-27,0,0"で調整してみました。

この文字のOpacityを0.7にして、文字色をPhoneAccentColorにしてみました。
あとWidth="195"としておくと、タイトルが長すぎることはなくなります。

あとはこれを包んでいるStackPanelにMargin="10"を入れておきます。

しかし、このままだと、画像が縦に並んでるだけで、WP7のタイルっぽくないですね。
次に画像を２列に並べてみましょう。
newPhotoListBoxを右クリックで選択して、ItemsPanelを選択します。

次の画面はOKでいいでしょう。

すると、オブジェクトパネルにStackPanelが置かれています。

このStackPanelをtoolkitのWrapPanelに変えます。
直接XAMLをいじってもいいですし、StackPanelを削除してからWrapPanelをおいてもいいでしょう。
すると、２列になりますね。

で、パネルをもう少し右に置きましょう。
HorizontalAlignmentをRightにします。

で、ビルドしてみましょう。
どうでしょう？タイルっぽくなったんじゃないでしょうか？

その４：タイルエフェクトをつけよう

Silverlight 連載：MetroUIから始めるWindows Phone 7

すっごくかんたん！

<phone:PhoneApplicationPage
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
	xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:im="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" 
	x:Class="FotolifeView.MainPage"
	d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
	SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
	shell:SystemTray.IsVisible="True"
	toolkit:TiltEffect.IsTiltEnabled="True">

一番最後の１行(toolkit:TiltEffect.IsTiltEnabled="True") を追記するだけ！
これで、タイル化したボタンが傾きます。

以上でWindows Phone 7 のはてなフォトライフビューワを作るはおしまいにします。
背景とかアニメーションはみなさんのセンスでっ！