Question

我想在点击按钮时向用户提供一些反馈，这会启动一个很长的请求。

我正在使用带有mvvm的WPF，并且我想开始点击所点击的图片。

这是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开始闪烁。要做你想做的事，你需要：

将新的DataTrigger添加到您的ImageStyleUpd样式
使用＆＃34; True＆＃34;将其绑定到您的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>

从ViewModel中闪烁图像

4 个答案: