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のプラグインさえ入っていれば利用できます。 なので、ビ…