次の方法で共有

チュートリアル: Microsoft Expression Blend を使用してボタンを作成する

  • [アーティクル]

このチュートリアルでは、Microsoft Expression Blend を使用して WPF のカスタマイズされたボタンを作成する手順について説明します。

重要

Microsoft Expression Blend は Extensible Application Markup Language (XAML) を生成することで動作します。XAML はその後コンパイルされ、実行可能プログラムが作成されます。 XAML を直接操作する場合は、Blend ではなく Visual Studio で XAML を使用して、これと同じアプリケーションを作成するもう 1 つのチュートリアルが用意されています。 詳細については、XAML を使用したボタンの作成に関する記事をご覧ください。

次の図は、作成するカスタマイズされたボタンを示しています。

The customized button that you will create

シェイプをボタンに変換する

このチュートリアルの最初の部分では、カスタム ボタンの外観を独自に作成します。 これを行うには、最初に四角形をボタンに変換します。 次に、ボタンのテンプレートにその他のシェイプを追加して、より複雑な外観のボタンを作成します。 通常のボタンから始めてそれをカスタマイズしないのはなぜでしょうか。 それは、ボタンには、不要な組み込みの機能が含まれるためです。カスタム ボタンの場合は、四角形から始める方が簡単です。

Expression Blend で新しいプロジェクトを作成するには

  1. Expression Blend を起動します。 ( [スタート] をクリックし、 [すべてのプログラム] 、 [Microsoft Expression] の順にポイントして、 [Microsoft Expression Blend] をクリックします。)

  2. 必要に応じて、アプリケーションを最大化します。

  3. [ファイル] メニューの [新しいプロジェクト] をクリックします。

  4. [標準アプリケーション (.exe)] を選択します。

  5. プロジェクトに CustomButton という名前を指定し、 [OK] を押します。

この時点で、空の WPF プロジェクトが作成されます。 F5 キーを押してアプリケーションを実行できます。 ご想像のとおり、アプリケーションは空白のウィンドウだけで構成されています。 次に、角丸四角形を作成してボタンに変換します。

四角形をボタンに変換するには

  1. Window の Background プロパティを黒に設定する: Window を選択し、 [プロパティ] タブをクリックして、Background プロパティを Black に設定します。

    How to set the background of a button to black

  2. Window のボタンとほぼ同じサイズになる四角形を描画する: 左側のツール パネルで四角形のツールを選択し、Window 上に四角形をドラッグします。

    How to draw a rectangle

  3. 四角形の角を丸める: 四角形のコントロール ポイントをドラッグするか、RadiusX と RadiusY のプロパティを直接設定します。 RadiusX と RadiusY の値を 20 に設定します。

    How to make the corners of a rectangle round

  4. 四角形をボタンに変更する: 四角形を選択します。 [ツール] メニューで [ボタンの作成] をクリックします。

    How to make a shape into a button

  5. スタイルまたはテンプレートの範囲を指定する: 次のようなダイアログ ボックスが表示されます。

    The

    [リソース名 (キー)] には、 [すべてに適用] を選択します。 これにより、生成されるスタイルとボタン テンプレートが、ボタンであるすべてのオブジェクトに適用されます。 [定義先] には、 [アプリケーション] を選択します。 これにより、生成されるスタイルとボタン テンプレートの対象範囲がアプリケーション全体になります。 これらの 2 つのボックスの値を設定すると、ボタンのスタイルとテンプレートはアプリケーション全体のすべてのボタンに適用されます。また、アプリケーションで作成したすべてのボタンで、既定でこのテンプレートが使用されます。

ボタン テンプレートを編集する

これで、ボタンに変更された四角形ができました。 このセクションでは、ボタンのテンプレートを変更し、その外観をさらにカスタマイズします。

ボタン テンプレートを編集してボタンの外観を変更するには

  1. テンプレートの編集ビューに移動する: ボタンの外観をさらにカスタマイズするには、ボタン テンプレートを編集する必要があります。 このテンプレートは、四角形をボタンに変換したときに作成されたものです。 ボタン テンプレートを編集するには、ボタンを右クリックして [コントロール パーツ (テンプレート) の編集] を選択し、 [テンプレートの編集] を選択します。

    How to edit a template

    テンプレート エディターでは、現在、ボタンが Rectangle と ContentPresenter に分割されていることがわかります。 ContentPresenter は、ボタン内に内容を表示するために使用されます (たとえば、文字列 "Button")。 Rectangle と ContentPresenter はどちらも Grid 内にレイアウトされます。

    Components in the presentation of a rectangle

  2. テンプレート コンポーネントの名前を変更する: テンプレート インベントリ内の四角形を右クリックして、Rectangle の名前を "[Rectangle]" から "outerRectangle" に変更し、"[ContentPresenter]" を "myContentPresenter" に変更します。

    How to rename a component of a template

  3. (ドーナツのように) 内側が空白になるように四角形を変更する:outerRectangle を選択して、Fill を "Transparent" に、StrokeThickness を 5 に設定します。

    How to make a rectangle empty

    次に、Stroke を、テンプレートに設定する任意の色に設定します。 これを行うには、 [ストローク] の横にある小さな白いボックスをクリックし、 [CustomExpression] を選択して、ダイアログ ボックスに「{TemplateBinding Background}」と入力します。

    How to set the use the color of the template

  4. 内部の四角形を作成する: 次に、別の四角形を作成し ("innerRectangle" という名前を付けます)、outerRectangle の内部の上に対称的に配置します。 このような作業では、ズームして、編集領域のボタンのサイズを大きくすることをお勧めします。

    注意

    四角形の外観は、次の図のものとは異なる場合があります (たとえば、角が丸い場合があります)。

    How to create a rectangle inside another rectangle

  5. ContentPresenter を一番上に移動する: この時点で、テキスト "Button" が表示されなくなる可能性があります。 そのような場合は、innerRectangle が myContentPresenter の上にあることが原因です。 これを修正するには、myContentPresenter を innerRectangle の下にドラッグします。 以下のように、四角形と myContentPresenter の位置を変更します。

    注意

    または、myContentPresenter を右クリックして [Send Forward](前に送る) を押すことで、それを一番上に配置することもできます。

    How to move one button on top of another button

  6. innerRectangle の外観を変更する:RadiusX、RadiusY、および StrokeThickness の値を 20 に設定します。 さらに、カスタム式 "{TemplateBinding Background}" ) を使用して Fill をテンプレートの背景に設定し、Stroke を "transparent" に設定します。 innerRectangle の Fill と Stroke の設定は、outerRectangle の設定とは逆になっていることがわかります。

    How to change the appearance of a rectangle

  7. 上部にグラス レイヤーを追加する: ボタンの外観をカスタマイズする最後の手順は、上部にグラス レイヤーを追加することです。 このグラス レイヤーは、3 つ目の四角形で構成されます。 グラスによってボタン全体が覆われるため、グラスの四角形のディメンションは outerRectangle と似たものになります。 したがって、outerRectangle のコピーを作成するだけで、四角形を作成できます。 outerRectangle を強調表示し、Ctrl + C キーと Ctrl + V キーを使用してコピーを作成します。 この新しい四角形に "glassCube" という名前を指定します。

  8. 必要に応じて glassCube の位置を変更する:glassCube がまだボタン全体を覆うように配置されていない場合は、その位置にドラッグします。

  9. glassCube に outerRectangle とは少し異なるシェイプを指定する:glassCube のプロパティを変更します。 まず、RadiusX と RadiusY のプロパティを 10 に変更し、StrokeThickness を 2 に変更します。

    The appearance settings for glassCube

  10. glassCube をグラスのように表示する:Fill をグラスのような外観に設定するには、75% 不透明な線状グラデーションを使用して、白色と透明を大体均等な間隔で 6 回交互に配置します。 グラデーション境界に設定するものを次に示します。

    • グラデーション境界 1:アルファ値が 75% の白

    • グラデーション境界 2:透明

    • グラデーション境界 3:アルファ値が 75% の白

    • グラデーション境界 4:透明

    • グラデーション境界 5:アルファ値が 75% の白

    • グラデーション境界 6:透明

    これにより、"波形" グラスの外観が作成されます。

    A rectangle that looks like glass

  11. グラス レイヤーを非表示にする: グラス レイヤーの外観を確認したので、 [プロパティ] パネルの [外観] ペインに移動し、不透明度を 0% に設定して非表示にします。 この後のセクションでは、プロパティ トリガーとイベントを使用して、グラス レイヤーの表示と操作を行います。

    How to hide the glass rectangle

ボタンの動作をカスタマイズする

これまではテンプレートを編集することでボタンの表示をカスタマイズしましたが、このボタンは、通常のボタンのようにユーザーのアクションに応答することはありません (たとえば、マウスによるポイント、フォーカスの受け取り、クリックなどで外観を変更する場合)。次の 2 つの手順では、これらのような動作をカスタム ボタンに構築する方法を示します。 まずシンプルなプロパティ トリガーから始めて、次にイベント トリガーとアニメーションを追加します。

プロパティ トリガーを設定するには

  1. 新しいプロパティ トリガーを作成する:glassCube を選択した状態で、 [トリガー] パネルの [+ プロパティ] をクリックします (次の手順の後の図を参照)。 これにより、既定のプロパティ トリガーでプロパティ トリガーが作成されます。

  2. IsMouseOver をトリガーによって使用されるプロパティにする: プロパティを IsMouseOver に変更します。 これにより、IsMouseOver プロパティが true のとき (ユーザーがマウスでボタンをポイントしたとき) にプロパティ トリガーがアクティブになります。

    How to set a trigger on a property

  3. IsMouseOver で glassCube の 100% の不透明度をトリガーする:[Trigger recording is on](トリガーの記録オン) が表示されます (前の図を参照)。 これは、記録がオンであるときに glassCube のプロパティ値に加えた変更が、IsMouseOver が true のときに行われるアクションになることを意味します。 記録中に、glassCube の Opacity を 100% に変更します。

    How to set the opacity of a button

    これで、最初のプロパティ トリガーを作成できました。 エディターの [トリガー] パネルによって、100% に変更される Opacity が記録されたことがわかります。

    The

    F5 キーを押してアプリケーションを実行し、マウス ポインターをボタンの上と外部に移動します。 ボタンをマウスでポイントするとグラス レイヤーが表示され、ポインターが離れると消えるはずです。

  4. IsMouseOver でストローク値の変更をトリガーする: 他のいくつかのアクションを IsMouseOver トリガーに関連付けてみましょう。 記録が続いている間に、glassCube から outerRectangle に選択を切り替えます。 次に、outerRectangle の Stroke をカスタム式 "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" に設定します。 これにより、Stroke が、ボタンによって使用される一般的な強調表示色に設定されます。 F5 キーを押して、ボタンにマウスをポイントしたときの効果を確認します。

    How to set the stroke to the highlight color

  5. IsMouseOver でぼやけたテキストをトリガーする: もう 1 つのアクションを IsMouseOver プロパティ トリガーに関連付けてみましょう。 ボタンの上にグラスが表示されているときに、ボタンの内容が少しぼやけて表示されるようにします。 これを行うには、ぼかしの BitmapEffect を ContentPresenter (myContentPresenter) に適用します。

    How to blur the content of a button

    Note

    [プロパティ] パネルを BitmapEffect の検索を行う前の状態に戻すには、検索ボックスのテキストをクリアします。

    これまでに、いくつかのアクションが関連付けられたプロパティ トリガーを使用して、マウス ポインターがボタン領域に出入りするときの強調表示の動作を作成しました。 ボタンのもう 1 つの一般的な動作は、フォーカスがあるときに強調表示することです (クリックされた後など)。 このような動作を追加するには、IsFocused プロパティに対するもう 1 つのプロパティ トリガーを追加します。

  6. IsFocused のプロパティ トリガーを作成する:IsMouseOver の場合と同じ手順 (このセクションの最初の手順を参照) を使用して、IsFocused プロパティに対するもう 1 つのプロパティ トリガーを作成します。 [Trigger recording is on](トリガーの記録オン) の状態で、次のアクションをトリガーに追加します。

    • glassCube の Opacity を 100% にする。

    • outerRectangle の Stroke カスタム式の値を "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" にする。

このチュートリアルの最後の手順として、ボタンにアニメーションを追加します。 これらのアニメーションは、イベント (具体的には、MouseEnter イベントと Click イベント) によってトリガーされます。

イベント トリガーとアニメーションを使用してインタラクティビティを追加するには

  1. MouseEnter イベント トリガーを作成する: 新しいイベント トリガーを追加し、トリガーで使用するイベントとして [MouseEnter] を選択します。

    How to create a MouseEnter event trigger

  2. アニメーション タイムラインを作成する: 次に、アニメーション タイムラインを MouseEnter イベントに関連付けます。

    How to add an animation timeline to an event

    [OK] を押して新しいタイムラインを作成すると、タイムライン パネルが表示され、デザインパネルに [Timeline recording is on](タイムラインの記録オン) が表示されます。 これは、タイムラインでプロパティの変更の記録を開始できることを意味します (プロパティの変更をアニメーション化)。

    注意

    表示内容を確認するために、ウィンドウやパネルのサイズを変更する必要がある場合があります。

    The timeline panel

  3. キーフレームを作成する: アニメーションを作成するには、アニメーション化するオブジェクトを選択し、タイムライン上に複数のキーフレームを作成します。また、これらのキーフレームの間には、アニメーションで補間するプロパティ値を設定します。 次の図は、キーフレームを作成する手順を示しています。

    How to create a keyframe

  4. このキーフレームで glassCube を縮小する: 2 番目のキーフレームを選択した状態で、サイズ変換を使用して、glassCube のサイズをフル サイズの 90% に縮小します。

    How to shrink the size of a button

    F5 キーを押してアプリケーションを実行します。 マウス ポインターをボタンの上に移動します。 ボタンの上のグラス レイヤーが縮小されることがわかります。

  5. もう 1 つのイベント トリガーを作成し、別のアニメーションを関連付ける: もう 1 つアニメーションを追加してみましょう。 前のイベント トリガー アニメーションの作成に使用したものと同様の手順を使用します。

    1. Click イベントを使用して、新しいイベント トリガーを作成します。

    2. 新しいタイムラインを Click イベントに関連付けます。

      How to create a new timeline

    3. このタイムラインに対して、2 つのキーフレームを作成します。1 つ目は 0.0 秒、2 つ目は 0.3 秒にします。ｌ

    4. 0\.3 秒のキーフレームが強調表示されている状態で、回転変換の角度を 360 度に設定します。

      How to create a rotate transform

    5. F5 キーを押してアプリケーションを実行します。 ボタンをクリックします。 グラス レイヤーが回転することがわかります。

まとめ

これでカスタマイズしたボタンが完成しました。 これを行うためにボタン テンプレートを使用しました。これは、アプリケーション内のすべてのボタンに適用されました。 テンプレート編集モードを終了して (次の図を参照) さらにボタンを作成すると、それらは既定のボタンではなく、カスタム ボタンのような外観と動作を持つことが確認できます。

The custom button template

Multiple buttons that use the same template

F5 キーを押してアプリケーションを実行します。 ボタンをクリックして、すべての動作が同じであることを確認します。

テンプレートをカスタマイズしている間に、innerRectangle の Fill プロパティと outerRectangle の Stroke プロパティをテンプレートの背景 ({TemplateBinding Background}) に設定したことを思い出してください。 このため、個々のボタンの背景色を設定すると、設定した背景がそのそれぞれのプロパティに使用されます。 今すぐ背景を変更してみてください。 次の図では、さまざまなグラデーションが使用されています。 したがって、テンプレートはボタンのようなコントロールを全体的にカスタマイズする場合に便利ですが、テンプレートを使用したコントロールは互いに異なる外観に変更される可能性があります。

Buttons with the same template that look diferent

結論として、ボタン テンプレートをカスタマイズするプロセスを通じて、Microsoft Expression Blend で次の操作を行う方法を学習しました。

  • コントロールの外観をカスタマイズする。

  • プロパティ トリガーを設定する。 プロパティ トリガーは、コントロールだけでなく、ほとんどのオブジェクトで使用できるため、非常に便利です。

  • イベント トリガーを設定する。 イベント トリガーは、コントロールだけでなく、ほとんどのオブジェクトで使用できるため、非常に便利です。

  • アニメーションを作成する。

  • その他: グラデーションの作成、BitmapEffects の追加、変換の使用、オブジェクトの基本プロパティの設定。

関連項目