atelier:mitsuba

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

連載:0から始めるExpression Blend 4 再入門

その48:ControlStoryboardActionでMouseEnterをTriggerにしたときにアニメーションが完結する前に再度走らなくする方法

1つのStoryboardを重複させるのは無理だけど、こんなオーダーを見かけたのでやってみた。@okazuki MouseEnterをトリガーにストーリーボード開始させるやるかただと連続で発生したときに前のアニメーションリセットされちゃうので、連続して発生したときには…

その47:WPFでSampleDataSetで作ったListBoxを横スクロールにして、選択時の表現をカスタマイズするまで

1.まっさらなWPFプロジェクトがあります 2.SampleDataSetを使って、画像を文字のプロパティを持ったCollectionをつくります。 3.Collectionをデザインビューにドラッグすると、いいかんじにListBoxが生成されます。 4.右クリックして、追加テンプレートの編…

その46:BlendでSakura Falling

Blendでさくらの花を散らせるアニメーションを作ってみました。@okazukiさんが手順じゃなくて、Blendの作業風景を見たい!って言ってたので、動画にしてみました。 今回はAiの段階からやってみました。 一部試行錯誤して、わかりにくいとこもあるかもですが…

その45:BlendからStyleのSetter Propertyを変更する。

例えば、ボタンがあるとして、このテンプレートを変更したいとき、右クリックして編集しますよね。 するとバインディングで予め定義されたプロパティがあることがわかります。 これらはテンプレートのより上のStyleで定義されていて、StyleのSetter Property…

その44:Behaviorで変更する値の間を補間する

経緯 とっても簡単です。 プロパティの値を変えるには、このブログで何度も扱ったChangePropertyActionがありますね。 Rectangleのwidthを500pxの変えるビヘイビアをボタンがクリックしたら実行するようにしました。 ボタンをおすとー 一瞬で変わってしまい…

その43:Gridの使い方

このエントリはExpression Blendアドベントカレンダー20121日目です。 ちょっと京都にお泊りしていて、手元にSurfaceしか無かったので一日遅れ。 (Surfaceのエントリも後でかくよぉ。。。)まず1回目はGridを使ってみましょう。 パネル系は多解像度に対応…

その43:Gridの使い方

このエントリはExpression Blendアドベントカレンダー20121日目です。 ちょっと京都にお泊りしていて、手元にSurfaceしか無かったので一日遅れ。 (Surfaceのエントリも後でかくよぉ。。。)まず1回目はGridを使ってみましょう。 パネル系は多解像度に対応…

その42:チェックボックスをカスタマイズして、on/offに画像を利用する

おでさんがチェックボックスよーわからへんってつぶやいた途端、 まわりのWPクラスタが「VSMでいいよ!あとはみつばたんにきけばおk!」って全力で丸投げされたのでやってみました。とっても簡単です。 例えば、以下の様なonとoffのイメージがあるとしまし…

その41:TextTrimmingプロパティを使ってみよう

これ知らなかったのですが、TextBlockにはTextTrimmingプロパティという便利なプロパティがあります。 TextTrimmingプロパティを設定すると、TextBlockのサイズからはみ出したTextを...に丸めてくれます。 早速使ってみましょう。まずは、SampleDataSetを使…

その40:DataStoreChangedTriggerを使ってみる

引き続き、アメリカ上空からお届けしております。蜜葉です。 いや、いんたぁねっとがないから暇とかそういうわけじゃないんですよ(今回はDataStoreChangedTriggerを試してみましょう。 前回のTimerTriggerのサンプルに追記します。 前回はボタンをタップす…

その39:TimerTriggerをつかってみる

ただいま0から始めるExpression Blend をシアトルからお届けしております!これまで、ビヘイビアの挙動や振る舞いについてはいくつかご紹介しましたが、そういえばTriggerについてはあんまり紹介してなかったですね。というわけで、しばらくはTrigger回でも…

その38:Expression BlendでDataStoreを作成する。

Expression Blendを使えばパネルからデータストアを作成することができます。 試しに利用してみましょう。1.データタブから新しいデータストアを作成します。 2.データストアに名前をつけます。 3.できたデータストアを編集します。 4.名前や初期値…

その37の補足:”Inkscapeから素材を作成して、Expression Blendで扱うまで”の罠って?

やまきさんにツッコミを頂いたので補足します。 結論からいうと、このxamlはBlendにインポート機能が無かった時代に作られたWPF向けのXAMLです。具体的に中を見てみましょう。Expression Blendにaiでインポートしたペンギンのxamlです。 <Canvas x:Name="penguin" HorizontalAlignment="Left" Height="365.6" UseLayoutRounding="False" VerticalAlignment="Top" Width="376.8"> </canvas>

その37:Inkscapeから素材を作成して、Expression Blendで扱うまで

「ねぇねぇ、みつばたん。みつばたん普段素材どやってつくってんのー?あたしアプリつくりたいんだけど素材作るのに苦労しちゃってー。。。」 「ほむほむ、普段はillustratorつかってますよー」 「えーでもあたしそんなお高いのもってないー。なんかフリーで…

その36:アクティブなコンテナーを固定する

このコーナーもだいぶニッチなところを扱うようになってきました。通常Expression Blendではオブジェクトパネルからコントロールを選択してアクティブな状態にし、その子要素にコントロールを配置します。 なにが言いたいかというと、例えばStackPanelを選択…

その35:コントロールにコメントをつける

Expression Blendではデザインプレビュー上でコントロールにコメントを付けることができます。 こんなかんじ。 付ける方法はとても簡単です。 1.オブジェクトパネルから、コメントを付けたいコントロールを選択します。 2.ツール→コメントを作成をクリッ…

その34:Expression Blendで扱う単位を変更する

Expression Blendではみなさんご存知の通り、WPF/Silverlight/Windows Phone/MetroStyleAppsのアプリケーション開発が可能です。 WPFやSilverlightでは、CSSやLayoutRootなどでアプリケーションのサイズを決めますが、Windows Phoneでは800px * 480pxとなっ…

その33:コントロールを円状に設置する

コントロールを縦や横にきれいにならべる方法はStackPanelを使えば簡単ですが、円状に並べるにはどうすればいいでしょうか。 マージンでそれっぽく並べるのはスマートじゃないですね。そんなときはPathListBoxを使えばとっても簡単にコントロールを並べるこ…

その32:コントロールを回転させる

「コントロールの回転ってどうやってやるの?」 そう言われて扱ってなかったことに気が付きました。 <Image HorizontalAlignment="Right" Margin="0,203,108,104" Source="/Background.png" Stretch="Fill" Width="173" RenderTransformOrigin="0.5,0.5"> <Image.RenderTransform> <CompositeTransform Rotation="47.526"/> </Image.RenderTransform> </Image> Expression …

その31:カードフリップアニメーション

こんなアニメーションです。 1.Expression BlendでWindows Phoneプロジェクトを作成します。 2.ContentPanel内にGridを作成し、Cardと名前を付けました。 3.さらにCardの中にGridを2つ重なるように作成し、BackとForwardと名付けます。 4.まずはカ…

その30:Expression BlendからEffectを利用する

Silverlight/WPFではHLSLを使ったEffectの適用が可能です。 Expression Blendを使えばとても簡単にEffectをかけることができます。 デフォルトではBlurEffectとDropShadowの2つが用意されています。試しに1つかけてみましょう。 サンプルピクチャを設置し…

その29:デザイナで切ったGridを編集する

「Expression Blendで切ったGridってどうやって編集すんのよー!」と昨日、さおさんに言われたので方法を。まず、Blendのデザイナ上で、Gridの枠の近くにマウスカーソルを持って行くと、黄色の線が出ます。 この状態でクリックすると、Grid.RowDefinitionsだ…

その28:ビヘイビアを使ったデータの表現

先日の勉強会の懇親会で、 「DataGridに表示した値の大きさによって、赤にしたり黒にしたりしたかったんだけど、いい方法がみつけられなくて、カスタムコントロール頑張って作ったの。。。」 なんてお話があったので、 「それビヘイビアで3分だよ!」ってデ…

その27:MouseDragElementBehavior

ビヘイビアの1つにMouseDragElementBehaviorというものがあります。 これ1つ使うだけで、簡単にマウスでドラッグすることができます。 LayoutRootにRectangleを作って、ビヘイビアをぺたっとしました。 実行してみましょう。 どこにでもドラッグできます。…

その26:Behavior ControlStoryboardAction

囲む会名古屋で@coelacanthさんに 「0から始めるExpression Blend 4は続き書かないんですか!」「ぜひビヘイビアをですねry」 なんて言われてしまったので、これはやらないといけないなぁ。。と あつた蓬莱軒で4000円の大盛ひつまぶしを食べながら考えて…

OITECでしゃべります。

9日土曜日に、0から始めるExpression Blend 4 再入門の実習をOITECでやってきます。 http://oitec.vbstation.net/modules/eguide/event.php?eid=12 70分のメインセッションでちょっと自信ないですが、 Blendに苦手意識のあるかたも使いこなしてる方も、ぜひ…

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

懇親会でこんなときどうすればいい?と聞かれたのでやってみました。BackgroundColorによって文字色が変えると、背景画像によって字が見えにくいとかあるかもしれません。 そこでBackgroundColorの反対色を設定する方法を紹介します。 1.BackgroundColorと…

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

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

その23:SketchFlowから仕様書を作る

SketchFlowの真骨頂その2! プロジェクトをなんとwordの形式にパブリッシュしてくれます。1.メニューのFileからExport Microsoft Wordをクリックします。 2.フィードバックを含むかどうかをチェックできます。テンプレートはデフォルトでいいでしょう。…

その22:SketchFlowのフィードバック機能を利用する

SketchFlowではビルドしたあとに、らくがきフィードバックやコメントを入れることが可能です。 これこそSketchFlowの真骨頂その1!フィードバックはビルドしたあとのページで可能なので、Silverlightのプラグインさえ入っていれば利用できます。 なので、ビ…

その21:SketchFlowのサイドバーを操作する

SketchFlowプロジェクトをビルドすると、サイドバーが出てきますね。 今回はそれの上部の操作方法です。1.こんなプロジェクトがあります。ビルドしましょう。 2.すると、ブラウザ左にサイドバーが出現しますね。 上から解説します。 3.これはページの…

その20:SketchFlowのComponent Screenを使ってみよう。

もう20回ですね。だいぶネタがなくなってきました。今回はカスタムコントロールの作成です。たとえば、以下の様なページがあるとしましょう。 Screen 1 Screen 2 Screen 3 それぞれのページからそれぞれのページへ遷移するメニューコントロールがほしいと…

その19:SketchFlowを使ってみるーアニメーション編ー

SketchFlowではStoryboardを使わなくても、パラパラ漫画のようにアニメーションを作成することができます。 この機能をSketchFlow Animationといいます。1.上の方にSketchFlow Animationパネルがあります。これがぱらぱらの1コマですね。 2.Add Frameで…

その18:SketchFlowを使ってみるー画面遷移編ー

Expression Blendの強みの1つであるSketchFlow SkechFlowはアプリケーションのプロトタイプを作るためのプロジェクトです。これはVSではできません。 早速やってみましょう。1.プロジェクトを作ります。 2.アートボードが出来ました。が普通と少し違い…

その17:コントロールにパースをかける。

SL3(だったかな?)で実装されたPerspective 3Dです。1.パースをかけたいコントロールをアートボードに設置します。 2.TransformパネルのProjectionの数値を変更します。 3.適当に数値を変更してみました。 簡単ですね! xamlで書くとこうなります。 <Button Content="Button" Margin="71,134,71,141"></button>…

その16:aiファイルを取り込む。

Expression Blendはパスもかけるし、ちょっとしたオブジェクトもかけるし、結構万能です。 でもデザイナーなら使い慣れたソフトウェアで開発したいですよね。 Blendにはaiファイルとpsdファイルをインポートする機能があります。たとえばこんなAdobe Illustr…

その15:Bindingで生成したItemをレイアウトする

その14ではSample Dataを使って、Data BindingしたListBoxを生成しました。 今回はその中身をレイアウトしましょう。1.まずはこんなSapmle Dataを作って表示します。 上から、Image、String(Lorem ipsum)、String(Price)ですね。 2.生成したListBoxを…

その14:Sample Dataを使ってみる。

例えば、コード側で、「こんなデータセットがあるから、いいように表示して」なんて言われた場合、「まずデータセットくれないとデザインやりにくいよ!」なんてことがあると思います。しかし、そのデータがどんな要素を持っているのかさえ、分かっていれば…

その13:Effect効果をつけよう。

Expression Blendでは、各コントロールにエフェクトを付けることができます。 今回はボタンを例にしてみましょう。1.ボタンを置いて、AppearanceパネルのEffect Newボタンをクリックする。 2.デフォルトではBlurとDrop Shadowが用意されています。 はじ…

その12:Visual State Managerを覚えよう。

だいぶBlendの難しい部分に入ってきました。Visual State Managerとは、コントロールの各状態における挙動をテンプレート化して定義するものです。 これを使えば、クリックしたら青色になりながらへっこんだり、オンマウスでぽこっと飛び出たりといったアニ…

その11:ビヘイビアで音声ファイルを再生しよう。

SilverightアプリにBGMを付けたかったり、SEをつけたいときも、ビヘイビアを使えば簡単に再生できます。1.プロジェクトを作ります。 2.再生したいファイル(wmaてmp3など)をプロジェクトパネルにドラッグします。 今回はdts.mp3を使います。 3.適当にボタンを…

その10:ビヘイビアでアニメーションを再生する

その8,9でだいぶアニメーションに慣れたと思います。 しかし、まだ一度もStoryboardを実行していませんね。 今回はビヘイビアを使って、ボタンクリックでStoryboardを実行させましょう。1.まず、適当なアニメーションを作ってください。 2.次にボタン…

その9:イージングをつかってみる。

イージングは物理演算を使った計算になるのかな? アニメーションに緩急をつけたりすることができます。 Flash/FlexでいうTweenerですね。まずは、Rectangleにアニメをつけて、左から右に動かしてみましょう。 こんなかんじですね。どこからどこまで移動する…

その8:アニメーションをやってみる。

ビヘイビアを紹介したところで、アニメーションをやってみましょう。 まずは、Rectangleを置いてみます。 今回はこのRectangleにアニメをつけてみます。 アニメを付けたいコントロールには名前が付いている必要があります。 なので、オブジェクトパネルの[Re…

その7:ビヘイビア

Blendにはとっても便利なビヘイビアというものがあります。 ビヘイビアはちっちゃなコードの塊で、ドラッグ&ドロップで挙動を定義できます。 ビヘイビアの一覧を見るには、左のメニューバーからAssetを選んで、Behaviorsタブをクリックします。 これを使え…

その6:ボタンを使ってみる。

きっと一番よく使うであろうコントロールはボタンでしょう。 今回はボタンを設置してみます。 左のバーからボタンを選択します。 アートボードにドロップします。 もちろん、色味も変えられます。 ボタンを押したらイベントが走ってほしいですよね。Blendで…

その5:グラデーションを操作する

前回はRectangleとEllipseを紹介しました。 今回はそれらで使えるグラデーションのおはなしです。まず、Rectangleを置いて、Fillをグラデーションにします。 グラデーションの色味を変えてみましょう。 グラデーションのバーのチップをクリックして、Editor…

その4:Rectangle、Ellipseを使ってみる

XAMLにはボタンやカレンダーなど様々なコントロールがあります。 どんなものがあるか、具体的に触ってみましょう。●Rectangle Rectangleをダブルクリックするか、選択してアートボードでドラッグします。 すると、アートボードにRectangleが表示されます。 …

その3:Hello Expression Blend

Expression Blendでハローワールドしてみましょう。1.Blendを立ち上げます。 2.左のバーに表示されているコントロールからテキストブロックを選んで、ダブルクリックします。 3.すると、Objects and TimelineパネルにTextBlockが表示されます。 同時にアート…

その2:プロジェクトをつくろう。

一番最初に、プロジェクトを作ってみましょう。1.スタート>すべてのプログラム>Microsoft Expression>Microsoft Expression Blend Preview for Silverlight 5を起動します。2.New Projectをクリックします。 3.今回はSilverlight Application + Websiteを…