チュートリアル: Microsoft Expression Blend を使用してボタンを作成するWalkthrough: Create a Button by Using Microsoft Expression Blend

このチュートリアルを作成するプロセスをWPFWPFMicrosoft Expression Blend を使用してカスタマイズされたボタンをクリックします。This walkthrough steps you through the process of creating a WPFWPF customized button using Microsoft Expression Blend.

重要

Microsoft Expression Blend を生成することによって動作Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML)し、実行可能プログラムをコンパイルします。Microsoft Expression Blend works by generating Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) that is then compiled to make the executable program. 使用する場合Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML)が 1 つを使って、このと同じアプリケーションを作成するもう 1 つのチュートリアルを直接Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML)Blend ではなく、Visual Studio を使用します。If you would rather work with Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) directly, there is another walkthrough that creates the same application as this one using Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) with Visual Studio rather than Blend. 参照してくださいを使用して XAML でボタンを作成する詳細についてはします。See Create a Button by Using XAML for more information.

次の図はを作成してカスタマイズされたボタンを示しています。The following illustration shows the customized button that you will create.

作成するカスタマイズされたボタンThe customized button that you will create

図形をボタンへの変換します。Convert a Shape to a Button

このチュートリアルの最初の部分では、独自のカスタム ボタンの外観を作成します。In the first part of this walkthrough you create the custom look of the custom button. これを行うには、最初にボタンに四角形を変換します。To do this, you first convert a rectangle to a button. 図形を追加、ボタンのテンプレートをより複雑な外観のボタンを作成します。You then add additional shapes to the template of the button, creating a more complex looking button. なぜ標準ボタンと開始され、カスタマイズできますか。Why not start with a regular button and customize it? ボタンが必要はありません。 組み込みの機能カスタムのボタンの四角形を開始する簡単です。Because a button has built-in functionality that you do not need; for custom buttons, it is easier to start with a rectangle.

Expression Blend で新しいプロジェクトを作成するにはTo create a new project in Expression Blend

  1. Expression Blend を開始します。Start Expression Blend. (クリックして開始、 をポイントすべてのプログラム、 をポイントMicrosoft Expression、順にクリックしますMicrosoft Expression Blend)。(Click Start, point to All Programs, point to Microsoft Expression, and then click Microsoft Expression Blend.)

  2. 必要な場合は、アプリケーションを最大化します。Maximize the application if needed.

  3. [ファイル] メニューの [新しいプロジェクト] をクリックします。On the File menu, click New Project.

  4. 選択標準アプリケーション (.exe) します。Select Standard Application (.exe).

  5. プロジェクトに名前をCustomButtonキーを押しますOKします。Name the project CustomButton and press OK.

この時点で、空白があるWPFWPFプロジェクト。At this point you have a blank WPFWPF project. アプリケーションの実行に F5 キーを押します。You can press F5 to run the application. ご想像のとおり、アプリケーションは空白のウィンドウのみで構成されます。As you might expect, the application consists of only a blank window. 次に、角の丸い四角形を作成し、ボタンに変換します。Next, you create a rounded rectangle and convert it into a button.

四角形をボタンに変換するにはTo convert a Rectangle to a Button

  1. ウィンドウの背景のプロパティを black に設定します。 ウィンドウを選択して、、プロパティ タブ、設定、BackgroundプロパティをBlackします。Set the Window Background property to black: Select the Window, click the Properties Tab, and set the Background property to Black.

    ボタンの背景を黒に設定する方法How to set the background of a button to black

  2. ウィンドウに四角形のボタンのサイズの約を描画します。 ツールの左側のパネルで、四角形ツールを選択し、ウィンドウに四角形をドラッグします。Draw a rectangle approximately the size of a button on the Window: Select the rectangle tool on the left-hand tool panel and drag the rectangle onto the Window.

    四角形を描画する方法How to draw a rectangle

  3. 四角形の角を丸めます。 四角形の制御点をドラッグするか、直接設定、RadiusXRadiusYプロパティ。Round out the corners of the rectangle: Either drag the control points of the rectangle or directly set the RadiusX and RadiusY properties. 値を設定RadiusXRadiusY20 にします。Set the values of RadiusX and RadiusY to 20.

    四角形の角を丸く方法How to make the corners of a rectangle round

  4. ボタンの四角形を変更します。 四角形を選択します。Change the rectangle into a button: Select the rectangle. ツール メニューのをクリックしてボタンの作成です。On the Tools menu, click Make Button.

    ボタンに図形を作成する方法How to make a shape into a button

  5. スタイルまたはテンプレートのスコープを指定します。 次のようなダイアログ ボックスが表示されます。Specify the scope of the style/template: A dialog box like the following appears.

    "スタイル リソースの作成 ダイアログ ボックスThe "Create Style Resource" dialog box

    リソース名 (キー)すべてに適用します。For Resource name (Key), select Apply to all. これにより、結果として得られるスタイルとボタン テンプレート ボタンであるすべてのオブジェクトに適用します。This will make the resulting style and button template apply to all objects that are buttons. で定義アプリケーションします。For Define in, select Application. これにより、結果として得られるスタイルとボタンのテンプレートはアプリケーション全体にスコープがあります。This will make the resulting style and button template have scope over the entire application. これら 2 つのボックスで、値を設定するとボタンのスタイルとテンプレートは、全体のアプリケーション内のすべてのボタンに適用し、アプリケーションで作成するいずれかのボタンは、既定では、このテンプレートを使用します。When you set the values in these two boxes, the button style and template apply to all buttons within the entire application and any button you create in the application will, by default, use this template.

Button テンプレートを編集します。Edit the Button Template

四角形のボタンに変化していることがあるようになりました。You now have a rectangle that has been changed to a button. このセクションで、ボタンのテンプレートを変更し、さらに外観をカスタマイズします。In this section, you'll modify the template of the button and further customize how it looks.

ボタンの外観を変更するボタンのテンプレートを編集するにはTo edit the button template to change the button appearance

  1. テンプレートの表示ビューを参照してください。 さらに、ボタンの外観をカスタマイズするには、ボタン テンプレートを編集する必要があります。Go into edit template view: To further customize the look of our button, we need to edit the button template. このテンプレートは、四角形をボタンに変換したときに作成されました。This template was created when we converted the rectangle into a button. Button テンプレートを編集するには、ボタンを右クリックしてコントロールのパーツを編集する (テンプレート)テンプレートの編集します。To edit the button template, right-click the button and select Edit Control Parts (Template) and then Edit Template.

    テンプレートを編集する方法How to edit a template

    テンプレート エディターで、ボタンに区切られたようになりましたことに注意してください、 RectangleContentPresenterします。In the template editor, notice that the button is now separated into a Rectangle and the ContentPresenter. ContentPresenterボタン (たとえば、文字列"Button") 内のコンテンツを表示するために使用します。The ContentPresenter is used to present content within the button (for example, the string "Button"). 両方の四角形とContentPresenter内のレイアウトは、Gridします。Both the rectangle and ContentPresenter are laid out inside of a Grid.

    四角形のプレゼンテーション コンポーネントComponents in the presentation of a rectangle

  2. テンプレートのコンポーネントの名前を変更します。 テンプレートのインベントリ、変更の四角形を右クリックし、 Rectangle 「サイズ」を"[Rectangle]"の名前を指定し、"[ContentPresenter]"を変更します。Change the names of the template components: Right-click the rectangle in the template inventory, change the Rectangle name from "[Rectangle]" to "outerRectangle", and change "[ContentPresenter]" to "myContentPresenter".

    テンプレートのコンポーネントの名前を変更する方法How to rename a component of a template

  3. 四角形を変更 (ドーナツ) のように空の内部では。 選択サイズ設定とFill"Transparent"とStrokeThickness5 にします。Alter the rectangle so that it is empty inside (like a donut): Select outerRectangle and set Fill to "Transparent" and StrokeThickness to 5.

    空の四角形を作成する方法How to make a rectangle empty

    設定し、Stroke内のテンプレートがどのようになるかの色にします。Then set the Stroke to the color of whatever the template will be. これを行う場合は、横に小さな白いボックスをクリックしますストロークを選択しますCustomExpression、ダイアログ ボックスに「{TemplateBinding バック グラウンド}」を入力します。To do this, click the small white box next to Stroke, select CustomExpression, and type "{TemplateBinding Background}" in the dialog box.

    テンプレートの色の使用を設定する方法How to set the use the color of the template

  4. 内側の四角形を作成します。 ここで、別の四角形を作成 (名前を付けます「において」) の内側に対称的に置きますサイズします。Create an inner rectangle: Now, create another rectangle (name it "innerRectangle") and position it symmetrically on the inside of outerRectangle . この種類の作業では、編集領域で、ボタンを大きくズームするは可能性があります。For this kind of work, you will probably want to zoom to make the button larger in the editing area.

    注意

    図のとは異なる、四角形になります (たとえば、その可能性がありますが丸く)。Your rectangle might look different than the one in the figure (for example, it might have rounded corners).

    別の四角形内の四角形を作成する方法How to create a rectangle inside another rectangle

  5. ContentPresenter を先頭に移動します。 この時点では、テキスト"Button"はもうは表示されないことが可能です。Move ContentPresenter to the top: At this point, it is possible that the text "Button" will not be visible any longer. これはため、これは場合、においての上には、 myContentPresenterします。If this is so, this is because innerRectangle is on top of the myContentPresenter. この問題を解決するにはドラッグmyContentPresenterにおいてします。To fix this, drag myContentPresenter below innerRectangle. 四角形の位置を変更し、 myContentPresenterに次のようになります。Reposition rectangles and myContentPresenter to look similar to below.

    注意

    または、配置することもmyContentPresenter上を右クリックし、キーを押して送信転送します。Alternatively, you can also position myContentPresenter on top by right-clicking it and pressing Send Forward.

    別のボタンの上に 1 つのボタンを移動する方法How to move one button on top of another button

  6. においての外観を変更します。 設定、 RadiusXRadiusY、およびStrokeThickness20 の値。Change the look of innerRectangle: Set the RadiusX, RadiusY, and StrokeThickness values to 20. また、設定、Fillカスタム式「{TemplateBinding バック グラウンド}」を使用して、テンプレートの背景に) を設定およびStroke「透過的」になります。In addition, set the Fill to the background of the template using the custom expression "{TemplateBinding Background}" ) and set Stroke to "transparent". 注意の設定、FillStrokeにおいては逆の場合のサイズします。Notice that the settings for the Fill and Stroke of innerRectangle are the opposite of those for outerRectangle.

    四角形の外観を変更する方法How to change the appearance of a rectangle

  7. 上のグラス レイヤーを追加します。 ボタンの外観のカスタマイズの最後の部分では、一番上にガラス レイヤーを追加します。Add a glass layer on top: The final piece of customizing the look of the button is to add a glass layer on top. このガラス レイヤーは、3 番目の四角形で構成されます。This glass layer consists of a third rectangle. グラス四角形にディメンションと類似しています、ガラスには、ボタンは、全体を対象は、しているため、サイズします。Because the glass will cover the entire button, the glass rectangle is similar in dimensions to the outerRectangle. そのためのコピーを単純にすると、四角形を作成、サイズします。Therefore, create the rectangle by simply making a copy of the outerRectangle. 強調表示サイズCTRL + C と CTRL + V を使用して、コピーを作成するとします。Highlight outerRectangle and use CTRL+C and CTRL+V to make a copy. この新しい四角形"glassCube"の名前を付けます。Name this new rectangle "glassCube".

  8. GlassCube の位置を変更して、必要な場合。 場合glassCubeはボタン全体をカバーするように配置されていない、位置にドラッグします。Reposition glassCube if necessary: If glassCube is not already positioned so that it covers the entire button, drag it into position.

  9. GlassCube サイズよりも若干異なる図形に説明します。 プロパティを変更glassCubeします。Give glassCube a slightly different shape than outerRectangle: Change the properties of glassCube. 最初に変更することで、RadiusXRadiusY10 プロパティとStrokeThickness2 にします。Start off by changing the RadiusX and RadiusY properties to 10 and the StrokeThickness to 2.

    GlassCube の外観設定The appearance settings for glassCube

  10. GlassCube のガラスのように行います。 設定、 Fill 75% 不透明であり、白と交互 Transparent 6 以上約均等に分散される線形グラデーションの間隔の間隔を使用して、ガラスのような外観にします。Make glassCube look like glass: Set the Fill to a glassy look by using a linear gradient that is 75% opaque and alternates between the color White and Transparent over 6 approximately evenly spaced intervals. これは、何をグラデーションの分岐点を設定します。This is what to set the gradient stops to:

    • グラデーションの分岐点 1:白、75% のアルファ値Gradient Stop 1: White with Alpha value of 75%

    • グラデーションの分岐点 2:透明Gradient Stop 2: Transparent

    • グラデーションの分岐点 3:白、75% のアルファ値Gradient Stop 3: White with Alpha value of 75%

    • グラデーションの分岐点 4:透明Gradient Stop 4: Transparent

    • グラデーションの分岐点 5:白、75% のアルファ値Gradient Stop 5: White with Alpha value of 75%

    • グラデーションの分岐点 6:透明Gradient Stop 6: Transparent

    これには、「波線」のガラスの外観が作成されます。This creates a "wavy" glass look.

    ガラスのような四角形A rectangle that looks like glass

  11. グラスのレイヤーを非表示にします。 ガラスのようなレイヤーがどのように表示場合は、これに移動、外観ウィンドウプロパティ パネルを非表示にする、0% の不透明度を設定するとします。Hide the glass layer: Now that you see what the glassy layer looks like, go into the Appearance pane of the Properties panel and set the Opacity to 0% to hide it. セクションでは、事前にプロパティ トリガーとイベントを表示し、ガラス レイヤーを操作に使用します。In the sections ahead, we'll use property triggers and events to show and manipulate the glass layer.

    グラス四角形を非表示にする方法How to hide the glass rectangle

ボタンの動作をカスタマイズします。Customize the Button Behavior

この時点では、そのテンプレートを編集して、ボタンの表示をカスタマイズしているが、ボタンは通常のボタンの操作 (たとえば、マウス オーバー時の外観を変更する、フォーカスを受け取るおよび をクリックします。) としてユーザーの操作に反応しません次の 2 つの手順では、カスタム ボタンに上記のような動作を構築する方法を説明します。At this point, you have customized the presentation of the button by editing its template, but the button does not react to user actions as typical buttons do (for example, changing appearance upon mouse-over, receiving focus, and clicking.) The next two procedures show how to build behaviors like these into the custom button. シンプル プロパティのトリガーで開始がされ、イベント トリガーとアニメーションを追加します。We'll start with simple property triggers, and then add event triggers and animations.

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

  1. 新しいプロパティ トリガーを作成します。 GlassCube 選択されていること、 + プロパティ で、 トリガー パネル (次の手順を次の図を参照してください)。Create a new property trigger: With glassCube selected, click + Property in the Triggers panel (see the figure that follows the next step). これにより、プロパティ トリガーが既定のプロパティ トリガーを作成します。This creates a property trigger with a default property trigger.

  2. IsMouseOver、トリガーで使用されるプロパティを行います。 プロパティを変更IsMouseOverします。Make IsMouseOver the property used by the trigger: Change the property to IsMouseOver. これにより、プロパティ トリガーの場合にアクティブ化、IsMouseOverプロパティはtrue(ユーザーが指す、ボタン、マウスを使用する場合)。This makes the property trigger activate when the IsMouseOver property is true (when the user points to the button with the mouse).

    プロパティでトリガーを設定する方法How to set a trigger on a property

  3. IsMouseOver は、glassCube の 100% の不透明度がトリガーされます。 なお、トリガーの記録がオン(上記の図を参照してください)。IsMouseOver triggers opacity of 100% for glassCube: Notice that the Trigger recording is on (see the preceding figure). プロパティの値に加えた変更はすべてこれによりglassCubeの記録がオンの間に行われるときにアクションなりますIsMouseOvertrueします。This means that any changes you make to the property values of glassCube while recording is on will become an action that takes place when IsMouseOver is true. 記録中は、変更、OpacityglassCubeを 100% にします。While recording, change the Opacity of glassCube to 100%.

    ボタンの不透明度を設定する方法How to set the opacity of a button

    最初のプロパティ トリガーが作成されました。You have now created your first property trigger. 注意して、トリガー パネルが、エディターの記録、 Opacity 100% に変更されます。Notice that the Triggers panel of the editor has recorded the Opacity being changed to 100%.

    [トリガー] パネルThe "Triggers" panel

    F5 キーを押して、アプリケーションを実行し、上とボタンの外にマウス ポインターを移動します。Press F5 to run the application, and move the mouse pointer over and off the button. 時に表示されるガラス レイヤーが表示するボタンをマウスでポイントして、ポインターが離れたときに表示されなくなります。You should see the glass layer appear when you mouse-over the button and disappear when the pointer leaves.

  4. IsMouseOver トリガー値の変更のストロークを描画します。 その他のアクションに関連付けてみましょう、IsMouseOverトリガーします。IsMouseOver triggers stroke value change: Let's associate some other actions with the IsMouseOver trigger. 記録中に、選択した項目を切り替えるglassCubeサイズします。While recording continues, switch your selection from glassCube to outerRectangle. 設定し、Strokeサイズ"以下 {DynamicResource {x: 静的 SystemColors.HighlightBrushKey}}"のカスタム式にします。Then set the Stroke of outerRectangle to the custom expression of "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}". これにより設定、Stroke標準的なボタンで使用される色を強調表示します。This sets the Stroke to the typical highlight color used by buttons. F5 キーを押して、ボタンにマウスを置くときの効果を確認します。Press F5 to see the effect when you mouse over the button.

    ストロークを強調表示色を設定する方法How to set the stroke to the highlight color

  5. IsMouseOver ぼやけてテキストがトリガーされます。 1 つ以上の処理に関連付けてみましょう、IsMouseOverプロパティ トリガーします。IsMouseOver triggers blurry text: Let's associate one more action to the IsMouseOver property trigger. 上にガラスが表示されるときに、少しぼやけて表示されるボタンのコンテンツを作成します。Make the content of the button appear a little blurry when the glass appears over it. これを行うには、ブラーを適用できるBitmapEffectContentPresenter(myContentPresenter)。To do this, we can apply a blur BitmapEffect to the ContentPresenter (myContentPresenter).

    ボタンの内容をぼかす方法How to blur the content of a button

    注意

    返される、プロパティ パネルことが、検索を実行した前にBitmapEffectからのテキストをクリア、検索ボックスします。To return the Properties panel back to what it was before you did the search for BitmapEffect, clear the text from the Search box.

    この時点を使用してプロパティ トリガーに関連付けられているいくつかの操作、マウス ポインターがボタン領域に出入りするときの動作を強調表示を作成します。At this point, we have used a property trigger with several associated actions to create highlighting behavior for when the mouse pointer enters and leaves the button area. フォーカスがあるときに強調表示するボタンをもう 1 つの一般的な動作は、(クリックしてされた後など)。Another typical behavior for a button is to highlight when it has focus (as after it is clicked). もう 1 つのプロパティ トリガーを追加することでこのような動作を追加できる、IsFocusedプロパティ。We can add such behavior by adding another property trigger for the IsFocused property.

  6. IsFocused のプロパティ トリガーを作成します。 場合と同じ手順を使用してIsMouseOver(このセクションの最初の手順を参照) の別のプロパティ トリガーを作成、IsFocusedプロパティ。Create property trigger for IsFocused: Using the same procedure as for IsMouseOver (see the first step of this section), create another property trigger for the IsFocused property. 中にトリガーの記録がオン、次のアクション、トリガーを追加します。While Trigger recording is on, add the following actions to the trigger:

    • glassCube取得、Opacityの 100% です。glassCube gets an Opacity of 100%.

    • サイズ取得、 Stroke "以下 {DynamicResource {x: 静的 SystemColors.HighlightBrushKey}}"のカスタム式の値。outerRectangle gets a Stroke custom expression value of "{DynamicResource {x:Static SystemColors.HighlightBrushKey}}".

このチュートリアルの最後の手順としては、ボタンに、アニメーションを追加します。As the final step in this walkthrough, we will add animations to the button. これらのアニメーションはイベントによってトリガーされます-具体的には、MouseEnterClickイベント。These animations will be triggered by events—specifically, the MouseEnter and Click events.

イベント トリガーとアニメーションを使用して、対話機能を追加するにはTo use event triggers and animations to add interactivity

  1. MouseEnter イベント トリガーを作成します。 新しいイベント トリガーを追加し、選択MouseEnterとしてイベントをトリガーに使用します。Create a MouseEnter Event Trigger: Add a new event trigger and select MouseEnter as the event to use in the trigger.

    MouseEnter イベント トリガーを作成する方法How to create a MouseEnter event trigger

  2. アニメーション タイムラインを作成します。 次に、アニメーション タイムラインを関連付ける、MouseEnterイベント。Create an animation timeline: Next, associate an animation timeline to the MouseEnter event.

    イベントにアニメーション タイムラインを追加する方法How to add an animation timeline to an event

    キーを押すOK 、新しいタイムラインを作成する、タイムライン パネルが表示されますされ「タイムラインの記録がオン」の設計のパネルに表示されます。After you press OK to create a new timeline, a Timeline Panel appears and "Timeline recording is on" is visible in the design panel. つまり、(アニメーション化するプロパティの変更) タイムラインでプロパティの変更を記録し始めることができます。This means we can start recording property changes in the timeline (animate property changes).

    注意

    ウィンドウやパネルを表示するには、サイズを変更する必要があります。You may need to resize your window and/or panels to see the display.

    タイムライン パネルThe timeline panel

  3. キーフレームを作成します。 アニメーションを作成するには、アニメーション化する、2 つまたは複数のキーフレームをタイムラインで、これらのキーフレームの作成、アニメーションの補間にするプロパティの値を設定するオブジェクトを選択します。Create a keyframe: To create an animation, select the object you want to animate, create two or more keyframes on the timeline, and for those keyframes, set the property values you want the animation to interpolate between. 次の図に従って、キーフレームを作成します。The following figure guides you through the creation of a keyframe.

    キーフレームを作成する方法How to create a keyframe

  4. このキーフレームに glassCube を縮小するには。 選択されている 2 番目のキーフレーム、サイズの縮小、 glassCubeを使用して、フル サイズの 90% をサイズ変換します。Shrink glassCube at this keyframe: With the second keyframe selected, shrink the size of the glassCube to 90% of its full size using the Size Transform.

    ボタンのサイズを縮小する方法How to shrink the size of a button

    F5 キーを押してアプリケーションを実行します。Press F5 to run the application. ボタンの上にマウス ポインターを移動します。Move the mouse pointer over the button. ボタンの上にガラス レイヤーが縮小することに注意してください。Notice that the glass layer shrinks on top of the button.

  5. 別のイベント トリガーを作成し、さまざまなアニメーションを関連付けます。 さらに 1 つのアニメーションを追加してみましょう。Create another Event Trigger and associate a different animation with it: Let's add one more animation. イベント トリガーの前のアニメーションを作成するために使用するのと同様の手順を使用します。Use a similar procedure to what you used to create the previous event trigger animation:

    1. 新しいイベント トリガーを作成、Clickイベント。Create a new event trigger using the Click event.

    2. 新しいタイムラインを関連付ける、Clickイベント。Associate a new timeline with the Click event.

    新しいタイムラインを作成する方法How to create a new timeline

    1. このタイムラインの 2 つのキーフレーム、0.0 秒で 0.3 秒に 2 つ目を作成します。For this timeline, create two keyframes, one at 0.0 seconds and the second one at 0.3 seconds.

    2. 強調表示されている 0.3 の秒のキーフレーム、設定、回転角度を 360 度。With the keyframe at 0.3 seconds highlighted, set the Rotate Transform Angle to 360 degrees.

    回転変換を作成する方法How to create a rotate transform

    1. F5 キーを押してアプリケーションを実行します。Press F5 to run the application. ボタンをクリックします。Click the button. グラス レイヤーが回転することに注意してください。Notice that the glass layer spins around.

まとめConclusion

カスタマイズされたボタンが完了しました。You have completed a customized button. このアプリケーションのすべてのボタンに適用されているボタン テンプレートを使用して行いました。You did this using a button template that was applied to all buttons in the application. テンプレート編集モードのままにする場合 (次の図を参照してください) と他のボタンを作成、外観し、動作は既定のボタンではなく、カスタム ボタンのように表示されます。If you leave the template editing mode (see the following figure) and create more buttons, you will see that they look and behave like your custom button rather than like the default button.

カスタム ボタン テンプレートThe custom button template

同じテンプレートを使用する複数のボタンMultiple buttons that use the same template

F5 キーを押してアプリケーションを実行します。Press F5 to run the application. ボタンをクリックして、これらはすべて動作と同じ方法に注意してください。Click the buttons and notice how they all behave the same.

テンプレートをカスタマイズしていたときに設定することに注意してください、FillプロパティのにおいてStrokeプロパティサイズテンプレート バック グラウンド ({TemplateBinding バック グラウンド})。Remember that while you were customizing the template, you set the Fill property of innerRectangle and the Stroke property outerRectangle to the template background ({TemplateBinding Background}). このため、個々 のボタンの背景色を設定すると、設定した背景は、個々 のプロパティの使用されます。Because of this, when you set the background color of the individual buttons, the background you set will be used for those respective properties. これで、背景を変更してみてください。Try changing the backgrounds now. 次の図では、さまざまなグラデーションが使用されます。In the following figure, different gradients are used. そのため、テンプレートは全体のカスタマイズ ボタンのようなコントロールの場合に便利ですが、コントロール テンプレートを使用できる変更することも互いに異なります。Therefore, although a template is useful for overall customization of controls like button, controls with templates can still be modified to look different from each other.

異なるを検索する、同じテンプレートでボタンButtons with the same template that look diferent

結論として、ボタン テンプレートをカスタマイズするプロセスでは Microsoft Expression Blend では、次を実行する方法について説明しました。In conclusion, in the process of customizing a button template you have learned how to do the following in Microsoft Expression Blend:

  • コントロールの外観をカスタマイズします。Customize the look of a control.

  • プロパティ トリガーを設定します。Set property triggers. プロパティ トリガーは、コントロールにだけでなく、ほとんどのオブジェクトで使用されるあるために、非常に便利です。Property triggers are very useful because they can be used on most objects, not just controls.

  • イベント トリガーを設定します。Set event triggers. イベント トリガーは、コントロールにだけでなく、ほとんどのオブジェクトで使用されるあるために、非常に便利です。Event triggers are very useful because they can be used on most objects, not just controls.

  • アニメーションを作成します。Create animations.

  • BitmapEffects を追加する: その他のグラデーションを作成し、変換を使用するオブジェクトの基本プロパティを設定します。Miscellaneous: create gradients, add BitmapEffects, use transforms, and set basic properties of objects.

関連項目See also