Expression Blend Tips

Expression Blend SP1 日本語版

なか-chan@最愛のiMac — Fri, 21 Dec 2007 14:10:00 GMT

そういえば、Microsoft Expression Blend Service Pack 1が出ていました。

Expression Blend SP1適用後でも、VS2005形式のプロジェクトが作成されますが、
VS2008形式に変換されたプロジェクトも、Expression Blendと相互に開けます。

開発環境は整ったなぁ！あとは作るだけ～

[Expression Blend Tips]初音ミクに対抗してWPFでおしゃべり！

なか-chan@最愛のiMac — Sat, 15 Sep 2007 16:07:00 GMT

世の中、初音ミクというバーチャル・アイドル歌手が流行っているらしいですが、WPFでも簡単にパソコンで音声合成を楽しめるという記事を見つけました。こちらです。学び、そして考えるのWPFがしゃべったー。という記事です。実際にやってみると実に簡単で面白いです。

では、実際にExpression BlendとVisual Studio 2005 を使ってしゃべらせてみましょう。

まず、Expression Blendを起動し、新規プロジェクトを作成します。
左側の、TextBoxコントロールをダブルクリックし、Windowに配置します。

①ウィンドウサイズを、テキストボックスに合わせて小さくしておきましょう。
②種類がTextBoxになっていることを確認し、名前を「textBox1」とつけます。
③そのままイベントボタンを押して、イベントウィンドウに切り替えます。
④KeyDownプロパティをダブルクリックすると、KeyDownのイベント
　が自動的に作成され、Visual Studioが開きます。

Visual Studioの右側、参照設定を右クリックし[参照の追加...]を選択します。

参照の追加ダイアログで、「.NET」から「System.Speech」を追加します。

以下のコードを入力します。

// テキストボックスのキーが押されたとき
private void textBox1_KeyDown(object sender, 
　　　　　System.Windows.Input.KeyEventArgs e)
{
    // リターンキー以外は戻る
    if (e.Key != System.Windows.Input.Key.Return) return;
    
    // (参照設定にSystem.Speechが追加されていること)
    // スピーチシンセサイザを作成
    System.Speech.Synthesis.SpeechSynthesizer ss =
        new System.Speech.Synthesis.SpeechSynthesizer();
    
    // textBox1の言葉を話す
    ss.Speak(textBox1.Text);
}

以上で完成です。[F5]キーを押して、実行してみましょう。
何か文字を入力して、リターンキーを押すと、入力した文字をしゃべります。このままだととりあえず、英語のみのようです。

[Expression Blend Tips]意外に描きにくい図形を描く(井桁)

なか-chan@最愛のiMac — Sat, 21 Jul 2007 08:09:00 GMT

意外に描きにくい図形 IIJIMASさん

以外に書きにくい図形2 中博俊さん

3Dだから当たり前なんだけどえムナウさん

上のような、図形を
またまたExpression Blendを使って書いてみました。

①の黄色い四角形を描きます。(高さ1幅5で描きました)
（グリッド表示をオンにすると正確に描きやすくなります）
①をコピー＆ペーストして回転させ、②を作ります。
回転は、四角形のコーナーにカーソルを持っていくと、
⇔のようになりますので、
[shift]キーを押しながら、回転させてください。
きっちり15度ずつ回転させることができます。
色を赤に変えて、②の位置に置きます。

残りも、黄色いものをコピーして作成してください。
最後に5番目の四角形も作成します。
上の図ではわかりやすいように、ずらして配置していますが、
実際には、正確に下の図形と重なったままにしてください。

ここで、オブジェクトとタイムラインから、
5番目の黄色と4番目の緑、2つの四角形を選択します。
([shift]キーを押しながら2つ選択してください)

この状態で、[オブジェクト]メニュー - [結合] - [減算]を
選択すると、以下のような、緑から、黄色の部分が
引かれた緑の図形ができあがります。
（実際には正確に重なっていますがわかりやすいように
ずらしています）

以上で、完成です。
緑だけはPathに変換されますが、残りはRectangleです。

[Expression Blend Tips]意外に描きにくい図形を描く(メビウスの輪)

なか-chan@最愛のiMac — Thu, 19 Jul 2007 06:45:00 GMT

意外に描きにくい図形 IIJIMASさん

以外に書きにくい図形中博俊さん

3Dだから当たり前なんだけどえムナウさん

Expression Blendを使って書いてみました。
ポイントは、
①のグリッドの表示をオンにしておく。
②のグリッド線への位置合わせをオンにしておく。
③と④などの交差するところはまず離して描いておき、
あとで直接選択ツールを使ってポイントを上にずらす。
（カーソルが＋マークになってポイント追加モードに
なってしまうのを避けるため）
というところでしょうか。
ペンツールを使って1パスで描いています。

次に色をつけます。
Fillをグラデーションに設定し、最後に
ブラシの変換という矢印のアイコンのツールが
Expression左端にありますので、それを使って
グラデーションの方向を斜めにして出来上がりです。

[Expression Blend Tips]ハート形のウィンドウを作ってみよう(その2)

なか-chan@最愛のiMac — Thu, 05 Jul 2007 19:58:00 GMT

[Expression Blend Tips]ハート形のウィンドウを作ってみよう(その1)
の続きです。

とりあえず、最低限のWindowの動作として、
移動と終了だけはできないと話にならないので、
これを組み込みます。

１．Windowオブジェクトをダブルクリックしてアクティブにします。

２．プロジェクトウィンドウの中から、
　　Window1.xaml.csファイル(ファイル名は違うことがあります)を開き、
　　先頭に、using System.Windows.Input;を記入しておきます。

３．イベントボタンを押して、イベントウィンドウを表示します。

４．KeyUpのところをダブルクリックします。
　　Visual Studioが起動し、Window_KeyUpハンドラが作られます。
　　(Visual Studio 2005 Standard Edition以上の場合、Express Edition
　　しかインストールされていない場合は、手動でコピーする
　　必要があります。)

５．MouseLeftButtonDownのところをダブルクリックします。
　　Window_MouseLeftButtonDownハンドラが作られます。

６．Visual Studioの画面で以下のコードを書き込みます。

using System.Windows.Input;





private void Window_MouseLeftButtonDown
(object sender, MouseButtonEventArgs e)
{
    DragMove();
}







private void Window_KeyUp(object sender, KeyEventArgs e)
{
    switch (e.Key)
    {
       case Key.Escape:
            Close();
            break;
    }
}

まず、using System.Windows.Input;と書いておくことで、
KeyやMouse関係のクラスをそのまま呼べるようにします。

DragMove();と書くだけで、ウィンドウをドラッグして
動かせるようになります。

あとは、押したKeyがEscapeだったら、Close();を呼び出して
ウィンドウを閉じるようにします。
これでEscapeキーを押すと終了できるようになります。
(switchを使っているのは、後々他のキーにも拡張する
可能性があるためです)

Expression Blend の[F6]と[F7]キーが効かない...

なか-chan@最愛のiMac — Wed, 04 Jul 2007 12:20:00 GMT

Expression Blend のショートカットキーで、

[F6]:デザインワークスペースの表示
[F7]:アニメーションワークスペースの表示

を切り替えられるのですが、なぜか、そのショートカットが
[F11]:アートボードを表示
　　　　している場合には、効きませんが
[F12]:XAMLを表示
　　　　しているときだけは、効きます。

うーん。バグかなぁ...!?

[Expression Blend Tips]新しいプロジェクトの初期ウィンドウサイズを変更する

なか-chan@最愛のiMac — Sat, 30 Jun 2007 15:34:00 GMT

Expression Blendの、ようこそ画面で[新しいプロジェクト...]を選択すると、
新規プロジェクトを作成することができますが、そのウィンドウサイズは
640x480ピクセルになっています。
これを任意のサイズで開くようにする方法です。

C:\Program Files (x86)\microsoft expression\Blend 1.0\Templates\ja\CSharp\Window
(Windows Vista x64にデフォルトでインストール時　C#用)
を開いて、このフォルダにある、Window.xamlを、
デスクトップ等に移動します。
(Proguram Filesの下では直接編集して保存できないため)

メモ帳などで中を見ると、

<WINDOW
　xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
　xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
　x:Class="$rootnamespace$.$safeitemname$"
　x:Name="Window"
　Title="$safeitemname$"
　Width="640" Height="480">
　<$documentroottype$ x:Name="LayoutRoot"/>
</WINDOW>

と書かれているので、赤字になっている部分を希望のサイズに書き換えます。

書き換えたファイルを元の位置に戻すと、次回から、希望のサイズで
新規プロジェクトを作成することができるようになります。

[Expression Blend Tips]ハート形のウィンドウを作ってみよう(その1)

なか-chan@最愛のiMac — Fri, 29 Jun 2007 01:19:00 GMT

WPFでは、いろいろな形のウィンドウが簡単に作れます。
今回は、ショッキングピンクのハート型ウィンドウを作ってみます。

１）まず、Expression Blendを起動すると、ようこそ画面が表示されますので、
　　[プロジェクト]タブ-[新しいプロジェクト]を選択します。
　　すると、新しい画面が開きます。

２）初期状態でウィンドウのサイズが、600x480になっており大きすぎるので、
　　左側[オブジェクトとタイムライン]の[ウィンドウ]を選択し、
　　右側、[プロパティ]タブを開き、[レイアウト]の[Width]を
　　640から480に変更します。すると、480x480のウィンドウになります。

３）左側の[四角形]ツールを押し続けると、[楕円]が出てきますので、
　　これを選択します。これで楕円をかけるようになります。

４）中央の[グリッドを表示]と[グリッド線への位置合わせ]のボタンを
　　どちらも表示する設定にしておきます。

５）画面の中央よりやや上あたりに、適当な大きさで、楕円を描きます。

６）[オブジェクト]メニュー-[パス]-[パスに変換]を選択すると、
　　選択されている楕円が、パスに変換されます。

７）左上から2番目、[直接選択]ツールを選択し、パスの上部分と下部分を
　　ともに、図のように下へずらします。

８）[直接選択]ツールで、[Alt]キーを押しながら、ハンドル(つかんで
　　パス形状を操作するためのもの)を動かして、ハート形を作っていきます。
　　[Alt]キーを押しながら、ハンドルを操作すると、角を作れます。
　　図のような配置、大きさにしてください。

９）レイアウトの、[Margin]右の[詳細プロパティオプション]-[カスタム式]を
　　選択し、「20」と入力します。これにより、上下左右のマージンがすべて
　　20(ドット)に設定されます。

10）左側[オブジェクトとタイムライン]のWindowを選択し、右側、
　　[ブラシ]-[Background]をNo brushに設定します。

11）[外観]-[AllowsTransparency]のチェックを入れます。
　　ウィンドウの背景が透明になり、タイトルバーも消えます。

12）あとは、ハートのストローク(縁取り)を太くしたり、透明度の
　　設定([RGBA]の[A]を100%から70%にしたり)をしたり、ビットマップ
　　効果で、[グロー]をかけたりして、お好みに調整します。

13）[F5]キーを押すことにより、GUIのテストを行えます。

14）まだ移動はできません。終了するには、[Alt] + [F4]キーを
　　押します。

次回は、ウィンドウを移動できるようにしたいと思います。
(XAMLだけでは無理かな？？→上のほうにマウスカーソルが
来たら、transparentをON/OFFすれば、タイトルバーがでてくるかな？)

[Expression Blend Tips]サンプルを実行してみる

なか-chan@最愛のiMac — Fri, 22 Jun 2007 21:51:00 GMT

Expression Blendでは、どんなことができるのか？
サンプルが６つほど用意されているので、まずは
それを実行してみるのが一番わかりやすいと思います。

起動時に表示される、[ようこそ画面]-[サンプル]から
お好きなものを選択し、[プロジェクト]メニュー-[プロジェクトのテスト]を
選択すると、サンプルを実行することができます。
キーボードの[F5]キーを押すことでも実行できます。

[ようこそ画面]をもう一度表示したい場合は、
[ヘルプ]メニュー-[ようこそ画面]を選択すると表示できます。

いろいろ美しいサンプルがありますので試してみましょう。

Animation Studioサンプルの実行例。

[Expression Blend Tips]Imageコントロールはどこにある？

なか-chan@最愛のiMac — Thu, 21 Jun 2007 23:14:00 GMT

画像をFormに張り付けるためにImageコントロールを探そうと思っても、
初期状態では、資産ライブラリに出てこないので見つかりません。

そこで右端の、すべて表示というチェックボックスをつけると、
Imageコントロールなど、すべてのコントロールが表示されるようになります。

別の方法として、Imageコントロールを検索したい場合、
左端の検索ウィンドウに、「im」まで入力すると、インクリメンタル
サーチ(文字を打つごとに検索してくれる)で、全体の中から
候補が絞られていくので便利です。
[すべて表示]のチェックをつけていない状態でも有効です。

以下は、Silverlightプロジェクトの場合です。初期状態では、
なんと3種類しかコントロールがありません。
(SilverlightのためにBlend 2英語版May Previewを使用しています)

しかし、[Show All]のチェックボックスをつけることによって、
8種類までコントロールが増えました。(Silverlight 1.0)
重要なMediaElementコントロールなども出てきましたね。

こちらは、Silverlight 1.1の場合です。1.0に比べて、
Controlコントロールというものだけが増えています。