Comment animer l'Opacité d'un DropShadowEffect?

J'ai un projet WPF avec une bordure en utilisant le style suivant. Le plan est d'obtenir l'effet d'éclat à s'estomper lorsque la souris passe au dessus de la frontière, et fondu lorsqu'il laisse.

<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>

Le problème est, il ne se passe rien! L'animation fonctionne si je change le "DropShadowEffect" à "UIElement" dans la table de montage séquentiel TargetProperty, mais elle perd le contrôle entier.

Comment puis-je l'estompe juste le DropShadowEffect?

OriginalL'auteur Zodman | 2009-09-15

7

Un couple de points sont à noter

1), Vous devez être ciblage d'une propriété réelle de la Frontière - Vous sont en effet en essayant de cibler la valeur (DropShadowEffect) de la propriété de l'Effet, et non le bien lui-même.

2) Vous avez besoin de trier la syntaxe de la PropertyPath.

Changer votre Storyboard.La propriété Target de ce qui suit et vous devriez être bien:
```
Storyboard.TargetProperty="(Effect).Opacity"
```
MODIFIER code de Travail comme indiqué dans le commentaire:
```
<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="BorderThickness" Value="1" />

<Setter Property="RenderTransformOrigin" Value="0.5,0.5" />

<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>
```
J'obtiens une exception InvalidOperationException parce que l'Effet n'a pas de propriété d'Opacité. La valeur de l'Effet est DropShadowEffect qui a la propriété d'Opacité, je suis en train de cible, mais comme vous le soulignez mon XAML est faux. J'ai essayé la configuration de x:Nom sur la DropShadowEffect mais vous ne pouvez pas utiliser TargetName dans les Styles. Il y a un trou dans la documentation MSDN sur l'utilisation de ces supports dans les storyboards, mais je le suivi qu'il est dans l'aide pour PropertyPath. Cependant je n'arrive toujours pas à résoudre le problème. Je pense que j'ai besoin de jeter Effet de DropShadowEffect mais cela ne semble pas possible dans le code XAML. D'autres idées?
J'ai réussi à obtenir le code que vous avez posté de travail à l'aide de la syntaxe que j'ai fourni, je l'ai fait en une mise à nu de l'échantillon de l'app. Je vais poster ce que j'ai utilisé, et vous pouvez peut-être partir...
Remarque, j'ai enlevé les opérateurs qui utilisent les ressources statiques que vous n'avez pas fourni, mais qui ne va pas pour effet de démonstration. Et je remarque que vous êtes en essayant de mettre en TextBlock.De premier plan de la propriété au sein de votre style de qui permettra aussi de ne pas travailler.
....et j'ai augmenté l'ombre portée de la profondeur à exagérer l'effet...
Correction: Vous avez eu raison, après tout. J'ai utilisé le Mélange pour générer la table de montage séquentiel XAML pour moi“.(DropShadowEffect.L'opacité)”. J'ai toujours eu des problèmes. Pour couper une longue histoire courte, j'avais déplacé le setter de l'Effet à seuil de Déclenchement à un certain point, qui a été la cause de l'exception InvalidOperationException (comme l'effet n'était pas là quand la souris quitte la frontière). Le déplacement de ce poseur de retour dans le Style (comme je l'avais dit dans le post original) et tout a bien fonctionné. J'ai ensuite changé la table de montage séquentiel “(Effet).L'opacité”, comme vous l'avez suggéré, et cela a fonctionné. Tas merci Simon!

OriginalL'auteur Simon Fox

Vous devez vous connecter pour publier un commentaire.