WPF チュートリアル Microsoft Expression Blend を使用してボタンを作成する 此のチュートリアルでは WPF のカスタマイズされたボタンを Microsoft Expression Blend を使用して作成する手順に付いて説明する Microsoft Expression Blend の具体的な動作は Extensible Application Markup Language(XAML) の生成で 此れがコンパイルされ 実行可能プログラムが作成される Extensible Application Markup Language(XAML) を直接扱う場合に付いては Extensible Application Markup Language (XAML) を Blend ではなく Visual Studio を使用して 此れと同じアプリケーションを作成する別のチュートリアルが用意されて居る 詳細に付いては チュートリアル : XAML を使用したボタンの作成 を参照され度い 此れから作成する カスタマイズされたボタンを次の図に示す 図形からボタンへの変換 此のチュートリアルの前半では カスタムボタンの独自の外観を作成する 作成するには 先ず四角形をボタンに変換する 次に 他の図形をボタンのテンプレートに追加し 更に複雑な外観のボタンを作成する 此処では 通常のボタンを使用してカスタマイズする ボタンには今回は使用しない組み込み機能が有るので カスタムボタンを作成するには 四角形から始める方が簡単です Expression Blend で新しいプロジェクトを作成するには 1.Expression Blend を起動する ([ スタート ] をクリックし [ すべてのプログラム ] [Microsoft Expression] [Microsoft Expression Blend] の順にポイントする ) 2. 必要に応じて アプリケーションを最大化する -1-
3.[ ファイル ] メニューの [ 新しいプロジェクト ] をクリックする 4.[ 標準アプリケーション (.exe)] を選択する 5. プロジェクトの名前を CustomButton と指定して [OK] をクリックする 此の時点で 空の WPF プロジェクトが出来る F5 キーを押すと アプリケーションを実行出来る 予想通り アプリケーションは空のウィンドウ而巳で構成されて居る事が解る 次に 角の丸い四角形を作成し 其れをボタンに変換する 四角形をボタンに変換するには 1. ウィンドウの背景プロパティを黒に設定する ウィンドウを選択して [ プロパティ ] タブをクリックし Background プロパティを Black に設定する 2. 大きさがボタンのサイズに近い四角形をウィンドウ上に描画する 左側のツールパネルで四角形ツールを選択し ウィンドウ上でドラッグして四角形を描画する -2-
3. 四角形の四隅を丸める 四角形の制御点をドラッグするか RadiusX プロパティと RadiusY プロパティを直接設定する RadiusX と RadiusY の値を 20 に設定する 4. 四角形をボタンに変換する 四角形を選択する [ ツール ] メニューの [ ボタンの作成 ] をクリックする 5. スタイル / テンプレートのスコープを指定する 次の様なダイアログボックスが表示される -3-
[ リソース名 ( キー )] で [ 総てに適用 ] を選択する 此れに依り 生成されるスタイルとボタンテンプレートが ボタンで有る総てのオブジェクトに適用される [ 定義元 ] で [ アプリケーション ] を選択する 此れに依り 生成されるスタイルとボタンテンプレートのスコープが アプリケーション全体に成る 此の 2 つのボックスに値を設定すると ボタンのスタイルとテンプレートはアプリケーション全体に含まれる総てのボタンに適用され アプリケーションで作成するボタンには既定で此のテンプレートが使用される ボタンテンプレートの編集 現在 ボタンに変更された四角形が有る 此のセクションでは ボタンのテンプレートを変更して 外観を更にカスタマイズする ボタンの外観を変更するためにボタンテンプレートを編集するには 1. テンプレートの表示ビューに移動する ボタンの外観を更にカスタマイズするには ボタンテンプレートを編集する必要が有る 此のテンプレートは 四角形をボタンに変換した時に作成された ボタンテンプレートを編集するには ボタンを右クリックし [ コントロールパーツ ( テンプレート ) の編集 ] [ テンプレートの編集 ] の順にクリックする テンプレートエディタでは ボタンが Rectangle と ContentPresenter に分離されて居る ContentPresenter は ボタン内のコンテンツ ( 文字列 "Button" 等 ) の表示に使用する 四角形と ContentPresenter は孰れも Grid の内側に配置される -4-
2. テンプレートコンポーネントの名前を変更する テンプレートインベントリで四角形を右クリックし Rectangle 名を "[Rectangle]" から "outerrectangle" に変更し "[ContentPresenter]" を "mycontentpresenter" に変更する 3. 中が空洞に成る様 ( ドーナツの様に ) 四角形を変更する [outerrectangle] を選択し Fill を "Transparent" に設定し StrokeThickness を 5 に設定する 次に Stroke にテンプレートの色を設定する 此れを行うには [ ストローク ] の横に有る小さな白いボックスをクリックし [CustomExpression] を選択し ダイアログボックスに {TemplateBinding Background} と入力する -5-
4. 内側の四角形を作成する 次に 四角形を今 1 つ作成し ( "innerrectangle" と謂う名前を付ける ) 其れを outerrectangle の内側に対称に成る様に配置する 此の様な場合 ズームを使用して編集領域に表示されるボタンを大きくすると 作業し易く成る 作成して居る四角形は 図の物と外観が異なって居る場合が有る (( 角が丸く成って居る等 ) 5.ContentPresenter を最前面に移動する 此の時点で テキスト "Button" が表示されなく成る事が有る 此れは innerrectangle が mycontentpresenter より前面に有る為で有る 此れを解消するには mycontentpresenter を innerrectangle の下にドラッグする 四角形や mycontentpresenter の位置を変更して 次の様にする 亦 mycontentpresenter は 右クリックして [ 前面へ移動 ] をクリックする事で 前面に配置する事も出来る -6-
6.innerRectangle の外観を変更する RadiusX RadiusY 及び StrokeThickness の値を 20 に設定する 亦 Fill をカスタム式 "{TemplateBinding Background}" を使用してテンプレートの背景に設定し Stroke を "transparent" に設定する innerrectangle の Fill と Stroke が outerrectangle とは逆に成って居る事を確認する 7. グラスレイヤーを前面に追加する ボタンの外観変更の最後の手順は グラスレイヤーを前面に追加する事で有る 此のグラスレイヤーは 3 つ目の四角形で有る グラスはボタン全体を覆う為 グラス四角形のサイズは outerrectangle と殆ど同じに成る 従って 此の四角形を作成するには 単純に outerrectangle のコピーを作成する outerrectangle を強調表示し Ctrl + C と Ctrl + V でコピーを作成する 此の新しい四角形の名前を "glasscube" と指定する 8. 必要に応じて glasscube 位置を変更する glasscube がボタンを覆う位置にない場合は 覆う位置迄ドラッグする 9.glassCube に outerrectangle とは少しだけ異なる外観を指定する glasscube のプロパティを変更する 先ず RadiusX プロパティと RadiusY プロパティを 10 に変更し StrokeThickness を 2 に変更する A.glassCube をグラスの様な外観にする Fill をグラスの様な外観にするには 75% 不透明の線形グラデーションを使用し 色は白と透明とを殆ど同じ様な間隔で 6 回交互に入れ替える グラデーション終了位置の設定値は次の様に成る グラデーション終了位置 1: 白 アルファ値 75% グラデーション終了位置 2: 透明 グラデーション終了位置 3: 白 アルファ値 75% グラデーション終了位置 4: 透明 グラデーション終了位置 5: 白 アルファ値 75% グラデーション終了位置 6: 透明 -7-
此れで " 波打つ " グラスの外観に成る B. グラスレイヤーを非表示にする グラスの様なレイヤーの外観は此れで確認出来たので [ プロパティ ] パネルの [ 表示 ] ペインに移動し [ 不透明度 ] を 0% にして非表示にする 此処から先では グラスレイヤーを操作するのに プロパティトリガーとイベントを使用する ボタン動作のカスタマイズ 此の時点で ボタンのプレゼンテーション ( 外観 ) はテンプレートの変更に依ってカスタマイズされて居るが マウスオーバーに依る外観の変化 フォーカスの受け取り クリック等のユーザー操作に対して 通常のボタンの様な反応はしない 次の 2 つの手順で 斯うした動作をカスタムボタンに組み込む方法を説明する 先ず 簡単なプロパティトリガーを使用し 其の後にイベントトリガーやアニメーションを追加する プロパティトリガーを設定するには 1. 新しいプロパティトリガーを作成する [glasscube] が選択された状態で [ トリガー ] パネルで [+ プロパティ ] をクリックする ( 次の手順の下の図を参照され度い ) 此れに依り 既定のプロパティトリガーを持つプロパティトリガーが作成される -8-
2.IsMouseOver をトリガーに依って使用されるプロパティにする プロパティを IsMouseOver に変更する 此れに依り IsMouseOver プロパティが true に成る ( ユーザーがマウスでボタンをポイントする ) と プロパティトリガーがアクティブに成る 3.IsMouseOver で glasscube の不透明度 100% をトリガーする [ トリガー記録オン ] と表示されて居る事を確認する ( 前の図を参照 ) 此れは 記録がオンの間に glasscube のプロパティ値に行われる所有る変更が IsMouseOver が true の場合に実行されるアクションに成る事を意味する 記録中に glasscube の Opacity を 100% に変更する 此れで 最初のプロパティトリガーが作成された エディターの [ トリガー ] パネルに Opacity が 100% に変更された事が記録された事を確認する F5 キーを押してアプリケーションを実行し マウスポインタをボタンに合わせたり ボタンから離したりする ボタンにマウスポインタを合わせるとグラスレイヤーが現れ 離すと消える事を確認する -9-
4.IsMouseOver でストローク値の変更をトリガーする 他のアクションを IsMouseOver トリガーと関連付けて観る事にする 記録が続行されて居る間 選択を glasscube から outerrectangle に切り替える 次に outerrectangle の Stroke をカスタム式 "{DynamicResource {x:static SystemColors.HighlightBrushKe y}}" に設定する 此れに依り Stroke が ボタンに依って使用される通常の強調表示色に設定される F5 キーを押し マウスをボタンに合わせた時の効果を確認する 5.IsMouseOver で暈やけたテキストをトリガーする IsMouseOver プロパティトリガーにアクションを今 1 つ追加する グラスがボタンを覆った時に ボタンのコンテンツが少し暈やける様にする 此れを行うには 暈しの BitmapEffect を ContentPresenter (mycontentpresenter) に適用する BitmapEffect を検索する前の状態に [ プロパティ ] パネルを戻すには [ 検索 ] ボックスのテキストをクリアする 此処迄の段階では プロパティトリガーに幾つかのアクションを関連付けて マウスポインタがボタン領域に出入りした時の強調表示動作を作成した 今 1 つの一般的なボタン動作は フォーカスが有る時 ( クリックされた後等 ) の強調表示で有る 此の様な動作を追加するには IsFocused プロパティに別のプロパティトリガーを追加する 6.IsFocused のプロパティトリガーを作成する IsMouseOver の場合と同じ手順で ( 此のセクションの最初の手順を参照 ) IsFocused プロパティにプロパティトリガーをもう 1 つ作成する [ トリガー記録オン ] の間 次のアクションをトリガーに追加する -10-
glasscube の Opacity を 100% にする outerrectangle の Stroke を次のカスタム値に設定する "{DynamicResource {x:static SystemColors.HighlightBrushKey}}" 此のチュートリアルの最後の手順として ボタンにアニメーションを追加する ボタンのアニメーションはイベントに依りトリガーされる 具体的には MouseEnter イベントと Click イベントで有る イベントトリガーとアニメーションを使用して対話機能を追加するには 1.MouseEnter イベントトリガーを作成する 新しいイベントトリガーを追加し トリガーで使用するイベントとして MouseEnter を選択する 2. アニメーションタイムラインを作成する 次に アニメーションタイムラインを MouseEnter イベントに関連付ける -11-
[OK] をクリックして新しいタイムラインを作成すると [ タイムラインパネル ] が表示され "Timeline recording is on" がデザインパネルに表示される 此れは タイムラインでのプロパティ変更の記録を開始出来る事を示して居る ( プロパティ変更のアニメーション化 ) 此の表示を見る為に 場合に依ってはウィンドウやパネルの表示サイズを大きくする必要が有る 3. キーフレームを作成する アニメーションを作成するには アニメーション化するオブジェクトを選択し タイムライン上に 2 つ以上のキーフレームを作成する 然して 夫々のキーフレームに付いて アニメーションで補間する間隔を示すプロパティ値を設定する 次の図は キーフレームの作成過程を示して居る -12-
4. 此のキーフレームで glasscube を縮小する 2 番目のキーフレームが選択された状態で glasscube のサイズを [ サイズ変換 ] を使用して元の大きさの 90% に縮小する F5 キーを押してアプリケーションを実行する マウスポインタをボタンに合わせる ボタン上のグラスレイヤーが縮小する事を確認する 5. イベントトリガーを今 1 つ作成し 別のアニメーションを関連付ける アニメーションを今 1 つ追加する 前のイベントトリガーアニメーションを作成する為に使用した方法と似た手順を使用する 1 新しいイベントトリガーを Click イベントを使用して作成する 2 新しいタイムライン Click イベントに関連付ける 1 此のタイムラインに 2 つのキーフレームを作成する 位置は夫々 0.0 秒と 0.3 秒で有る 2 0.3 秒の位置のキーフレームが強調表示された状態で [ 回転角度 ] を 360 に設定する F5 キーを押してアプリケーションを実行する ボタンをクリックする グラスレイヤーが回転する事を確認する -13-
纏め 此れで カスタマイズされたボタンが完成された 此れには アプリケーションに存在する総てのボタンに適用されるボタンテンプレートを使用した テンプレートを編集モードの儘にして ( 次の図を参照 ) 他にもボタンを作成すると 作成されるボタンの動作と外観が 既定のボタンではなくカスタムボタンに似て居る事を確認出来る F5 キーを押してアプリケーションを実行する ボタンをクリックして 孰れも動作が同じで有る事を確認する 前の手順に於いて テンプレートのカスタマイズ中に innerrectangle の Fill プロパティと outerrectangle の Stroke プロパティを テンプレートの背景 ( {TemplateBinding Background}) に設定した 此の為 個々のボタンの背景色を設定すると 設定した背景が個々のプロパティで使用される 此処で 背景を変更して観る 次の図では 異なるグラデーションが使用されて居る 従って テンプレートはボタンの様なコントロールの全体的なカスタマイズには便利だが テンプレートを使用したコントロール同士で外観が異なる様に変更する事は引き続き可能で有る -14-
ボタンテンプレートをカスタマイズする過程で Microsoft Expression Blend で次の事を行う方法を学んだ コントロールの外観をカスタマイズする プロパティトリガーを設定する プロパティトリガーは コントロールに限らず殆どのオブジェクトでも使用でき 非常に便利で有る イベントトリガーを設定する イベントトリガーは コントロールに限らず殆どのオブジェクトでも使用でき 非常に便利で有る アニメーションを作成する 其の他 : グラデーションの作成 BitmapEffects の追加 変換の使用 オブジェクトの基本プロパティの設定 http://msdn.microsoft.com/ja-jp/library/bb613598(v=vs.110).aspx http://msdn.microsoft.com/ja-jp/library/ee649089(v=vs.110).aspx -15-