방법: ControlTemplate에 애니메이션 효과 적용

업데이트: 2007년 11월

이 예제에서는 Storyboard, EventTrigger 및 Trigger 개체를 사용하여 ControlTemplate 내에서 애니메이션 효과를 적용하는 방법을 보여 줍니다.

예제

<!-- ControlStoryboardExample.xaml
     Uses storyboards to animate properties with a ControlTemplate. -->
<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Animate Properties with Storyboards">

  <Page.Resources>
    <ControlTemplate x:Key="MyControlTemplate" 
      TargetType="{x:Type ContentControl}">
      <Border 
        Margin="{TemplateBinding Padding}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        Background="{TemplateBinding Background}">
        <Border Name="innerBorder" Padding="10">
          <Border.Background>
            <SolidColorBrush x:Name="innerBorderBackgroundBrush"
              Color="White" />
          </Border.Background>
          <Grid Name="contentPanel">
            <Grid.Background>
              <SolidColorBrush x:Name="contentPanelBrush" Color="White" />
            </Grid.Background>
            <ContentPresenter 
              Margin="10" 
              Content="{TemplateBinding  Content}" 
              TextBlock.Foreground="{TemplateBinding Foreground}" />
          </Grid>
        </Border>
      </Border>
      <ControlTemplate.Triggers>

        <!-- Event Trigger Example -->
        <EventTrigger RoutedEvent="Border.MouseEnter" SourceName="innerBorder">
          <BeginStoryboard>
            <Storyboard>
              <ColorAnimation
                Storyboard.TargetName="innerBorderBackgroundBrush"
                Storyboard.TargetProperty="Color"
                From="White" To="#CCCCFF"
                Duration="0:0:3" AutoReverse="True" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>

        <!-- Property Trigger Example -->
        <Trigger Property="IsMouseOver" Value="True" SourceName="contentPanel">
          <Trigger.EnterActions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation 
                  Storyboard.TargetName="contentPanelBrush" 
                  Storyboard.TargetProperty="Color"
                  To="Purple" Duration="0:0:1" />
              </Storyboard>
            </BeginStoryboard>
          </Trigger.EnterActions>
          <Trigger.ExitActions>
            <BeginStoryboard>
              <Storyboard>
                <ColorAnimation 
                  Storyboard.TargetName="contentPanelBrush" 
                  Storyboard.TargetProperty="Color"
                  To="White" Duration="0:0:1" />
              </Storyboard>
            </BeginStoryboard>
          </Trigger.ExitActions>
        </Trigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>

  </Page.Resources>

  <Border Background="White">
    <StackPanel Margin="30" HorizontalAlignment="Left" MinWidth="500">

      <ContentControl Template="{StaticResource MyControlTemplate}"
        Content="Hello, World" />

    </StackPanel>
  </Border>
</Page>

전체 샘플을 보려면 속성 애니메이션 샘플을 참조하십시오. Storyboard를 사용하여 속성에 애니메이션 효과를 적용하는 방법에 대한 자세한 내용은 Storyboard 개요를 참조하십시오.

참고 항목

참조

ControlTemplate