2013-01-04 45 views
33

私は正しい判断に手助けが必要です。いくつかのイベントが発生したときに私のユーザコントロールの背景色をアニメーション化する必要があります。そうであれば、ちょうど1秒間背景を変えてからそれを元に戻したいと思います。どのようにすればいいですか?カラーアニメーションやタイマーを使用するか、他の方法で使用することができます。Wpfアニメーションの背景色

解決済み。ありがとうございます!これは私にはうまくいく:

 ColorAnimation animation; 
     animation = new ColorAnimation(); 
     animation.From = Colors.Orange; 
     animation.To = Colors.Gray; 
     animation.Duration = new Duration(TimeSpan.FromSeconds(1)); 
     this.elGrid.Background.BeginAnimation(SolidColorBrush.ColorProperty, animation); 
+0

質問は個人的な選択である傾向があるので、質問は非常に自由です。私は質問の言い換えをしたり、あなたが試したことを含めることをお勧めします。 – Backlash

+0

私は申し訳ありません私は自動的に変更されるように見える "アニメーション"タグを追加しました。 – Taras

+0

少なくともいくつかのコード/詳細情報を投稿する必要があります(どのイベント?xamlの外観はどうですか?) –

答えて

49

に役立ちます願っています。

この例では、Button Brackgroundは、MouseLeaveイベントで緑色になります。このコードはあなたが必要としているものとうまく似ています。

<Button Content="Button" Height="75" HorizontalAlignment="Left" Margin="27,12,0,0" Name="btnImgBrush" VerticalAlignment="Top" Width="160" Background="LightGray"> 
    <Button.Triggers> 
     <EventTrigger RoutedEvent="Button.MouseLeave"> 
      <BeginStoryboard> 
       <Storyboard> 
        <ColorAnimation To="Green" 
            Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" 
            FillBehavior="Stop" 
            Duration="0:0:1"/> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Button.Triggers> 
</Button> 
+1

私は無効なXAMLを取得していますが、代わりに '' 'Duration'''を' '' 0:0:1'''にする必要がありますか? –

+0

はい、あなたは正しいです。私はそれを訂正した。ありがとう – Klaus78

+10

@ Klaus78何(Button.Background)(SolidColorBrush.Color)の意味ですか?ここでかっこの役割は何ですか? – Helic

0

アニメーションを使う方がいいかもしれない。 Expressionブレンドは、相対的なアニメーション/ビヘイビアを持ちます。

-7

次のような色を変更するDoubleAnimationを使用することができます。

<Storyboard> 
    <DoubleAnimation Storyboard.TargetProperty="Background" 
          From="0.0" 
          Duration="0:0:2" 
          To="1.0" />       
</Storyboard> 

はそれが私がColorAnimationEventTriggerを使用することになり

+2

実際に背景はブラシタイプです。 DoubleAnimationは、代わりにダブルタイプをアニメーション化するために使用されます。 – Klaus78

+0

それは本当にKaus78です。このスニペットは、前にLabelコントロールで定義したControlTemplateの1つから抽出し、簡単な例のためにOpacityをBackgroundに置き換えました。 – Iftikhar

21

背景がフリーズしたインスタンスである場合、System.InvalidOperationExceptionが発生することに注意してください。

'System.Windows.Media.SolidColorBrush'の 'Color'プロパティは、オブジェクトが封印されているか凍結されているため、アニメーション化できません。

このメッセージを修正するには、コントロールの背景をフリーズしていないインスタンスに割り当てます。

// Do not use a frozen instance 
this.elGrid.Background = new SolidColorBrush(Colors.Orange); 
this.elGrid.Background.BeginAnimation(SolidColorBrush.ColorProperty, animation); 

Freezable Objects Overview on MSDN

+1

これは元の質問に追加されたコードに記述する必要があります。 – fbmd

5
 ColorAnimation colorChangeAnimation = new ColorAnimation(); 
     colorChangeAnimation.From = VariableColour; 
     colorChangeAnimation.To = BaseColour; 
     colorChangeAnimation.Duration = timeSpan; 

     PropertyPath colorTargetPath = new PropertyPath("(Panel.Background).(SolidColorBrush.Color)"); 
     Storyboard CellBackgroundChangeStory = new Storyboard(); 
     Storyboard.SetTarget(colorChangeAnimation, BackGroundCellGrid); 
     Storyboard.SetTargetProperty(colorChangeAnimation, colorTargetPath); 
     CellBackgroundChangeStory.Children.Add(colorChangeAnimation); 
     CellBackgroundChangeStory.Begin(); 

// VariableColour & BaseColourカラーのクラスである、のtimeSpanはのTimeSpanのクラスである、BackGroundCellGridは、グリッドのクラスです。

// SolidColorBrushを作成してXAMLでバインディングする必要はありません。 //楽しむ!

1

フリーズテーブルの問題に遭遇した場合に使用できる添付プロパティのセットです。

using System; 
using System.ComponentModel; 
using System.Windows; 
using System.Windows.Controls; 
using System.Windows.Media; 
using System.Windows.Media.Animation; 
using System.Windows.Shapes; 

public static class Blink 
{ 
    public static readonly DependencyProperty WhenProperty = DependencyProperty.RegisterAttached(
     "When", 
     typeof(bool?), 
     typeof(Blink), 
     new PropertyMetadata(false, OnWhenChanged)); 

    public static readonly DependencyProperty FromProperty = DependencyProperty.RegisterAttached(
     "From", 
     typeof(Color), 
     typeof(Blink), 
     new FrameworkPropertyMetadata(Colors.Transparent, FrameworkPropertyMetadataOptions.Inherits)); 

    public static readonly DependencyProperty ToProperty = DependencyProperty.RegisterAttached(
     "To", 
     typeof(Color), 
     typeof(Blink), 
     new FrameworkPropertyMetadata(Colors.Orange, FrameworkPropertyMetadataOptions.Inherits)); 

    public static readonly DependencyProperty PropertyProperty = DependencyProperty.RegisterAttached(
     "Property", 
     typeof(DependencyProperty), 
     typeof(Blink), 
     new PropertyMetadata(default(DependencyProperty))); 

    public static readonly DependencyProperty DurationProperty = DependencyProperty.RegisterAttached(
     "Duration", 
     typeof(Duration), 
     typeof(Blink), 
     new PropertyMetadata(new Duration(TimeSpan.FromSeconds(1)))); 

    public static readonly DependencyProperty AutoReverseProperty = DependencyProperty.RegisterAttached(
     "AutoReverse", 
     typeof(bool), 
     typeof(Blink), 
     new PropertyMetadata(true)); 

    public static readonly DependencyProperty RepeatBehaviorProperty = DependencyProperty.RegisterAttached(
     "RepeatBehavior", 
     typeof(RepeatBehavior), 
     typeof(Blink), 
     new PropertyMetadata(RepeatBehavior.Forever)); 

    private static readonly DependencyProperty OldBrushProperty = DependencyProperty.RegisterAttached(
     "OldBrush", 
     typeof(Brush), 
     typeof(Blink), 
     new PropertyMetadata(null)); 

    public static void SetWhen(this UIElement element, bool? value) 
    { 
     element.SetValue(WhenProperty, value); 
    } 

    [AttachedPropertyBrowsableForChildren(IncludeDescendants = false)] 
    [AttachedPropertyBrowsableForType(typeof(UIElement))] 
    public static bool? GetWhen(this UIElement element) 
    { 
     return (bool?)element.GetValue(WhenProperty); 
    } 

    public static void SetFrom(this DependencyObject element, Color value) 
    { 
     element.SetValue(FromProperty, value); 
    } 

    [AttachedPropertyBrowsableForChildren(IncludeDescendants = false)] 
    [AttachedPropertyBrowsableForType(typeof(UIElement))] 
    public static Color GetFrom(this DependencyObject element) 
    { 
     return (Color)element.GetValue(FromProperty); 
    } 

    public static void SetTo(this DependencyObject element, Color value) 
    { 
     element.SetValue(ToProperty, value); 
    } 

    [AttachedPropertyBrowsableForChildren(IncludeDescendants = false)] 
    [AttachedPropertyBrowsableForType(typeof(UIElement))] 
    public static Color GetTo(this DependencyObject element) 
    { 
     return (Color)element.GetValue(ToProperty); 
    } 

    public static void SetProperty(this UIElement element, DependencyProperty value) 
    { 
     element.SetValue(PropertyProperty, value); 
    } 

    [AttachedPropertyBrowsableForChildren(IncludeDescendants = false)] 
    [AttachedPropertyBrowsableForType(typeof(UIElement))] 
    public static DependencyProperty GetProperty(this UIElement element) 
    { 
     return (DependencyProperty)element.GetValue(PropertyProperty); 
    } 

    public static void SetDuration(this UIElement element, Duration value) 
    { 
     element.SetValue(DurationProperty, value); 
    } 

    [AttachedPropertyBrowsableForChildren(IncludeDescendants = false)] 
    [AttachedPropertyBrowsableForType(typeof(UIElement))] 
    public static Duration GetDuration(this UIElement element) 
    { 
     return (Duration)element.GetValue(DurationProperty); 
    } 

    public static void SetAutoReverse(this UIElement element, bool value) 
    { 
     element.SetValue(AutoReverseProperty, value); 
    } 

    [AttachedPropertyBrowsableForChildren(IncludeDescendants = false)] 
    [AttachedPropertyBrowsableForType(typeof(UIElement))] 
    public static bool GetAutoReverse(this UIElement element) 
    { 
     return (bool)element.GetValue(AutoReverseProperty); 
    } 

    public static void SetRepeatBehavior(this UIElement element, RepeatBehavior value) 
    { 
     element.SetValue(RepeatBehaviorProperty, value); 
    } 

    [AttachedPropertyBrowsableForChildren(IncludeDescendants = false)] 
    [AttachedPropertyBrowsableForType(typeof(UIElement))] 
    public static RepeatBehavior GetRepeatBehavior(this UIElement element) 
    { 
     return (RepeatBehavior)element.GetValue(RepeatBehaviorProperty); 
    } 

    private static void OnWhenChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
    { 
     var property = GetProperty((UIElement)d) ?? GetDefaultProperty(d); 
     if (property == null || !typeof(Brush).IsAssignableFrom(property.PropertyType)) 
     { 
      if (DesignerProperties.GetIsInDesignMode(d)) 
      { 
       if (property != null) 
       { 
        throw new ArgumentException($"Could not blink for {d.GetType().Name}.{property.Name}", nameof(d)); 
       } 
      } 

      return; 
     } 

     AnimateBlink(e.NewValue as bool?, (UIElement)d, property); 
    } 

    private static DependencyProperty GetDefaultProperty(DependencyObject d) 
    { 
     if (d is Control) 
     { 
      return Control.BackgroundProperty; 
     } 

     if (d is Panel) 
     { 
      return Panel.BackgroundProperty; 
     } 

     if (d is Border) 
     { 
      return Border.BackgroundProperty; 
     } 

     if (d is Shape) 
     { 
      return Shape.FillProperty; 
     } 

     if (DesignerProperties.GetIsInDesignMode(d)) 
     { 
      throw new ArgumentException($"Could not find property to blink for {d.GetType().Name}", nameof(d)); 
     } 

     return null; 
    } 

    private static void AnimateBlink(bool? blink, UIElement element, DependencyProperty property) 
    { 
     if (element == null) 
     { 
      return; 
     } 
     if (blink == true) 
     { 
      var brush = element.GetValue(property); 
      element.SetCurrentValue(OldBrushProperty, brush); 
      element.SetValue(property, Brushes.Transparent); 
      var from = element.GetFrom(); 
      var to = element.GetTo(); 
      var sb = new Storyboard(); 
      var duration = element.GetDuration(); 
      var animation = new ColorAnimation(from, to, duration) 
      { 
       AutoReverse = element.GetAutoReverse(), 
       RepeatBehavior = element.GetRepeatBehavior() 
      }; 
      Storyboard.SetTarget(animation, element); 
      Storyboard.SetTargetProperty(animation, new PropertyPath($"{property.Name}.(SolidColorBrush.Color)")); 
      sb.Children.Add(animation); 
      sb.Begin(); 
     } 
     else 
     { 
      var brush = element.GetValue(OldBrushProperty); 
      element.BeginAnimation(property, null); 
      element.SetCurrentValue(property, brush); 
     } 
    } 
} 

使用法:

<Grid> 
    <Grid.Resources> 
     <Style x:Key="BlinkWhenMouseOver" 
       TargetType="{x:Type Border}"> 
      <Setter Property="local:Blink.When" Value="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" /> 
      <Setter Property="local:Blink.From" Value="Honeydew" /> 
      <Setter Property="local:Blink.To" Value="HotPink" /> 
      <Setter Property="BorderThickness" Value="5" /> 
      <Setter Property="local:Blink.Property" Value="{x:Static Border.BorderBrushProperty}" /> 
     </Style> 
    </Grid.Resources> 
    <Grid.RowDefinitions> 
     <RowDefinition /> 
     <RowDefinition /> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <Border Style="{StaticResource BlinkWhenMouseOver}" Background="Transparent"/> 
    <Border Grid.Row="1" 
      local:Blink.From="Aqua" 
      local:Blink.To="Yellow" 
      local:Blink.When="{Binding IsChecked, 
             ElementName=ToggleBlink}" /> 
    <ToggleButton x:Name="ToggleBlink" 
        Grid.Row="2" 
        Content="Blink" /> 
</Grid> 
0

この投稿は、私を助けました。しかし、元の質問のように1秒後に色を変更する場合は、

ColorAnimation animation; 
    animation = new ColorAnimation(); 
    animation.AutoReverse =true; 
0

これは私にとってはうまくいきました。

私はボタン内部のパス(それは、 "X" を描く)持っている:マウスオーバーで

<Path x:Name="MyDeleteRowButton" Stroke="Gray" Grid.Row="0" 
     Data="M1,5 L11,15 M1,15 L11,5" StrokeThickness="2" HorizontalAlignment="Center" 
     Stretch="None"/> 

を、私はクロスが赤に行きたいので、私は追加します。

<DataTemplate.Triggers> 
    <!-- Highlight row on mouse over, and highlight the delete button. --> 
    <EventTrigger RoutedEvent="ItemsControl.MouseEnter"> 
     <EventTrigger.Actions> 
      <BeginStoryboard> 
       <Storyboard> 
        <!-- On mouse over, flicker the row to highlight it.--> 
        <DoubleAnimation 
         Storyboard.TargetProperty="Opacity" 
         From="0.5" 
         To="1" 
         Duration="0:0:0.250" 
         FillBehavior="Stop"/> 
        <!-- Highlight the delete button with red. --> 
        <ColorAnimation 
         To="Red" 
         Storyboard.TargetName="MyDeleteRowButton" 
         Storyboard.TargetProperty="(Stroke).(SolidColorBrush.Color)" 
         Duration="0:0:0.100" 
         FillBehavior="HoldEnd"/> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger.Actions> 
    </EventTrigger> 

    <!-- Grey out the delete button. --> 
    <EventTrigger RoutedEvent="ItemsControl.MouseLeave"> 
     <EventTrigger.Actions> 
      <BeginStoryboard> 
       <Storyboard> 
        <!-- Space is precious: "delete" button appears only on a mouseover. --> 
        <ColorAnimation 
         To="Gray" 
         Storyboard.TargetName="MyDeleteRowButton" 
         Storyboard.TargetProperty="(Stroke).(SolidColorBrush.Color)" 
         Duration="0:0:0.100" 
         FillBehavior="HoldEnd"/> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger.Actions> 
    </EventTrigger> 

</DataTemplate.Triggers> 

これについて最も混乱するのは、角括弧(Storyboard.TargetProperty)です。角括弧を削除すると、何も機能しません。

詳細については、「propertyName Grammar」および「Storyboard.TargetProperty」を参照してください。