方法 : BitmapEffectGroup 内の効果をアニメーション化する

更新 : 2007 年 11 月

次の例では、BitmapEffectGroup 内の BitmapEffect をアニメーション化する方法を示します。

使用例

DropShadowBitmapEffect の Color プロパティをアニメーション化するために使用する TargetProperty パスの 2 つの例を次に示します。MouseEnter および MouseLeave のイベント トリガでそれぞれ異なるパスを使用して、BitmapEffectGroup 内の BitmapEffect への 2 とおりのアクセス方法を示します。

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
  <Page.Resources>
    <Style TargetType="{x:Type Button}" x:Key="MyButtonStyle">
      <Setter Property="Button.BitmapEffect">
        <Setter.Value>
          <BitmapEffectGroup>
            <DropShadowBitmapEffect x:Name="myDropShadowBitMapEffect" Color="Black" ShadowDepth="3" />
            <OuterGlowBitmapEffect GlowColor="Gray"/>
            <!--  BitmapEffect -->
          </BitmapEffectGroup>
        </Setter.Value>
      </Setter>
      <Style.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard >
              <Storyboard>
                <ColorAnimation Storyboard.TargetProperty="(Button.BitmapEffect).(BitmapEffectGroup.Children)[0].(DropShadowBitmapEffect.Color)" From="Gray" To="Red" Duration="0:0:0.5" AutoReverse="False" />
                <!-- <ColorAnimation Storyboard.TargetProperty="BitmapEffect.Children[0].Color" From="Gray" To="Red" Duration="0:0:0.5" AutoReverse="False" /> -->
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Button.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard >
              <Storyboard>
                <!-- <ColorAnimation Storyboard.TargetProperty="(Button.BitmapEffect).(BitmapEffectGroup.Children)[0].(DropShadowBitmapEffect.Color)" From="Gray" To="Red" Duration="0:0:0.5" AutoReverse="False" /> -->
                <ColorAnimation Storyboard.TargetProperty="BitmapEffect.Children[0].Color" From="Red" To="Gray" Duration="0:0:0.5" AutoReverse="False" />
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </Style.Triggers>
    </Style>
  </Page.Resources>
  <StackPanel Margin="20">
    <Button Style="{StaticResource MyButtonStyle}">Click Me</Button>
  </StackPanel>
</Page>

参照

参照

BitmapEffect

BitmapEffectGroup