チュートリアル: XAML を使用したボタンの作成Walkthrough: Create a Button by Using XAML

このチュートリアルでは、Windows Presentation Foundation (WPF) アプリケーションで使用するためのアニメーションのボタンを作成する方法について説明します。The objective of this walkthrough is to learn how to create an animated button for use in a Windows Presentation Foundation (WPF) application. このチュートリアルでは、スタイルとテンプレートを使用して、コードの再利用し、ボタンの宣言からボタンのロジックの分離を許可するカスタマイズされたボタンのリソースを作成します。This walkthrough uses styles and a template to create a customized button resource that allows reuse of code and separation of button logic from the button declaration. このチュートリアルが完全に記述されたExtensible Application Markup Language (XAML)Extensible Application Markup Language (XAML)します。This walkthrough is written entirely in Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML).

重要

このチュートリアルで入力またはコピーして貼り付けることによって、アプリケーションを作成するための手順を説明するExtensible Application Markup Language (XAML)Extensible Application Markup Language (XAML)に Microsoft Visual Studio。This walkthrough guides you through the steps for creating the application by typing or copying and pasting Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) into Microsoft Visual Studio. デザイン ツール (Microsoft Expression Blend) を使用して、参照してください、同じアプリケーションを作成する方法を学習したい場合Microsoft Expression Blend を使用してボタンを作成するします。If you would prefer to learn how to use a design tool (Microsoft Expression Blend) to create the same application, see Create a Button by Using Microsoft Expression Blend.

次の図は、完成したボタンを示しています。The following figure shows the finished buttons.

XAML を使用して作成されたカスタム ボタンCustom buttons that were created by using XAML

基本的なボタンを作成します。Create Basic Buttons

新しいプロジェクトを作成し、ボタンをいくつかのウィンドウに追加してみましょう。Let's start by creating a new project and adding a few buttons to the window.

新しい WPF プロジェクトを作成し、ウィンドウにボタンを追加するにはTo create a new WPF project and add buttons to the window

  1. Visual Studio を起動します。Start Visual Studio.

  2. 新しい WPF プロジェクトを作成します。****[ファイル] メニューの [新規作成] をポイントし、 [プロジェクト] をクリックします。Create a new WPF project: On the File menu, point to New, and then click Project. 検索、 Windows アプリケーション (WPF) テンプレートとプロジェクト"AnimatedButton"の名前。Find the Windows Application (WPF) template and name the project "AnimatedButton". これにより、アプリケーションのスケルトンが作成されます。This will create the skeleton for the application.

  3. 基本的な既定のボタンを追加します。 このチュートリアルで必要なすべてのファイルは、テンプレートによって提供されます。Add basic default buttons: All the files you need for this walkthrough are provided by the template. ダブルクリックして、ソリューション エクスプ ローラーで、Window1.xaml ファイルを開きます。Open the Window1.xaml file by double clicking it in Solution Explorer. 既定では、 Grid Window1.xaml 内の要素。By default, there is a Grid element in Window1.xaml. 削除、Grid要素をいくつかのボタンを追加して、 Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) 」と入力またはコピーして貼り付けることで Window1.xaml を強調表示されている次のコード ページ。Remove the Grid element and add a few buttons to the Extensible Application Markup Language (XAML)Extensible Application Markup Language (XAML) page by typing or copy and pasting the following highlighted code to Window1.xaml:

    <Window x:Class="AnimatedButton.Window1"  
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
      Title="AnimatedButton" Height="300" Width="300"   
      Background="Black">
      <!-- Buttons arranged vertically inside a StackPanel. -->
      <StackPanel HorizontalAlignment="Left">
          <Button>Button 1</Button>
          <Button>Button 2</Button>
          <Button>Button 3</Button>
      </StackPanel>  
    </Window>  
    

    F5 キーを押してアプリケーションを実行次の図のようなボタンのセットが表示されます。Press F5 to run the application; you should see a set of buttons that looks like the following figure.

    3 つの基本的なボタンThree basic buttons

    基本的なボタンを作成するには、Window1.xaml ファイルの操作が完了したら。Now that you have created the basic buttons, you are finished working in the Window1.xaml file. このチュートリアルの残りの部分は、スタイルとボタンのテンプレートを定義する、app.xaml ファイルについて説明します。The rest of the walkthrough focuses on the app.xaml file, defining styles and a template for the buttons.

基本的なプロパティを設定します。Set Basic Properties

次に、ボタンの外観とレイアウトを制御するこれらのボタンをいくつかのプロパティを設定してみましょう。Next, let's set some properties on these buttons to control the button appearance and layout. ボタンのプロパティを個別に設定するのではなく、アプリケーション全体のボタンのプロパティを定義するのにリソースを使用します。Rather than setting properties on the buttons individually, you will use resources to define button properties for the entire application. アプリケーション リソースは外部に概念的に似ていますカスケード スタイル シート (CSS)Cascading Style Sheets (CSS)Web ページです。 ただし、リソースはよりもはるかに強力なカスケード スタイル シート (CSS)Cascading Style Sheets (CSS)、このチュートリアルの最後で表示されます。Application resources are conceptually similar to external カスケード スタイル シート (CSS)Cascading Style Sheets (CSS) for Web pages; however, resources are much more powerful than カスケード スタイル シート (CSS)Cascading Style Sheets (CSS), as you will see by the end of this walkthrough. リソースの詳細については、次を参照してください。 XAML リソースします。To learn more about resources, see XAML Resources.

スタイルを使用して、ボタンの基本プロパティを設定するにはTo use styles to set basic properties on the buttons

  1. Application.Resources ブロックを定義します。 App.xaml を開きがない場合は、次の強調表示されたマークアップを追加します。Define an Application.Resources block: Open app.xaml and add the following highlighted markup if it is not already there:

    <Application x:Class="AnimatedButton.App"  
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
      StartupUri="Window1.xaml"  
      >  
      <Application.Resources>
        <!-- Resources for the entire application can be defined here. -->
      </Application.Resources>  
    </Application>  
    

    リソースのスコープは、定義したリソースによって決定されます。Resource scope is determined by where you define the resource. 内のリソースを定義するApplication.Resourcesapp.xaml ファイル、アプリケーションで任意の場所から使用するリソースを使用できます。Defining resources in Application.Resources in the app.xaml file enables the resource to be used from anywhere in the application. 詳細については、リソースのスコープを定義するを参照してください。 XAML リソースします。To learn more about defining the scope of your resources, see XAML Resources.

  2. スタイルを作成し、基本的なプロパティ値を定義します。 次のマークアップを追加、Application.Resourcesブロックします。Create a style and define basic property values with it: Add the following markup to the Application.Resources block. このマークアップを作成、Style設定、アプリケーションのすべてのボタンに適用する、Widthを 90 にボタンのMargin10。This markup creates a Style that applies to all buttons in the application, setting the Width of the buttons to 90 and the Margin to 10:

    <Application.Resources>  
      <Style TargetType="Button">
        <Setter Property="Width" Value="90" />
        <Setter Property="Margin" Value="10" />
      </Style>  
    </Application.Resources>  
    

    TargetTypeプロパティは、型のすべてのオブジェクトにスタイルが適用されることを指定しますButtonします。The TargetType property specifies that the style applies to all objects of type Button. Setterの別のプロパティ値を設定、Styleします。Each Setter sets a different property value for the Style. そのため、この時点で、アプリケーション内のすべてのボタンが幅 90、余白は 10 です。Therefore, at this point every button in the application has a width of 90 and a margin of 10. アプリケーションの実行に f5 キーを押すと、次のウィンドウが表示されます。If you press F5 to run the application, you see the following window.

    幅 90、余白 10 のボタンButtons with a width of 90 and a margin of 10

    さらに多くのさまざまなオブジェクトが対象となるを微調整する方法を含む、複合プロパティの値を指定しても入力としてスタイルを使用して、その他のスタイルのスタイルで行えるがあります。There is much more you can do with styles, including a variety of ways to fine-tune what objects are targeted, specifying complex property values, and even using styles as input for other styles. 詳しくは、「 スタイルとテンプレート」をご覧ください。For more information, see Styling and Templating.

  3. リソースへのスタイル プロパティの値を設定します。 リソースには、一般的に定義されるオブジェクトと値を再利用する簡単な方法が有効にします。Set a style property value to a resource: Resources enable a simple way to reuse commonly defined objects and values. リソースを使用して、コードをモジュール性の高い複雑な値を定義すると特に便利です。It is especially useful to define complex values using resources to make your code more modular. App.xaml には、次の強調表示されたマークアップを追加します。Add the following highlighted markup to app.xaml.

    <Application.Resources>  
      <LinearGradientBrush x:Key="GrayBlueGradientBrush" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="DarkGray" Offset="0" />
        <GradientStop Color="#CCCCFF" Offset="0.5" />
        <GradientStop Color="DarkGray" Offset="1" />
      </LinearGradientBrush>  
      <Style TargetType="{x:Type Button}">  
        <Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" />  
        <Setter Property="Width" Value="80" />  
        <Setter Property="Margin" Value="10" />  
      </Style>  
    </Application.Resources>  
    

    すぐ下、Application.Resourcesブロック"GrayBlueGradientBrush"という名前のリソースを作成します。Directly under the Application.Resources block, you created a resource called "GrayBlueGradientBrush". このリソースは、水平方向のグラデーションを定義します。This resource defines a horizontal gradient. このリソースをどこからでもプロパティの値として使用できますのボタン スタイル setter 内など、アプリケーションで、Backgroundプロパティ。This resource can be used as a property value from anywhere in the application, including inside the button style setter for the Background property. ここで、すべてのボタンがある、Backgroundこのグラデーションのプロパティの値。Now, all the buttons have a Background property value of this gradient.

    F5 キーを押してアプリケーションを実行します。Press F5 to run the application. 次のようになります。It should look like the following.

    グラデーション背景を持つボタンButtons with a gradient background

ボタンの外観を定義するテンプレートを作成します。Create a Template That Defines the Look of the Button

このセクションでは、ボタンの外観 (presentation) をカスタマイズするテンプレートを作成します。In this section, you create a template that customizes the appearance (presentation) of the button. ボタンのプレゼンテーションは、ボタンの外観を一意に四角形とその他のコンポーネントを含むいくつかのオブジェクトの構成されます。The button presentation is made up of several objects including rectangles and other components to give the button a unique look.

ここまでは、アプリケーションのボタンの外観の制御は、ボタンのプロパティの変更に制限されていましたが。So far, the control of how buttons look in the application has been confined to changing properties of the button. ボタンの外観をより大きく変更する場合は?What if you want to make more radical changes to the button's appearance? テンプレートには、オブジェクトのプレゼンテーションに強力な制御が有効にします。Templates enable powerful control over the presentation of an object. テンプレートは、スタイル内で使用できる、ため (このチュートリアルでは、ボタン) では、スタイルが適用されるすべてのオブジェクトにテンプレートを適用できます。Because templates can be used within styles, you can apply a template to all objects that the style applies to (in this walkthrough, the button).

テンプレートを使用して、ボタンの外観を定義するにはTo use the template to define the look of the button

  1. テンプレートを設定します。 コントロールなどのため、Buttonが、Templateプロパティで設定している他のプロパティ値と同様、テンプレート プロパティの値を定義できますをStyleを使用して、Setterします。Set up the template: Because controls like Button have a Template property, you can define the template property value just like the other property values we have set in a Style using a Setter. 次の強調表示されたマークアップをボタンのスタイルに追加します。Add the following highlighted markup to your button style.

    <Application.Resources>  
      <LinearGradientBrush x:Key="GrayBlueGradientBrush"   
        StartPoint="0,0" EndPoint="1,1">  
        <GradientStop Color="DarkGray" Offset="0" />  
        <GradientStop Color="#CCCCFF" Offset="0.5" />  
        <GradientStop Color="DarkGray" Offset="1" />  
      </LinearGradientBrush>  
      <Style TargetType="{x:Type Button}">  
        <Setter Property="Background" Value="{StaticResource GrayBlueGradientBrush}" />  
        <Setter Property="Width" Value="80" />  
        <Setter Property="Margin" Value="10" />  
        <Setter Property="Template">
          <Setter.Value>
            <!-- The button template is defined here. -->
          </Setter.Value>
        </Setter>  
      </Style>  
    </Application.Resources>  
    
  2. ボタンのプレゼンテーションを変更するには。 この時点では、テンプレートを定義する必要があります。Alter button presentation: At this point, you need to define the template. 次の強調表示されたマークアップを追加します。Add the following highlighted markup. このマークアップでは、2 つを指定しますRectangle角の丸いを持つ要素が続く、DockPanelします。This markup specifies two Rectangle elements with rounded edges, followed by a DockPanel. DockPanelされるホストに、ContentPresenterボタンの。The DockPanel is used to host the ContentPresenter of the button. AContentPresenterボタンのコンテンツを表示します。A ContentPresenter displays the content of the button. このチュートリアルでは、コンテンツは、テキスト (「ボタン 1」、「ボタン 2」、「ボタン 3」) です。In this walkthrough, the content is text ("Button 1", "Button 2", "Button 3"). すべてのテンプレートのコンポーネント (四角形とDockPanel) 内のレイアウトは、Gridします。All of the template components (the rectangles and the DockPanel) are laid out inside of a Grid.

    <Setter.Value>  
      <ControlTemplate TargetType="Button">
        <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" ClipToBounds="True">
          <!-- Outer Rectangle with rounded corners. -->
          <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}" RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />
          <!-- Inner Rectangle with rounded corners. -->
          <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="Transparent" StrokeThickness="20" Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" />
          <!-- Present Content (text) of the button. -->
          <DockPanel Name="myContentPresenterDockPanel">
            <ContentPresenter x:Name="myContentPresenter" Margin="20" Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />
          </DockPanel>
        </Grid>
      </ControlTemplate>  
    </Setter.Value>  
    

    F5 キーを押してアプリケーションを実行します。Press F5 to run the application. 次のようになります。It should look like the following.

  3. テンプレートには、グラス効果を追加します。 次に、ガラスを追加します。Add a glasseffect to the template: Next you will add the glass. まずガラスのグラデーション効果を作成するいくつかのリソースを作成します。First you create some resources that create a glass gradient effect. これらグラデーション内のリソース任意の場所を追加、Application.Resourcesブロック。Add these gradient resources anywhere within the Application.Resources block:

    <Application.Resources>  
      <GradientStopCollection x:Key="MyGlassGradientStopsResource">
        <GradientStop Color="WhiteSmoke" Offset="0.2" />     
        <GradientStop Color="Transparent" Offset="0.4" />    
        <GradientStop Color="WhiteSmoke" Offset="0.5" />     
        <GradientStop Color="Transparent" Offset="0.75" />     
        <GradientStop Color="WhiteSmoke" Offset="0.9" />     
        <GradientStop Color="Transparent" Offset="1" />   
      </GradientStopCollection>   
      <LinearGradientBrush x:Key="MyGlassBrushResource"    
        StartPoint="0,0" EndPoint="1,1" Opacity="0.75"
        GradientStops="{StaticResource MyGlassGradientStopsResource}" />  
    <!-- Styles and other resources below here. -->  
    

    これらのリソースとして使用、Fillに挿入する四角形のGridボタン テンプレートの。These resources are used as the Fill for a rectangle that we insert into the Grid of the button template. テンプレートには、次の強調表示されたマークアップを追加します。Add the following highlighted markup to the template.

    <Setter.Value>  
      <ControlTemplate TargetType="{x:Type Button}">  
        <Grid Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"  
          ClipToBounds="True">  
    
        <!-- Outer Rectangle with rounded corners. -->  
        <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch"   
          VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}"   
          RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />  
    
        <!-- Inner Rectangle with rounded corners. -->  
        <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch"   
          VerticalAlignment="Stretch" Stroke="Transparent" StrokeThickness="20"   
          Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20" />  
    
        <!-- Glass Rectangle -->     
        <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch"       
          VerticalAlignment="Stretch"       
          StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0"       
          Fill="{StaticResource MyGlassBrushResource}"       
          RenderTransformOrigin="0.5,0.5">
          <Rectangle.Stroke>         
            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
              <LinearGradientBrush.GradientStops>
                <GradientStop Offset="0.0" Color="LightBlue" />
                <GradientStop Offset="1.0" Color="Gray" />
              </LinearGradientBrush.GradientStops>
            </LinearGradientBrush>       
          </Rectangle.Stroke>       
          <!-- These transforms have no effect as they are declared here.
          The reason the transforms are included is to be targets
          for animation (see later). -->       
          <Rectangle.RenderTransform>
            <TransformGroup>
              <ScaleTransform />
              <RotateTransform />
            </TransformGroup>
          </Rectangle.RenderTransform>
          <!-- A BevelBitmapEffect is applied to give the button a "Beveled" look. -->
          <Rectangle.BitmapEffect>
            <BevelBitmapEffect />
          </Rectangle.BitmapEffect>
        </Rectangle>  
    
        <!-- Present Text of the button. -->  
        <DockPanel Name="myContentPresenterDockPanel">  
          <ContentPresenter x:Name="myContentPresenter" Margin="20"   
            Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />  
        </DockPanel>  
      </Grid>  
    </ControlTemplate>  
    </Setter.Value>  
    

    注意して、Opacity四角形のx:Name"glassCube"のプロパティが 0 の場合、サンプルを実行するときに、一番上にオーバーレイ グラス四角形は表示されないようにします。Notice that the Opacity of the rectangle with the x:Name property of "glassCube" is 0, so when you run the sample, you do not see the glass rectangle overlaid on top. これは後でトリガーを追加のテンプレートをユーザーがボタンであるためにです。This is because we will later add triggers to the template for when the user interacts with the button. ボタンの外観のように今すぐ変更することによって、ご覧、 Opacity 1 およびアプリケーションを実行する値。However, you can see what the button looks like now by changing the Opacity value to 1 and running the application. 次の図を参照してください。See the following figure. 次の手順に進む前に変更、Opacityを 0 に戻します。Before proceeding to the next step, change the Opacity back to 0.

    XAML を使用して作成されたカスタム ボタンCustom buttons that were created by using XAML

ボタンの対話機能を作成します。Create Button Interactivity

このセクションでは、プロパティ トリガーと、プロパティ値を変更し、ボタンの上にマウス ポインターを移動し、クリックしてなどのユーザー アクションへの応答でアニメーションを実行するイベント トリガーを作成します。In this section, you will create property triggers and event triggers to change property values and run animations in response to user actions such as moving the mouse pointer over the button and clicking.

対話機能 (マウス、マウスのままをクリックし、およびなど) を追加する簡単な方法では、テンプレートまたはスタイル内のトリガーを定義します。An easy way to add interactivity (mouse-over, mouse-leave, click, and so on) is to define triggers within your template or style. 作成する、Triggerなどのプロパティの"condition"を定義します。ボタンIsMouseOverプロパティの値が等しくtrueします。To create a Trigger, you define a property "condition" such as: The button IsMouseOver property value is equal to true. トリガー条件が true のときに行われるセッター (アクション) を定義します。You then define setters (actions) that take place when the trigger condition is true.

ボタンの対話機能を作成するにはTo create button interactivity

  1. テンプレートのトリガーを追加します。 テンプレートには、強調表示されたマークアップを追加します。Add template triggers: Add the highlighted markup to your template.

    <Setter.Value>  
      <ControlTemplate TargetType="{x:Type Button}">  
        <Grid Width="{TemplateBinding Width}"   
          Height="{TemplateBinding Height}" ClipToBounds="True">  
    
          <!-- Outer Rectangle with rounded corners. -->  
          <Rectangle x:Name="outerRectangle" HorizontalAlignment="Stretch"   
          VerticalAlignment="Stretch" Stroke="{TemplateBinding Background}"   
          RadiusX="20" RadiusY="20" StrokeThickness="5" Fill="Transparent" />  
    
          <!-- Inner Rectangle with rounded corners. -->  
          <Rectangle x:Name="innerRectangle" HorizontalAlignment="Stretch"   
            VerticalAlignment="Stretch" Stroke="Transparent"   
            StrokeThickness="20"   
            Fill="{TemplateBinding Background}" RadiusX="20" RadiusY="20"   
          />  
    
          <!-- Glass Rectangle -->  
          <Rectangle x:Name="glassCube" HorizontalAlignment="Stretch"  
            VerticalAlignment="Stretch"  
            StrokeThickness="2" RadiusX="10" RadiusY="10" Opacity="0"  
            Fill="{StaticResource MyGlassBrushResource}"  
            RenderTransformOrigin="0.5,0.5">  
            <Rectangle.Stroke>  
              <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">  
                <LinearGradientBrush.GradientStops>  
                  <GradientStop Offset="0.0" Color="LightBlue" />  
                  <GradientStop Offset="1.0" Color="Gray" />  
                </LinearGradientBrush.GradientStops>  
              </LinearGradientBrush>  
            </Rectangle.Stroke>  
    
            <!-- These transforms have no effect as they   
                 are declared here.   
                 The reason the transforms are included is to be targets   
                 for animation (see later). -->  
            <Rectangle.RenderTransform>  
              <TransformGroup>  
                <ScaleTransform />  
                <RotateTransform />  
              </TransformGroup>  
            </Rectangle.RenderTransform>  
    
              <!-- A BevelBitmapEffect is applied to give the button a   
                   "Beveled" look. -->  
            <Rectangle.BitmapEffect>  
              <BevelBitmapEffect />  
            </Rectangle.BitmapEffect>  
          </Rectangle>  
    
          <!-- Present Text of the button. -->  
          <DockPanel Name="myContentPresenterDockPanel">  
            <ContentPresenter x:Name="myContentPresenter" Margin="20"   
              Content="{TemplateBinding  Content}" TextBlock.Foreground="Black" />  
          </DockPanel>  
        </Grid>  
    
        <ControlTemplate.Triggers>       <!-- Set action triggers for the buttons and define            what the button does in response to those triggers. -->     </ControlTemplate.Triggers>  
      </ControlTemplate>  
    </Setter.Value>  
    
  2. プロパティ トリガーを追加します。 強調表示されたマークアップを追加、ControlTemplate.Triggersブロック。Add property triggers: Add the highlighted markup to the ControlTemplate.Triggers block:

    <ControlTemplate.Triggers>  
    
      <!-- Set properties when mouse pointer is over the button. -->   <Trigger Property="IsMouseOver" Value="True">     <!-- Below are three property settings that occur when the           condition is met (user mouses over button).  -->     <!-- Change the color of the outer rectangle when user           mouses over it. -->     <Setter Property ="Rectangle.Stroke" TargetName="outerRectangle"       Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />     <!-- Sets the glass opacity to 1, therefore, the           glass "appears" when user mouses over it. -->     <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />     <!-- Makes the text slightly blurry as though you           were looking at it through blurry glass. -->     <Setter Property="ContentPresenter.BitmapEffect"        TargetName="myContentPresenter">       <Setter.Value>         <BlurBitmapEffect Radius="1" />       </Setter.Value>     </Setter>   </Trigger>  
    
    <ControlTemplate.Triggers/>  
    

    F5 キーを押してアプリケーションを実行し、ボタンの上にマウス ポインターを実行すると、影響を確認します。Press F5 to run the application and see the effect as you run the mouse pointer over the buttons.

  3. フォーカスのトリガーを追加します。 次に、ボタンに (たとえば、ユーザーがクリックした後) にフォーカスがあるときに、ケースを処理するいくつかのような set アクセス操作子を追加します。Add a focus trigger: Next, we'll add some similar setters to handle the case when the button has focus (for example, after the user clicks it).

    <ControlTemplate.Triggers>  
    
      <!-- Set properties when mouse pointer is over the button. -->  
      <Trigger Property="IsMouseOver" Value="True">  
    
        <!-- Below are three property settings that occur when the   
             condition is met (user mouses over button).  -->  
        <!-- Change the color of the outer rectangle when user          mouses over it. -->  
        <Setter Property ="Rectangle.Stroke" TargetName="outerRectangle"  
          Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />  
    
        <!-- Sets the glass opacity to 1, therefore, the          glass "appears" when user mouses over it. -->  
        <Setter Property="Rectangle.Opacity" Value="1"       TargetName="glassCube" />  
    
        <!-- Makes the text slightly blurry as though you were          looking at it through blurry glass. -->  
        <Setter Property="ContentPresenter.BitmapEffect"       TargetName="myContentPresenter">  
          <Setter.Value>  
            <BlurBitmapEffect Radius="1" />  
          </Setter.Value>  
        </Setter>  
      </Trigger>  
      <!-- Set properties when button has focus. -->   <Trigger Property="IsFocused" Value="true">     <Setter Property="Rectangle.Opacity" Value="1"       TargetName="glassCube" />     <Setter Property="Rectangle.Stroke" TargetName="outerRectangle"       Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />     <Setter Property="Rectangle.Opacity" Value="1" TargetName="glassCube" />   </Trigger>  
    
    </ControlTemplate.Triggers>  
    

    F5 キーを押してアプリケーションを実行し、ボタンのいずれかをクリックします。Press F5 to run the application and click on one of the buttons. フォーカスをしているために、クリックした後、ボタンが強調表示されたままことに注意してください。Notice that the button stays highlighted after you click it because it still has focus. 新しいボタンに別のボタンをクリックすると、最後の 1 つがそれを失ったときにフォーカスを取得します。If you click another button, the new button gains focus while the last one loses it.

  4. アニメーションを追加MouseEnter MouseLeave : 次に、トリガーに一部のアニメーションを追加します。Add animations for MouseEnter and MouseLeave : Next we add some animations to the triggers. 任意の場所内の次のマークアップを追加、ControlTemplate.Triggersブロックします。Add the following markup anywhere inside of the ControlTemplate.Triggers block.

    <!-- Animations that start when mouse enters and leaves button. -->  
    <EventTrigger RoutedEvent="Mouse.MouseEnter">  
      <EventTrigger.Actions>  
        <BeginStoryboard Name="mouseEnterBeginStoryboard">  
          <Storyboard>  
          <!-- This animation makes the glass rectangle shrink in the X direction. -->  
            <DoubleAnimation Storyboard.TargetName="glassCube"   
              Storyboard.TargetProperty=  
              "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"  
              By="-0.1" Duration="0:0:0.5" />  
            <!-- This animation makes the glass rectangle shrink in the Y direction. -->  
            <DoubleAnimation  
            Storyboard.TargetName="glassCube"   
              Storyboard.TargetProperty=  
              "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"   
              By="-0.1" Duration="0:0:0.5" />  
          </Storyboard>  
        </BeginStoryboard>  
      </EventTrigger.Actions>  
    </EventTrigger>  
    <EventTrigger RoutedEvent="Mouse.MouseLeave">  
      <EventTrigger.Actions>  
        <!-- Stopping the storyboard sets all animated properties back to default. -->  
        <StopStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" />  
      </EventTrigger.Actions>  
    </EventTrigger>  
    

    グラス四角形には、マウス ポインターがボタン上に移動し、ポインターが離れたときに通常のサイズを返しますが縮小されます。The glass rectangle shrinks when the mouse pointer moves over the button and returns back to normal size when the pointer leaves.

    ポインターがボタンを超えた場合にトリガーされる 2 つのアニメーションがある (MouseEnterイベントが発生します)。There are two animations that are triggered when the pointer goes over the button (MouseEnter event is raised). これらのアニメーションは、X と Y 軸に沿ったグラス四角形を縮小します。These animations shrink the glass rectangle along the X and Y axis. プロパティに注目してください、DoubleAnimation要素-DurationByします。Notice the properties on the DoubleAnimation elements — Duration and By. Durationを 0.5 秒、発生するアニメーションのことを指定します、Byガラスが 10% に縮小ことを指定します。The Duration specifies that the animation occurs over half a second, and By specifies that the glass shrinks by 10%.

    2 番目のイベント トリガー (MouseLeave) 1 つ目を単純に停止します。The second event trigger (MouseLeave) simply stops the first one. 停止すると、 Storyboard、アニメーション化されたすべてのプロパティが既定値に戻ります。When you stop a Storyboard, all the animated properties return to their default values. そのため、ユーザーがポインター ボタンから離れると、ボタンに戻りますがマウス ポインターがボタンの上に移動する前にする方法。Therefore, when the user moves the pointer off the button, the button goes back to the way it was before the mouse pointer moved over the button. アニメーションの詳細については、次を参照してください。アニメーションの概要します。For more information about animations, see Animation Overview.

  5. ボタンがクリックされたときのアニメーションを追加します。 最後の手順では、ユーザーがボタンをクリックしたときにトリガーを追加します。Add an animation for when the button is clicked: The final step is to add a trigger for when the user clicks the button. 任意の場所内の次のマークアップを追加、ControlTemplate.Triggersブロック。Add the following markup anywhere inside of the ControlTemplate.Triggers block:

    <!-- Animation fires when button is clicked, causing glass to spin.  -->  
    <EventTrigger RoutedEvent="Button.Click">  
      <EventTrigger.Actions>  
        <BeginStoryboard>  
          <Storyboard>  
            <DoubleAnimation Storyboard.TargetName="glassCube"   
              Storyboard.TargetProperty=  
              "(Rectangle.RenderTransform).(TransformGroup.Children)[1].(RotateTransform.Angle)"   
              By="360" Duration="0:0:0.5" />  
          </Storyboard>  
        </BeginStoryboard>  
      </EventTrigger.Actions>  
    </EventTrigger>  
    

    F5 キーを押して、アプリケーションを実行し、ボタンをクリックします。Press F5 to run the application, and click one of the buttons. ボタンをクリックすると、ガラスの四角形が回転します。When you click a button, the glass rectangle spins around.

まとめSummary

このチュートリアルでは、次の演習を実行しました。In this walkthrough, you performed the following exercises:

  • 対象となる、Styleオブジェクトの種類を (Button)。Targeted a Style to an object type (Button).

  • アプリケーション全体を使用して、ボタンの基本プロパティを制御、Styleします。Controlled basic properties of the buttons in the entire application using the Style.

  • プロパティ値を使用するグラデーションなどのリソースを作成、 Style set アクセス操作子。Created resources like gradients to use for property values of the Style setters.

  • アプリケーション全体のボタンの外観をカスタマイズするには、ボタンにテンプレートを適用します。Customized the look of buttons in the entire application by applying a template to the buttons.

  • ユーザー操作に応じてボタンの動作をカスタマイズ (などMouseEnterMouseLeaveClick) アニメーション効果が含まれています。Customized behavior for the buttons in response to user actions (such as MouseEnter, MouseLeave, and Click) that included animation effects.

関連項目See also