チュートリアル: XAML を使用したボタンの作成

[アーティクル]
05/04/2023

このチュートリアルの目的は、Windows Presentation Foundation (WPF) アプリケーションで使用するためのアニメーション化されたボタンを作成する方法を学習することです。このチュートリアルでは、スタイルとテンプレートを使用して、コードの再利用と、ボタン宣言からのボタンロジックの分離を可能にする、カスタマイズされたボタンリソースを作成します。このチュートリアルは全体が Extensible Application Markup Language (XAML) で記述されています。

重要

このチュートリアルでは、Visual Studio に Extensible Application Markup Language (XAML) を入力するか、コピーして貼り付けることによって、アプリケーションを作成する手順について説明します。デザイナーを使用して同じアプリケーションを作成する方法については、Microsoft Expression Blend を使用してボタンを作成する方法に関する記事を参照してください。

完成したボタンを次の図に示します。

基本的なボタンを作成する

まず、新しいプロジェクトを作成し、いくつかのボタンをウィンドウに追加します。

新しい WPF プロジェクトを作成し、ウィンドウにボタンを追加するには

Visual Studio を起動します。
新しい WPF プロジェクトを作成する:[ファイル] メニューの [新規作成] をポイントし、 [プロジェクト] をクリックします。 Windows アプリケーション (WPF) テンプレートを探し、プロジェクトの名前を "AnimatedButton" に設定します。これにより、アプリケーションのスケルトンが作成されます。
基本的な既定のボタンを追加する: このチュートリアルで必要なすべてのファイルは、テンプレートによって提供されます。ソリューションエクスプローラーで Window1.xaml ファイルをダブルクリックして開きます。 Window1.xaml には Grid 要素が既定で存在します。 Grid 要素を削除し、次の強調表示されているコードを Window1.xaml に入力するか、コピーして貼り付けて、Extensible Application Markup Language (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">
  
  <StackPanel HorizontalAlignment="Left">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
  </StackPanel>
</Window>
```
F5 キーを押してアプリケーションを実行します。次の図のような一連のボタンが表示されます。

これで基本的なボタンが作成されたので、Window1.xaml ファイルでの作業は終了です。このチュートリアルの残りの部分では、ボタンのスタイルとテンプレートを定義する app.xaml ファイルに注目します。

基本プロパティを設定する

次に、ボタンの外観とレイアウトを制御するため、これらのボタンにいくつかのプロパティを設定してみましょう。個々のボタンにプロパティを設定するのではなく、リソースを使用して、アプリケーション全体に対してボタンのプロパティを定義します。アプリケーションリソースは、概念的には Web ページの外部カスケードスタイルシート (CSS) に似ています。ただし、このチュートリアルの最後にはわかるように、リソースの方がカスケードスタイルシート (CSS) よりはるかに強力です。リソースの詳細については、XAML のリソースに関する記事を参照してください。

スタイルを使用してボタンの基本プロパティを設定するには

Application.Resources ブロックを定義する: app.xaml を開き、次の強調表示されているマークアップを追加します (まだ存在していない場合)。
```
<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>
    
  </Application.Resources>
</Application>
```
リソースのスコープは、リソースを定義する場所によって決まります。 app.xaml ファイルの Application.Resources でリソースを定義すると、アプリケーションのどこでもリソースを使用できるようになります。リソースのスコープを定義する方法の詳細については、XAML のリソースに関する記事を参照してください。
スタイルを作成し、それを使用して基本的なプロパティ値を定義する: 次のマークアップを Application.Resources ブロックに追加します。このマークアップで作成される Style はアプリケーションのすべてのボタンに適用され、ボタンの Width が 90 に、Margin が 10 に設定されます。
```
<Application.Resources>
  <Style TargetType="Button">
    <Setter Property="Width" Value="90" />
    <Setter Property="Margin" Value="10" />
  </Style>
</Application.Resources>
```
TargetType プロパティでは、スタイルが Button 型のすべてのオブジェクトに適用されることが指定されます。各 Setter では、Style に対して異なるプロパティ値が設定されます。そのため、この時点では、アプリケーションのすべてのボタンは幅が 90、余白が 10 になっています。 F5 キーを押してアプリケーションを実行すると、次のようなウィンドウが表示されます。

スタイルを使用すると、さまざまな方法による対象オブジェクトの微調整、複雑なプロパティ値の指定、他のスタイルに対する入力としてのスタイルの使用など、多くのことを行うことができます。詳しくは、「スタイルとテンプレート」をご覧ください。
リソースにスタイルのプロパティ値を設定する: リソースを使用すると、一般的に定義されているオブジェクトと値を簡単に再利用できます。特に、リソースを使用して複雑な値を定義し、コードのモジュール性を高めるのに便利です。次の強調表示されているマークアップを 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" という名前のリソースを作成してあります。このリソースでは、水平方向のグラデーションが定義されています。このリソースは、Background プロパティに対するボタンスタイルセッターの内部など、アプリケーションの任意の場所からプロパティ値として使用できます。これで、すべてのボタンにこのグラデーションの Background プロパティ値が設定されました。

F5 キーを押してアプリケーションを実行します。次のような表示になります。

ボタンの外観を定義するテンプレートを作成する

このセクションでは、ボタンの外観 (プレゼンテーション) をカスタマイズするテンプレートを作成します。ボタンのプレゼンテーションは、四角形などの複数のオブジェクトと、ボタンに固有の外観を提供するその他のコンポーネントで構成されています。

これまでのところ、アプリケーションでのボタンの外観の制御は、ボタンのプロパティの変更に限定されています。ボタンの外観をさらに大きく変更するには、どうすればよいでしょうか。テンプレートを使用すると、オブジェクトのプレゼンテーションを強力に制御できます。テンプレートはスタイル内で使用できるため、スタイルが適用されるすべてのオブジェクト (このチュートリアルではボタン) に、テンプレートを適用できます。

テンプレートを使用してボタンの外観を定義するには

テンプレートを設定する:Button のようなコントロールには Template プロパティがあるため、Setter を使用して 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 つの Rectangle 要素と、その後で DockPanel が指定されています。 DockPanel は、ボタンの ContentPresenter をホストするために使用されます。 ContentPresenter では、ボタンの内容が表示されます。このチュートリアルでは、内容はテキスト ("Button 1"、"Button 2"、"Button 3") です。すべてのテンプレートコンポーネント (四角形と DockPanel) は、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 キーを押してアプリケーションを実行します。次のような表示になります。

テンプレートにガラス効果を追加する: 次に、ガラスを追加します。まず、ガラスのグラデーション効果を作成するいくつかのリソースを作成します。これらのグラデーションリソースを、Application.Resources ブロック内の任意の場所に追加します。

<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. -->

これらのリソースは、ボタンテンプレートの Grid に挿入する四角形の Fill として使用されます。次の強調表示されているマークアップをテンプレートに追加します。

<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>

x:Name プロパティが "glassCube" である四角形の Opacity が 0 であることに注意してください。そのため、サンプルを実行すると、ガラスの四角形が上に重なって表示されません。これは、ユーザーがボタンを操作したときのためのトリガーを、後でテンプレートに追加するためです。ただし、Opacity の値を 1 に変更してアプリケーションを実行すると、ボタンがどのように表示されるかを確認できます。次の図を参照してください。次のステップに進む前に、Opacity を 0 に戻しておきます。

ボタンの操作機能を作成する

このセクションでは、ボタン上のマウスポインターの移動やクリックなどのユーザーの操作に応じて、プロパティ値を変更してアニメーションを実行するための、プロパティトリガーとイベントトリガーを作成します。

操作機能 (内部へのマウスの移動、外部へのマウスの移動、クリックなど) を追加する簡単な方法は、テンプレートまたはスタイル内でトリガーを定義することです。 Trigger を作成するには、次のようなプロパティの "条件" を定義します: ボタンの IsMouseOver プロパティの値が true と等しい。次に、トリガー条件が true のときに実行されるセッター (アクション) を定義します。

ボタンの操作機能を作成するには

テンプレートトリガーを追加する: 強調表示されたマークアップをテンプレートに追加します。

<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>

プロパティトリガーを追加する: 強調表示されたマークアップを ControlTemplate.Triggers ブロックに追加します。

<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 キーを押してアプリケーションを実行し、ボタンの上にマウスポインターを置いたときの効果を確認します。

フォーカストリガーを追加する: 次に、ボタンにフォーカスが設定された場合 (ユーザーがクリックした後など) に対処する、同様のセッターを追加します。

<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 キーを押してアプリケーションを実行し、ボタンのいずれかをクリックします。クリックした後もフォーカスがまだ設定されているため、ボタンが強調表示されたままになることに注意してください。別のボタンをクリックすると、新しいボタンがフォーカスを取得し、前のボタンは失います。

アニメーションの追加対象 MouseEnter および MouseLeave : 次にトリガーに対していくつかのアニメーションを追加します。 ControlTemplate.Triggers ブロック内の任意の場所に、次のマークアップを追加します。
```

<EventTrigger RoutedEvent="Mouse.MouseEnter">
  <EventTrigger.Actions>
    <BeginStoryboard Name="mouseEnterBeginStoryboard">
      <Storyboard>
      
        <DoubleAnimation Storyboard.TargetName="glassCube"
          Storyboard.TargetProperty=
          "(Rectangle.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
          By="-0.1" Duration="0:0:0.5" />
        
        <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>
    
    <StopStoryboard BeginStoryboardName="mouseEnterBeginStoryboard" />
  </EventTrigger.Actions>
</EventTrigger>
```
マウスポインターがボタンの上に移動するとガラスの四角形を小さくし、ポインターが離れると通常のサイズに戻します。

ポインターがボタンの上に移動するとトリガーされるアニメーションが 2 つあります (MouseEnter イベントが発生します)。これらのアニメーションでは、X 軸と Y 軸に沿ってガラスの四角形を縮小します。 DoubleAnimation 要素のプロパティ (Duration と By) に注意してください。 Duration ではアニメーションを 0.5 秒間実行することが指定されていて、By ではガラスを 10% 縮小することが指定されています。

2 つ目のイベントトリガー (MouseLeave) では、最初のトリガーが単に停止されます。 Storyboard を停止すると、アニメーション化されたすべてのプロパティが既定値に戻ります。このため、ユーザーがポインターをボタンの外に移動すると、ボタンはマウスポインターがボタンの上に移動する前の状態に戻ります。アニメーションの詳細については、「アニメーションの概要」を参照してください。

ボタンがクリックされたときのアニメーションを追加する: 最後のステップでは、ユーザーがボタンをクリックしたときのトリガーを追加します。 ControlTemplate.Triggers ブロック内の任意の場所に、次のマークアップを追加します。

<!-- 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 キーを押してアプリケーションを実行し、ボタンのいずれかをクリックします。ボタンをクリックすると、ガラスの四角形が回転します。

まとめ

このチュートリアルでは、次の演習を行いました。

Style の対象をオブジェクトの種類 (Button) に設定しました。
Style を使用して、アプリケーション全体でボタンの基本プロパティを制御しました。
Style のセッターのプロパティ値に使用する、グラデーションなどのリソースを作成しました。
ボタンにテンプレートを適用することにより、アプリケーション全体でボタンの外観をカスタマイズしました。
アニメーション効果など、ユーザーの操作 (MouseEnter、MouseLeave、Click など) に応じてボタンの動作をカスタマイズしました。

次の方法で共有