方法 : ベベル視覚効果をアニメーション化する

更新 : 2007 年 11 月

この例では、ボタンの BevelBitmapEffect をアニメーション化する方法を示します。

使用例

次の例は、BevelBitmapEffect の BevelWidth プロパティと LightAngle プロパティをアニメーション化する方法を示しています。その結果、マウス ポインタが Button 上を移動すると、傾斜面の内部が高くなると同時に、傾斜面に使用される合成光源が Button を中心に回転します。

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >

  <StackPanel>

    <Button Width="200" Height="80" Margin="50">
      MouseOver ME!
      <Button.BitmapEffect>

        <!-- This BitmapEffect is targeted by the animation. -->
        <BevelBitmapEffect x:Name="myBevelBitmapEffect" BevelWidth="0" EdgeProfile="CurvedIn"  />
      </Button.BitmapEffect>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate the BevelWidth from 0 to 15. -->
              <DoubleAnimation
               Storyboard.TargetName="myBevelBitmapEffect"
               Storyboard.TargetProperty="BevelWidth"
               From="0" To="15" Duration="0:0:0.5" AutoReverse="True"
               />

              <!-- Animate the LightAngle so that the light source and 
                   corresponding bevel shadows move around the button. -->
              <DoubleAnimation
               Storyboard.TargetName="myBevelBitmapEffect"
               Storyboard.TargetProperty="LightAngle"
               From="360" To="0" Duration="0:0:0.5" AutoReverse="True"
               />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>

</Page>

サンプル全体については、「ビットマップ効果ギャラリーのサンプル」を参照してください。

参照

処理手順

方法 : ベベル視覚効果を作成する

方法 : 複数の視覚効果をアニメーション化する

ビットマップ効果ギャラリーのサンプル

概念

ビットマップ効果の概要

その他の技術情報

ビットマップ効果に関する「方法」トピック

ビットマップ効果のサンプル