2012-03-20 10 views
0

カラーアニメーションを作成する必要があります。私は完璧に動作するコントロール(滑らかなボタン - 最小化、終了)を持っています。色を変えるマウスオーバートリガーがあります。問題は、この色の変化をアニメートするときです。 :それはどのように見えるかの例SSlickButtonカラーアニメーション

あります:それは一度働く

<Trigger.EnterActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="ButtonBackgroundBorder" 
         Storyboard.TargetProperty="(UIElement.Opacity)" To="1" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.EnterActions> 

<ControlTemplate x:Key="SlickButtonTemplate" TargetType="{x:Type controls:SlickButtonControl}"> 
    <Grid> 
     <Border x:Name="ButtonBackgroundBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" 
       Background="{Binding Path=HighlightBackground, RelativeSource={RelativeSource TemplatedParent}}" Opacity="0" BorderBrush="Black" BorderThickness="1"> 
     </Border> 
     <Border x:Name="ButtonEdgesBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderBrush="Black" 
       BorderThickness="1"> 
      <Border.BitmapEffect> 
       <DropShadowBitmapEffect Color="#FFFFFFFF" Direction="270" ShadowDepth=".75" Softness="0.20"/> 
      </Border.BitmapEffect> 
     </Border> 
     <Border x:Name="ButtonContentBorder" CornerRadius="{Binding Path=CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" Opacity="1" BorderThickness="1"> 
      <ContentPresenter Width="Auto" Height="Auto" HorizontalAlignment="Center" VerticalAlignment="Center"> 
      </ContentPresenter> 
     </Border> 
    </Grid> 
    <ControlTemplate.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Trigger.Setters> 
       <Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter> 
      </Trigger.Setters> 
     </Trigger> 
     <Trigger Property="IsMouseOver" Value="False"> 
      <Trigger.Setters> 
       <Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter> 
       <Setter Property="Background" TargetName="ButtonBackgroundBorder" Value="{Binding Path=PressedBackground, RelativeSource={RelativeSource TemplatedParent}}"></Setter> 
      </Trigger.Setters> 
     </Trigger> 
    </ControlTemplate.Triggers> 
</ControlTemplate> 
<Style x:Key="SlickButton" TargetType="{x:Type ToggleButton}"> 
    <Setter Property="Template" Value="{StaticResource SlickButtonTemplate}" /> 
</Style> 

は私がTrigger.Settersセクションを削除してそれを置き換えることを試みました。ボタン領域にマウスが入るとアニメーションが出ますが、アニメーションは残っていません。次に、マウスがそのボタンに再び入ると、アニメーションは表示されませんが、すぐに色が変わります。私はいくつかの助けを請う。 Thxを事前に入力してください。

答えて

0

Thxをする必要があり、私は愚かだけど、コメントはありません:P

 <ControlTemplate.Triggers> 
     <Trigger Property="IsMouseOver" Value="True"> 
      <Trigger.EnterActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundOverBorder" 
         Storyboard.TargetProperty="(UIElement.Opacity)" To="1" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.EnterActions> 
      <Trigger.ExitActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundOverBorder" 
         Storyboard.TargetProperty="(UIElement.Opacity)" To="0" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.ExitActions> 
     </Trigger> 
     <Trigger Property="IsPressed" Value="True"> 
      <Trigger.Setters> 
       <Setter Property="Background" TargetName="buttonBackgroundPressedBorder" Value="{Binding Path=PressedBackground, RelativeSource={RelativeSource TemplatedParent}}" /> 
      </Trigger.Setters> 
      <Trigger.EnterActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundPressedBorder" 
         Storyboard.TargetProperty="(UIElement.Opacity)" To="1" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.EnterActions> 
      <Trigger.ExitActions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation BeginTime="00:00:00" Duration="00:00:00.5" Storyboard.TargetName="buttonBackgroundPressedBorder" 
         Storyboard.TargetProperty="(UIElement.Opacity)" To="0" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </Trigger.ExitActions> 
     </Trigger> 
    </ControlTemplate.Triggers> 

すべてが正常に動作します:)

+0

ちょうどあなたのTIを取る、あなたが愚かなら、私は知りません:)しかし、XAMLはあなたに成長します私、そうでなければただ尋ねる。 – Silvermind

1

ないここではない、ここで
<Trigger Property="IsMouseOver" Value="False">


<Trigger.Setters>

しかし、ここで
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="1"></Setter>

は次のようになります。
<Setter Property="Opacity" TargetName="ButtonBackgroundBorder" Value="0"></Setter>

私はあなたが Property="IsPressed" Value="True"

と混同Property="IsMouseOver" Value="False"だと思いますところで

、まだIsMouseOver=falseButtonBackgroundBorderためOpacity0

関連する問題