방법: 요소 또는 브러시의 불투명도에 애니메이션 효과 적용

프레임워크 요소가 페이드 인/아웃되게 하려면, 관련 Opacity 속성에 애니메이션 효과를 주거나 그리는 데 사용한 Brush의 Opacity 속성(또는 브러시)에 애니메이션 효과를 주면 됩니다. 요소의 불투명도에 애니메이션 효과를 주면 요소와 관련 자식이 보기에서 페이드 인/아웃되지만, 요소를 그리는 데 사용하는 브러시에 애니메이션 효과를 주면 요소에서 페이드되는 부분을 더 자세히 선택할 수 있습니다. 예를 들어 단추의 배경을 그리는 데 사용하는 브러시의 불투명도에 애니메이션 효과를 줄 수 있습니다. 이렇게 하면 단추의 배경이 보기에서 페이드 인/아웃되지만 텍스트는 계속 완전히 불투명해집니다.

참고

Brush의 Opacity에 애니메이션 효과를 주면 요소의 Opacity 속성에 애니메이션 효과를 줄 때보다 성능이 개선됩니다.

다음 예제에서는 단추 2개에 애니메이션 효과를 적용하여 보기에서 페이드 인/아웃되게 합니다. 첫 번째 Button의 불투명도는 5초 이상의 Duration에 1.0에서 0.0으로 애니메이션 효과가 적용됩니다. 두 번째 단추에도 애니메이션 효과가 적용되지만, 관련 Background를 칠하는 데 사용한 SolidColorBrush의 불투명도는 전체 단추의 불투명도가 되지 않고 애니메이션 효과가 적용됩니다. 예제를 실행하면 첫 번째 단추는 보기에서 완전히 페이드 인/아웃되지만, 두 번째 단추는 배경만 페이드 인/아웃됩니다. 관련 텍스트와 테두리는 완전히 불투명한 상태를 유지합니다.

예제

<!-- OpacityAnimationExample.xaml
     This example shows how to animate the opacity of objects, 
     making them fade in and out of view. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Opacity Animation Example" Background="White">
  <StackPanel Margin="20">

    <!-- Clicking this button animates its opacity. -->
    <Button Name="opacityAnimatedButton">
      A Button
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="opacityAnimatedButton"
                Storyboard.TargetProperty="(Button.Opacity)" 
                From="1" To="0" Duration="0:0:5" AutoReverse="True"  /> 
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

    <!-- Clicking this button animates the opacity of the brush
         used to paint its background. -->
    <Button>
      A Button
      <Button.Background>
        <SolidColorBrush x:Name="MyAnimatedBrush" Color="Orange" />
      </Button.Background>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="MyAnimatedBrush"
                Storyboard.TargetProperty="(Brush.Opacity)" 
                From="1" To="0" Duration="0:0:5" AutoReverse="True"  />  
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>         
    </Button>
  </StackPanel>
</Page>

이 예제에서는 코드를 생략합니다. 전체 샘플은 LinearGradientBrush 안에 있는 Color의 불투명도에 애니메이션을 적용하는 방법도 보여줍니다. 전체 샘플을 확인하고 싶다면 요소 샘플의 불투명도에 애니메이션 효과 적용을 참조하세요.