從ViewModel閃爍圖像

Question

我想給用戶提供一些反饋，當他們點擊一個按鈕，這會啓動一個可能很長的請求。

我使用WPF與mvvm，我想開始眨眼點擊的圖像。

這是XAML代碼：

<Button Style="{DynamicResource BtnToolBar}" Command="{Binding refreshAll}"> 
    <Image x:Name="imgUpd" Style="{DynamicResource ImageStyleUpd}" ToolTip="{StaticResource UpdateData}"/> 
</Button> 

我想是這樣的：

isBlinking="{Binding isBlinking}" 

是否存在？我該如何從ViewModel製作閃爍的圖像？可能嗎？

編輯：我已經寫了這與solution我找到了。

Answer 1

您可以使用viewmodel開始閃爍。做你想做什麼，你需要：

• 您ImageStyleUpd風格
• 綁定它添加新的DataTrigger您isBlinking財產與「真」值
• 在觸發但是你可以動畫的圖像，你要（例如，改變圖像的不透明度）

例

<Style x:Key="ImageStyleUpd" TargetType="{x:Type Image}"> 
    <Style.Triggers> 
     <DataTrigger Binding="{Binding IsBlinking}" Value="True"> 
      <DataTrigger.EnterActions> 
       <BeginStoryboard x:Name="blinking"> 
        <Storyboard RepeatBehavior="Forever"> 
         <DoubleAnimation Storyboard.TargetProperty="Opacity" AutoReverse="True" 
             To="0.5" Duration="0:0:0.5"> 
         </DoubleAnimation> 
        </Storyboard> 
       </BeginStoryboard> 
      </DataTrigger.EnterActions> 
      <DataTrigger.ExitActions> 
       <StopStoryboard BeginStoryboardName="blinking"/> 
      </DataTrigger.ExitActions> 
     </DataTrigger> 
    </Style.Triggers> 
</Style> 

希望它有幫助。

Answer 2

閃爍通常是視圖中的動畫，可通過viewmodel中的IsBlinking屬性啓動/停止。您可以實現通過改變DropShadowEffect（光滑閃爍）或由兩個刷子簡單的開關閃爍效果：

<DataTrigger Binding="{Binding IsBlinking}" Value="True"> 
    <DataTrigger.EnterActions> 
     <BeginStoryboard x:Name="blinking"> 
      <Storyboard RepeatBehavior="Forever"> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="item" 
               Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame Value="Red" KeyTime="0:0:0"/> 
        <DiscreteObjectKeyFrame Value="White" KeyTime="0:0:0.3"/> 
        <DiscreteObjectKeyFrame KeyTime="0:0:0.5"/> 
       </ObjectAnimationUsingKeyFrames> 
      </Storyboard> 
     </BeginStoryboard> 
    </DataTrigger.EnterActions> 
    <DataTrigger.ExitActions> 
     <StopStoryboard BeginStoryboardName="blinking"/> 
    </DataTrigger.ExitActions> 
</DataTrigger> 

item - 是一些視覺上的這Background（或Foreground/Fill等）要動畫。

<!-- to example path, use Storyboard.TargetProperty="Fill" --> 
<Path x:Name="item" Fill="SomeDefaultNonBlinkingBrush" ... /> 

Answer 3

我喜歡做這種東西的行爲，它是可重複使用的，你可以在任何UIElement設置該屬性。

public static class FlickrBehavior 
{ 
    #region IsFlickering 

    public static bool GetIsFlickering(UIElement element) 
    { 
     return (bool)element.GetValue(IsFlickeringProperty); 
    } 

    public static void SetIsFlickering(UIElement element, bool value) 
    { 
     element.SetValue(IsFlickeringProperty, value); 
    } 

    public static readonly DependencyProperty IsFlickeringProperty = 
     DependencyProperty.RegisterAttached("IsFlickering", typeof(bool), typeof(FlickrBehavior), new UIPropertyMetadata(false, OnIsFlickeringChanged)); 

    static void OnIsFlickeringChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
    { 
     if ((bool)e.NewValue) 
      StartAnimation(d as UIElement); 
     else 
      StopAnimation(d as UIElement); 
    } 

    private static void StartAnimation(UIElement element) 
    { 
     DoubleAnimation da = new DoubleAnimation(); 
     da.From = 1; 
     da.To = 0; 
     da.Duration = new Duration(TimeSpan.FromSeconds(2)); 
     da.AutoReverse = true; 
     da.RepeatBehavior = RepeatBehavior.Forever; 
     element.BeginAnimation(UIElement.OpacityProperty, da); 
    } 

    private static void StopAnimation(UIElement element) 
    { 
     element.BeginAnimation(UIElement.OpacityProperty, null); 
    } 

    #endregion 
} 

Answer 4

與@ Novitchi的答案類似，我還想創建一個具有附加屬性的行爲。但我會的行爲附加到mouse click：

所以，你可以創建自己的行爲如下：

public static class BlinkingBehaviour 
{ 
    public static bool GetIsBlinkingWhenClick(UIElement element) 
    { 
     return (bool)element.GetValue(IsBlinkingWhenClickProperty); 
    } 

    public static void SetIsBlinkingWhenClick(UIElement element, bool value) 
    { 
     element.SetValue(IsBlinkingWhenClickProperty, value); 
    } 

    public static readonly DependencyProperty IsBlinkingWhenClickProperty = 
     DependencyProperty.RegisterAttached(
      "IsBlinkingWhenClick", 
      typeof(bool), 
      typeof(BlinkingBehaviour), 
      new FrameworkPropertyMetadata(false, OnIsBlinkingWhenClickChanged)); 

    static void OnIsBlinkingWhenClickChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) 
    { 
     if ((bool)e.NewValue) 
     { 
      (d as UIElement).PreviewMouseLeftButtonDown -= BlinkingWhenClickBehavior_PreviewMouseLeftButtonDown; 
      (d as UIElement).PreviewMouseLeftButtonDown += BlinkingWhenClickBehavior_PreviewMouseLeftButtonDown; 
     } 
     else 
     { 
      (d as UIElement).PreviewMouseLeftButtonDown -= BlinkingWhenClickBehavior_PreviewMouseLeftButtonDown; 
     } 
    } 

    static void BlinkingWhenClickBehavior_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
    { 
     DoubleAnimation blink = new DoubleAnimation() { 
         To = 1, 
         From = 0, 
         Duration = TimeSpan.FromMilliseconds(200) }; 
     (sender as UIElement).BeginAnimation(UIElement.OpacityProperty, blink); 
    } 
} 

然後在您的XAML，你可以將它連接到您的image：

<Window x:Class="YourNameSpace.YourWindowClass" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="clr-namespace:YourNameSpace"  
    <Button ...> 
     <Image local:BlinkingBehaviour.IsBlinkingWhenClick="True" .../> 
    </Button> 
</Window>