連載:0から始めるExpression Blend 4 再入門
SketchFlowプロジェクトをビルドすると、サイドバーが出てきますね。 今回はそれの上部の操作方法です。1.こんなプロジェクトがあります。ビルドしましょう。 2.すると、ブラウザ左にサイドバーが出現しますね。 上から解説します。 3.これはページの…
もう20回ですね。だいぶネタがなくなってきました。今回はカスタムコントロールの作成です。たとえば、以下の様なページがあるとしましょう。 Screen 1 Screen 2 Screen 3 それぞれのページからそれぞれのページへ遷移するメニューコントロールがほしいと…
SketchFlowではStoryboardを使わなくても、パラパラ漫画のようにアニメーションを作成することができます。 この機能をSketchFlow Animationといいます。1.上の方にSketchFlow Animationパネルがあります。これがぱらぱらの1コマですね。 2.Add Frameで…
Expression Blendの強みの1つであるSketchFlow SkechFlowはアプリケーションのプロトタイプを作るためのプロジェクトです。これはVSではできません。 早速やってみましょう。1.プロジェクトを作ります。 2.アートボードが出来ました。が普通と少し違い…
SL3(だったかな?)で実装されたPerspective 3Dです。1.パースをかけたいコントロールをアートボードに設置します。 2.TransformパネルのProjectionの数値を変更します。 3.適当に数値を変更してみました。 簡単ですね! xamlで書くとこうなります。 <Button Content="Button" Margin="71,134,71,141"></button>…
Expression Blendはパスもかけるし、ちょっとしたオブジェクトもかけるし、結構万能です。 でもデザイナーなら使い慣れたソフトウェアで開発したいですよね。 Blendにはaiファイルとpsdファイルをインポートする機能があります。たとえばこんなAdobe Illustr…
その14ではSample Dataを使って、Data BindingしたListBoxを生成しました。 今回はその中身をレイアウトしましょう。1.まずはこんなSapmle Dataを作って表示します。 上から、Image、String(Lorem ipsum)、String(Price)ですね。 2.生成したListBoxを…
例えば、コード側で、「こんなデータセットがあるから、いいように表示して」なんて言われた場合、「まずデータセットくれないとデザインやりにくいよ!」なんてことがあると思います。しかし、そのデータがどんな要素を持っているのかさえ、分かっていれば…
Expression Blendでは、各コントロールにエフェクトを付けることができます。 今回はボタンを例にしてみましょう。1.ボタンを置いて、AppearanceパネルのEffect Newボタンをクリックする。 2.デフォルトではBlurとDrop Shadowが用意されています。 はじ…
だいぶBlendの難しい部分に入ってきました。Visual State Managerとは、コントロールの各状態における挙動をテンプレート化して定義するものです。 これを使えば、クリックしたら青色になりながらへっこんだり、オンマウスでぽこっと飛び出たりといったアニ…
SilverightアプリにBGMを付けたかったり、SEをつけたいときも、ビヘイビアを使えば簡単に再生できます。1.プロジェクトを作ります。 2.再生したいファイル(wmaてmp3など)をプロジェクトパネルにドラッグします。 今回はdts.mp3を使います。 3.適当にボタンを…
その8,9でだいぶアニメーションに慣れたと思います。 しかし、まだ一度もStoryboardを実行していませんね。 今回はビヘイビアを使って、ボタンクリックでStoryboardを実行させましょう。1.まず、適当なアニメーションを作ってください。 2.次にボタン…
イージングは物理演算を使った計算になるのかな? アニメーションに緩急をつけたりすることができます。 Flash/FlexでいうTweenerですね。まずは、Rectangleにアニメをつけて、左から右に動かしてみましょう。 こんなかんじですね。どこからどこまで移動する…
ビヘイビアを紹介したところで、アニメーションをやってみましょう。 まずは、Rectangleを置いてみます。 今回はこのRectangleにアニメをつけてみます。 アニメを付けたいコントロールには名前が付いている必要があります。 なので、オブジェクトパネルの[Re…
Blendにはとっても便利なビヘイビアというものがあります。 ビヘイビアはちっちゃなコードの塊で、ドラッグ&ドロップで挙動を定義できます。 ビヘイビアの一覧を見るには、左のメニューバーからAssetを選んで、Behaviorsタブをクリックします。 これを使え…
きっと一番よく使うであろうコントロールはボタンでしょう。 今回はボタンを設置してみます。 左のバーからボタンを選択します。 アートボードにドロップします。 もちろん、色味も変えられます。 ボタンを押したらイベントが走ってほしいですよね。Blendで…
前回はRectangleとEllipseを紹介しました。 今回はそれらで使えるグラデーションのおはなしです。まず、Rectangleを置いて、Fillをグラデーションにします。 グラデーションの色味を変えてみましょう。 グラデーションのバーのチップをクリックして、Editor…
XAMLにはボタンやカレンダーなど様々なコントロールがあります。 どんなものがあるか、具体的に触ってみましょう。●Rectangle Rectangleをダブルクリックするか、選択してアートボードでドラッグします。 すると、アートボードにRectangleが表示されます。 …
Expression Blendでハローワールドしてみましょう。1.Blendを立ち上げます。 2.左のバーに表示されているコントロールからテキストブロックを選んで、ダブルクリックします。 3.すると、Objects and TimelineパネルにTextBlockが表示されます。 同時にアート…
一番最初に、プロジェクトを作ってみましょう。1.スタート>すべてのプログラム>Microsoft Expression>Microsoft Expression Blend Preview for Silverlight 5を起動します。2.New Projectをクリックします。 3.今回はSilverlight Application + Websiteを…
今回の試用版Expression BlendはSilverlight 5にのみ対応しています。 なので、Silverlight 5の開発環境を整えましょう。1.まず、Visual Studio 2010 SP1か、Visual Web Developer 2010 Express SP1をインストールしてください。SP1を当てていない場合はこ…
「VSはわかるけどBlendまったくわかんねーよー」 なんてのをハンズオンや勉強会でよく聞きます。一方でSilverlight5の発表に伴い、Microsoft Expression Blend Preview for Silverlight 5が公開されました。 http://www.microsoft.com/downloads/en/details.…