方法 : 要素またはブラシの不透明度をアニメーション化する

更新 : 2007 年 11 月

フレームワーク要素のフェード インおよびフェード アウトは、その要素の Opacity プロパティをアニメーション化するか、その要素の描画に使用される Brush (ブラシ) の Opacity プロパティをアニメーション化することで作成できます。要素の不透明度をアニメーション化すると、その要素と子要素のフェード インおよびフェード アウトを作成できます。また、要素の描画に使用されるブラシをアニメーション化することで、要素のどの部分をフェード インまたはフェード アウトするかを選択することもできます。たとえば、ボタンの背景を描画するブラシの不透明度をアニメーション化できます。これにより、ボタンの背景だけをフェード インおよびフェード アウトさせ、テキストの部分はそのまま残すことができます。

メモ :
Brush の Opacity をアニメーション化した方が、要素の Opacity プロパティをアニメーション化するよりも、パフォーマンス上の利点があります。

次の例では、2 つのボタンをアニメーション化してフェード インおよびフェード アウトします。最初の Button の Opacity は、Duration で指定した 5 秒間をかけて 1.0 から 0.0 にアニメーション化されます。2 番目のボタンもアニメーション化されますが、ボタン全体の不透明度ではなく、Background の描画に使用される SolidColorBrush の Opacity がアニメーション化されます。この例を実行すると、最初のボタンは全体がフェード インおよびフェード アウトするのに対し、2 番目のボタンは背景だけがフェード インおよびフェード アウトします。テキストと境界線は、完全に不透明のまま残ります。

使用例

<!-- OpacityAnimationExample.xaml
     This example shows how to animate the opacity of objects, 
     making them fade in and out of view. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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 の透明度をアニメーション化する方法も示します。サンプル全体については、「要素の不透明度のアニメーション化のサンプル」を参照してください。