다음을 통해 공유

연습: XAML을 사용하여 단추 만들기

  • 아티클

이 연습의 목표는 WPF(Windows Presentation Foundation) 애플리케이션에서 사용할 애니메이션 단추를 만드는 방법을 알아보는 것입니다. 이 연습에서는 스타일 및 템플릿을 사용하여 코드를 재사용하고 단추 선언에서 단추 논리를 분리할 수 있는 사용자 지정 단추 리소스를 만듭니다. 이 연습은 XAML(Extensible Application Markup Language)로만 작성되었습니다.

중요

이 연습에서는 XAML(Extensible Application Markup Language)을 입력하거나 복사하고 Visual Studio에 붙여넣어 애플리케이션을 만드는 단계를 안내합니다. 디자이너를 사용하여 동일한 애플리케이션을 만드는 방법을 알아보려면 Microsoft Expression Blend를 사용하여 단추 만들기를 참조하세요.

다음 그림은 완성된 단추를 보여줍니다.

XAML을 사용하여 만든 사용자 지정 단추

기본 단추 만들기

먼저 새 프로젝트를 만들고 창에 단추 몇 개를 추가해 보겠습니다.

새 WPF 프로젝트를 만들고 창에 단추를 추가하는 방법

  1. Visual Studio를 시작합니다.

  2. 새 WPF 프로젝트 만들기:파일 메뉴에서 새로 만들기를 가리킨 다음, 프로젝트를 클릭합니다. Windows 애플리케이션(WPF) 템플릿을 찾아서 프로젝트 이름을 "AnimatedButton"으로 지정합니다. 그러면 애플리케이션의 기본 구조가 생성됩니다.

  3. 기본 기본 단추 추가: 이 연습에 필요한 모든 파일은 템플릿에 제공됩니다. 솔루션 탐색기에서 Window1.xaml 파일을 두 번 클릭하여 엽니다. 기본적으로 Window1.xaml 파일에는 Grid 요소가 있습니다. 강조 표시된 다음 코드를 Window1.xaml 파일에 입력하거나 복사하고 붙여넣어 Grid 요소를 제거하고 XAML(Extensible Application Markup Language) 페이지에 단추 몇 개를 추가합니다.

    <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 키를 눌러 애플리케이션을 실행하면 다음 그림과 같은 단추가 보입니다.

    세 가지 기본 단추

    기본 단추를 만들었으므로 Window1.xaml 파일 작업은 끝났습니다. 연습의 나머지 부분에서는 app.xaml 파일에 중점을 두고 단추의 스타일 및 템플릿을 정의하겠습니다.

기본 속성 설정

다음으로, 단추 모양과 레이아웃을 제어하기 위해 이러한 단추에 대한 몇 가지 속성을 설정해 보겠습니다. 단추의 속성을 개별적으로 설정하는 대신 리소스를 사용하여 전체 애플리케이션의 단추 속성을 정의하겠습니다. 애플리케이션 리소스는 개념적으로 웹 페이지의 외부 CSS(CSS 스타일시트)와 비슷합니다. 그러나 이 연습의 끝부분에서 볼 수 있듯이 리소스는 CSS(CSS 스타일시트)보다 훨씬 강력합니다. 리소스에 대한 자세한 내용은 XAML 리소스를 참조하세요.

스타일을 사용하여 단추의 기본 속성을 설정하는 방법

  1. 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>
    <!-- Resources for the entire application can be defined here. -->
  </Application.Resources>
</Application>

    리소스 범위는 리소스를 정의하는 위치에 따라 결정됩니다. app.xaml 파일에서 Application.Resources 리소스를 정의하면 애플리케이션의 어디에서나 리소스를 사용할 수 있습니다. 리소스 범위를 정의하는 방법에 대한 자세한 내용은 XAML 리소스를 참조하세요.

  2. 스타일을 만들고 기본 속성 값 정의: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 키를 눌러 애플리케이션을 실행하면 다음 창이 표시됩니다.

    너비가 90이고 여백이 10인 단추

    대상으로 지정되는 개체를 미세 조정하고, 복잡한 속성 값을 지정하고, 다른 스타일에 대한 입력으로 스타일을 사용하는 등 다양한 방법으로 스타일을 사용할 수 있습니다. 자세한 내용은 스타일 지정 및 템플릿을 참조하세요.

  3. 스타일 속성 값을 리소스로 설정: 리소스를 사용하면 일반적으로 정의된 개체 및 값을 간단하게 재사용할 수 있습니다. 특히 리소스를 사용하여 복잡한 값을 정의하고 코드를 모듈화할 때 유용합니다. 강조 표시된 다음 태그를 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 속성에 대한 단추 스타일 setter 내부를 포함하여 애플리케이션의 어디에서나 속성 값으로 사용할 수 있습니다. 이제 모든 단추에 이 그라데이션의 Background 속성 값이 있습니다.

    F5 키를 눌러 애플리케이션을 실행합니다. 다음과 같이 표시됩니다.

    그라데이션 배경이 있는 단추

단추 모양을 정의하는 템플릿 만들기

이 섹션에서는 단추 모양(프레젠테이션)을 사용자 지정하는 템플릿을 만듭니다. 단추 프레젠테이션은 직사각형과 단추에 고유한 모양을 제공하는 기타 구성 요소를 비롯한 여러 개체로 구성됩니다.

지금까지 애플리케이션에서 단추가 표시되는 방식을 제어하는 범위는 단추의 속성 변경으로 제한되었습니다. 단추 모양을 보다 과격하게 변경하려면 어떻게 해야 할까요? 템플릿을 사용하면 개체의 프레젠테이션을 강력하게 제어할 수 있습니다. 템플릿은 스타일 내에서 사용할 수 있으므로 스타일이 적용되는 모든 개체에 템플릿을 적용할 수 있습니다(이 연습에서는 단추).

템플릿을 사용하여 단추 모양을 정의하는 방법

  1. 템플릿 설정:Button 같은 컨트롤에는 Template 속성이 있으므로 Style에서 Setter를 사용하여 설정한 다른 속성 값과 마찬가지로 템플릿 속성 값을 정의할 수 있습니다. 강조 표시된 다음 태그를 단추 스타일에 추가합니다.

    <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 요소 2개를 지정한 후 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 키를 눌러 애플리케이션을 실행합니다. 다음과 같이 표시됩니다.

    단추가 3개인 창

  3. 템플릿에 glasseffect 추가: 다음으로 유리를 추가합니다. 유리 그라데이션 효과를 만드는 리소스부터 만듭니다. 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>

    "glassCube" 속성이 x:Name인 사각형의 Opacity가 0이므로 샘플을 실행할 때 위에 겹친 유리 사각형이 표시되지 않습니다. 나중에 사용자가 단추와 상호 작용할 때 템플릿에 트리거를 추가할 예정이기 때문입니다. 그러나 Opacity 값을 1로 변경하고 애플리케이션을 실행하여 단추 모양을 확인할 수 있습니다. 다음 그림을 참조하세요. 다음 단계를 진행하기 전에 Opacity를 다시 0으로 변경합니다.

    XAML을 사용하여 만든 사용자 지정 단추

단추 대화형 작업 만들기

이 섹션에서는 단추 위로 마우스 포인터를 이동하고 클릭하는 등의 사용자 작업에 대한 응답으로 속성 값을 변경하고 애니메이션을 실행하는 속성 트리거 및 이벤트 트리거를 만들겠습니다.

대화형 작업(위로 마우스 이동, 마우스 벗어나기, 클릭 등)을 추가하는 쉬운 방법은 템플릿 또는 스타일 내에서 트리거를 정의하는 것입니다. Trigger를 만들려면 속성 "조건"을 정의합니다(예: 단추 IsMouseOver 속성 값이 true와 같음). 그런 다음, 트리거 조건이 true일 때 발생하는 setter(작업)를 정의합니다.

단추 대화형 작업을 만드는 방법

  1. 템플릿 트리거 추가: 강조 표시된 태그를 템플릿에 추가합니다.

    <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 블록에 추가합니다.

    <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 키를 눌러 애플리케이션을 실행하고 마우스 포인터를 단추 위로 이동할 때 적용되는 효과를 확인합니다.

  3. 포커스 트리거 추가: 다음으로, 단추에 포커스가 있는 케이스(예: 사용자가 단추를 클릭한 후)를 처리하기 위해 몇 가지 유사한 setter를 추가하겠습니다.

    <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 키를 눌러 애플리케이션을 실행하고 단추 중 하나를 클릭합니다. 단추에 포커스가 계속 있으므로 단추를 클릭한 후에도 단추가 강조 표시된 상태로 유지됩니다. 다른 단추를 클릭하면 마지막 단추의 포커스가 사라지고 새 단추가 포커스를 얻습니다.

  4. MouseEnter및MouseLeave에 대한 애니메이션 추가: 다음으로, 트리거에 몇 가지 애니메이션을 추가합니다. ControlTemplate.Triggers 블록 내의 아무 곳에 다음 태그를 추가합니다.

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

    마우스 포인터가 단추 위로 이동하면 유리 사각형이 축소되고 포인터가 떠날 때 다시 정상 크기로 돌아갑니다.

    포인터가 단추 위로 이동할 때 트리거되는 두 가지 애니메이션이 있습니다(MouseEnter 이벤트가 발생). 이러한 애니메이션은 X 및 Y 축을 따라 유리 사각형을 축소합니다. DoubleAnimation 요소에 대한 Duration 및 By 속성을 확인하세요. Duration은 애니메이션이 0.5초 넘게 지속되도록 지정하고, By는 유리가 10% 축소되도록 지정합니다.

    두 번째 이벤트 트리거(MouseLeave)는 단순히 첫 번째 이벤트 트리거를 중지합니다. Storyboard를 중지하면 모든 애니메이션 속성이 기본값으로 돌아갑니다. 따라서 사용자가 포인터를 단추 밖으로 이동하면 단추는 마우스 포인터가 단추 위로 이동하기 전의 방식으로 돌아갑니다. 애니메이션에 대한 자세한 내용은 애니메이션 개요를 참조하세요.

  5. 단추를 클릭할 때 발생하는 애니메이션 추가: 마지막 단계는 사용자가 단추를 클릭할 때 발생하는 트리거를 추가하는 것입니다. 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 setter의 속성 값에 사용할 그라데이션과 같은 리소스를 만들었습니다.

  • 단추에 템플릿을 적용하여 애플리케이션 전체의 단추 모양을 사용자 지정했습니다.

  • 애니메이션 효과를 포함하여 사용자 작업(예: MouseEnter, MouseLeave 및 Click)에 대한 단추의 응답 동작을 사용자 지정했습니다.

참고 항목