Как анимировать непрозрачность DropShadowEffect? - PullRequest
Новая
       40

Как анимировать непрозрачность DropShadowEffect?

6 голосов
/ 15 сентября 2009

У меня есть проект WPF с рамкой в ​​следующем стиле. План состоит в том, чтобы заставить эффект свечения исчезать, когда мышь перемещается за границу, и исчезать, когда он уходит. 

<Style x:Key="BorderGlow" TargetType="Border">
    <Style.Resources>
        <Storyboard x:Key="GlowOn">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(DropShadowEffect.Opacity)">
                <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="GlowOff">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetProperty="(DropShadowEffect.Opacity)">
                <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </Style.Resources>

    <Setter Property="CornerRadius" Value="6,1,6,1" />
    <Setter Property="BorderBrush" Value="{StaticResource SelectedBorder}" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Background" Value="{StaticResource DeselectedBackground}" />
    <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
    <Setter Property="TextBlock.Foreground" Value="{StaticResource SelectedForeground}" />

    <Setter Property="RenderTransform">
        <Setter.Value>
            <RotateTransform Angle="90"/>
        </Setter.Value>
    </Setter>

    <Setter Property="Effect">
        <Setter.Value>
            <DropShadowEffect ShadowDepth="0" BlurRadius="8" Color="#FFB0E9EF"/>
        </Setter.Value>
    </Setter>

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">

            <Trigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource GlowOn}"/>
            </Trigger.EnterActions>

            <Trigger.ExitActions>
                <BeginStoryboard Storyboard="{StaticResource GlowOff}"/>
            </Trigger.ExitActions>

        </Trigger>
    </Style.Triggers>
</Style>

Проблема в том, что ничего не происходит! Анимация работает, если я изменяю «DropShadowEffect» на «UIElement» в Storyboard TargetProperty, но при этом исчезает весь элемент управления.

Как мне исчезнуть только DropShadowEffect? ​​

1 Ответ

7 голосов
/ 15 сентября 2009

Несколько замечаний

1) Вы должны быть нацелены на фактическое свойство Border - вы фактически пытаетесь нацелить значение (DropShadowEffect) свойства Effect, а не само свойство.

2) Вам необходимо отсортировать синтаксис PropertyPath .

Измените свойство Storyboard.Target на следующее, и все будет в порядке: 

Storyboard.TargetProperty="(Effect).Opacity"

РЕДАКТИРОВАТЬ Рабочий код, как отмечено в комментарии: 

<Border BorderThickness="10" Height="100" Width="100">
    <Border.BorderBrush>
        <SolidColorBrush Color="Red"></SolidColorBrush>
    </Border.BorderBrush>
    <Border.Style>
        <Style TargetType="Border">
            <Style.Resources>
                <Storyboard x:Key="GlowOn">
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                          Storyboard.TargetProperty="(Effect).Opacity">
                        <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="1"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
                <Storyboard x:Key="GlowOff">
                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                          Storyboard.TargetProperty="(Effect).Opacity">
                        <SplineDoubleKeyFrame KeyTime="0:0:0.3" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </Style.Resources>

            <Setter Property="CornerRadius" Value="6,1,6,1" />
        <!--<Setter Property="BorderBrush"
                    Value="{StaticResource SelectedBorder}" />-->
            <Setter Property="BorderThickness" Value="1" />
        <!--<Setter Property="Background"
                    Value="{StaticResource DeselectedBackground}" />-->
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
        <!--<Setter Property="TextBlock.Foreground"
                    Value="{StaticResource SelectedForeground}" />-->

            <Setter Property="RenderTransform">
                <Setter.Value>
                    <RotateTransform Angle="90"/>
                </Setter.Value>
            </Setter>

            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect ShadowDepth="20"
                                      BlurRadius="8"
                                      Color="#FFB0E9EF"/>
                </Setter.Value>
            </Setter>

            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">

                    <Trigger.EnterActions>
                        <BeginStoryboard
                              Storyboard="{StaticResource GlowOn}"/>
                    </Trigger.EnterActions>

                    <Trigger.ExitActions>
                        <BeginStoryboard
                              Storyboard="{StaticResource GlowOff}"/>
                    </Trigger.ExitActions>

                </Trigger>
            </Style.Triggers>

        </Style>
    </Border.Style>
</Border>
...