2009-09-15 8 views
5

Ich habe ein WPF-Projekt mit einem Rahmen im folgenden Stil. Der Plan ist, dass der Glow-Effekt eingeblendet wird, wenn sich die Maus über die Grenze bewegt und beim Verlassen ausblendet.Wie wird die Opazität eines DropShadowEffect animiert?

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

Das Problem ist, passiert nichts! Die Animation funktioniert, wenn ich in Storyboard TargetProperty den "DropShadowEffect" in "UIElement" ändere, aber das gesamte Steuerelement verblasst.

Wie verblasse ich nur den DropShadowEffect?

Antwort

6

Ein paar Punkte

1) Sie müssen zu beachten, eine tatsächliche Eigenschaft Border werden Targeting - Sie sind in der Tat versuchen, den Wert (DropShadowEffect) des Effekts Eigenschaft zum Ziel, nicht die Immobilie selbst.

2) Sie müssen die Syntax des PropertyPath sortieren.

Ihre Storyboard.Target Eigenschaft auf der folgenden ändern und Sie sollten in Ordnung sein:

Storyboard.TargetProperty="(Effect).Opacity" 

EDIT Code Arbeiten wie in Kommentar bemerkt:

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

ich eine InvalidOperationException, weil Effect ‚doesn t haben eine Opazität Eigenschaft. Der Wert von Effect ist DropShadowEffect mit der Opacity-Eigenschaft, auf die ich zielen möchte, aber wie du bemerkst, ist mein XAML falsch. Ich habe versucht, x: Name auf den DropShadowEffect, aber Sie können TargetName nicht in Styles verwenden. Es gibt ein Loch in der MSDN-Dokumentation über die Verwendung dieser Klammern in Storyboards, aber ich habe es in der Hilfe für PropertyPath nachgeschlagen. Jedoch kann ich das Problem immer noch nicht lösen. Ich denke, ich muss Effekt auf DropShadowEffect wirken, aber das scheint in XAML nicht möglich zu sein. Irgendwelche anderen Ideen? – Zodman

+0

Es ist mir gelungen, den Code, den Sie gepostet haben, mit der von mir bereitgestellten Syntax zu bearbeiten. Ich habe dies in einer abgespeckten Beispielanwendung gemacht. Ich poste, was ich verwendet habe, und Sie können vielleicht davon zurück arbeiten ... –

+0

Hinweis Ich habe die Setter entfernt, die statische Ressourcen verwenden, die Sie nicht bereitgestellt haben, aber das wird die Demonstration nicht bewirken. Und ich merke, dass Sie versuchen, die TextBlock.Foreground -Eigenschaft innerhalb Ihres Stils zu setzen, was auch nicht funktioniert. –