2011-01-12 6 views
9

Expression Blend 4のイメージにWPF Storyboardアニメーションを作成しました。ホバーでは、イメージが徐々にぼやけます。ストーリーボードを元に戻す、またはマウスが画像を離れるときに元に戻す方法はありますか? Storyboard.Remove()をトリガーできるようにすることはできますが、ストーリーボードを実際には逆方向に再生することはありません。WPFストーリーボードアニメーションを逆にする方法は?

Expression Blend 4でこれを実現する方法はありますか?

+0

私はExpression Blendのを使用していないが、しかし、多分あなたは、直接XAML上で動作するようにしたいですか?ストーリーボードを別のイベントで元に戻すには、新しいストーリーボードを逆の順序で作成し、そのイベントにタグ付けすることです。 –

+0

私はそれについて考えていましたが、別のストーリーボードを作成しないようにしていました。入力いただきありがとうございます。 –

+0

これまでのところ、1回のイベントで「do-and-reverse」がトリガされた場合は簡単に実行できますが、urの場合は2つの別々のイベントです。 xamlだけで便利な方法を知ることに興味があります。 –

答えて

11

あなたはブレンドを使用しているので、あなたがVisualStateManagerためのブレンドのサポートを活用する必要があります。 MouseOverNormalのようなさまざまな状態でオブジェクトがどのように見えるか、およびさまざまな状態間の遷移がどれくらいの時間であるかを説明するだけで済みます。また、ビジュアル状態マネージャは状態間の遷移方法を理解します。

画像には視覚的な状態はありませんが、Buttonテンプレートを編集して内容をイメージにして、ボタンの状態を編集することができます。

<Grid> 
    <Grid.Resources> 
     <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Button}"> 
         <Image x:Name="image" Height="100" Width="Auto" Source="http://thecybershadow.net/misc/stackoverflow.png" Margin="0,0,-25,0"> 
          <Image.Effect> 
           <DropShadowEffect ShadowDepth="0"/> 
          </Image.Effect> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CommonStates"> 
            <VisualStateGroup.Transitions> 
             <VisualTransition GeneratedDuration="0:0:0.5"/> 
            </VisualStateGroup.Transitions> 
            <VisualState x:Name="Normal"/> 
            <VisualState x:Name="MouseOver"> 
             <Storyboard> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="image"> 
               <EasingDoubleKeyFrame KeyTime="0" Value="15"/> 
              </DoubleAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="Pressed"/> 
            <VisualState x:Name="Disabled"/> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
         </Image> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Grid.Resources> 
    <Button Style="{StaticResource ButtonStyle1}"/> 
</Grid> 

注ブレンドがあなたのためにすべてこれを行いますが、XAMLを理解することに役立つこと:私は技術を証明するためにこれを行っおよびXAMLをクリーンアップしました。ここでブレンド指向のチュートリアルです:

+0

ありがとうございました。ボタンを作ることは一種の厄介ですが、正しく機能する限り、私はそれに対処できます。ありがとう! –

+0

私の例では、クロムなし、ボーダーなし、余分なマウスオーバーの振る舞いなど、すべてのボタンの様子をどのように "スタイルを外す"ことができますか?しかし、送信したリンクを読むと、任意のタイプの要素に対して、MouseOverやNormalなどの独自の状態グループと状態を作成します。それで、いいえ、それはボタンのようには見えません。 –

+0

これは「WPFストーリーボードアニメーションを逆にする方法」の答えではありません。 - ' - ' –