Fatal编程技术网
  • wpf/
  • Wpf 如何在另一个xaml控件上应用双动画？

Wpf 如何在另一个xaml控件上应用双动画？

wpf animation button mvvm

Wpf 如何在另一个xaml控件上应用双动画？,wpf,animation,button,mvvm,prism,Wpf,Animation,Button,Mvvm,Prism,我有一个按钮，它会导致其他控件上的动画淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入。。。它们位于另一个xaml中： <Button x:Name ="MainButton" Grid.Row="87" Grid.Column="150" Grid.ColumnSpan="2" Grid.RowSpan="2" Command="{Binding AutoClickFadeinButtonCommand}">

我有一个按钮，它会导致其他控件上的动画淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入淡入。。。它们位于另一个xaml中：

<Button x:Name ="MainButton" Grid.Row="87" Grid.Column="150" Grid.ColumnSpan="2" Grid.RowSpan="2" Command="{Binding AutoClickFadeinButtonCommand}">
    <Button.Triggers>
        <EventTrigger RoutedEvent="PreviewMouseDown">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Studio" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
                    <DoubleAnimation Storyboard.TargetName="Animation" Storyboard.TargetProperty="Opacity" From="0" To="0.3" Duration="0:0:2"/>
                    <DoubleAnimation Storyboard.TargetName="Record" Storyboard.TargetProperty="Opacity" From="0" To="0.3" Duration="0:0:2"/>
                    <DoubleAnimation Storyboard.TargetName="Info" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
                    <DoubleAnimation Storyboard.TargetName="info_content" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:2"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Button.Triggers>
</Button>
如何在我当前的xaml中引用这些控件？请注意，我使用的是mvvm，我不想引用ViewModel类中的button控件。

在ViewModel中创建一个事件，并将事件触发器附加到XAML中，例如ControlStoryboard动作，该动作在事件触发后立即启动动画

编辑：

您可以在虚拟机中放置类似的内容：

public event EventHandler AnimationCalled;

protected virtual void OnAnimationCalled()
{
    AnimationCalled?.Invoke(this, EventArgs.Empty);
}
只要有任何东西将调用OnAnimationCalled由您的按钮或命令触发的任何方法，事件就会被引发

您可以使用触发器在XAML内部订阅此事件SourceObject必须是包含您的事件的VM，并结合ControlStoryboard操作：

包含故事板的用户控件：

<UserControl
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:StoryboardTriggerExample"
         xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="StoryboardTriggerExample.UserControlContainingStoryboard"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
    <Storyboard x:Key="Storyboard1">
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
            <EasingColorKeyFrame KeyTime="0:0:1" Value="#FF101085"/>
        </ColorAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="rectangle">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="30"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="rectangle">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="30"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="rectangle1">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="rectangle1">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
        </DoubleAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle1">
            <EasingColorKeyFrame KeyTime="0:0:1" Value="#FF6BFF63"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>
<StackPanel>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="AnimationCalled" SourceObject="{Binding Mode=OneWay}">
            <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Rectangle x:Name="rectangle1" Fill="#FFF4F4F5" Height="30" Stroke="Black" Width="30" HorizontalAlignment="Left" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
    <Rectangle x:Name="rectangle" Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>

</StackPanel>
应该是这样的：

应通过单击按钮，通过故事板将动画移动到此位置：

您可以在

上下载解决方案。我编辑了我的答案。请检查它是否有用。否则我将发布一个完整的示例。添加了一个完整的示例和一个GitHub链接。Grid还将允许您在其上放置触发器。我更新了我的GitHub回购协议。确保在解决方案xmlns:i中为i和ei添加了正确的名称空间=http://schemas.microsoft.com/expression/2010/interactivity xmlns:ei=http://schemas.microsoft.com/expression/2010/interactions 这些是表达式dll的Microsoft.Expression.Interactions.dll和Microsoft.Expression.Interactivity.dll，如果ReSharper已打开。很高兴它现在可以工作了。System.Windows.Interactive应该可以工作，因为它是Blend SDK的一部分。您使用哪个.NET版本？您下载并试用过我的GitHub示例吗？看看C:\Program Files x86\Microsoft SDK\Expression\Blend\.NETFramework\v4.5\库中应该有System.Windows.Interactivity.dll和Microsoft.Expression.Interactivity.dll。如果两个都导入，它应该可以工作。 
using System;
namespace StoryboardTriggerExample
{
    public class MainViewModel
    {

        //Only needed to have a target for our CallMethodAction
        //In real world it´d be easier to make the call to OnAnimationCalled(); via command
        public void CallAnimation()
        {
            OnAnimationCalled();
        }

        public event EventHandler AnimationCalled;

        protected virtual void OnAnimationCalled()
        {
            AnimationCalled?.Invoke(this, EventArgs.Empty);
        }
    }
}

<UserControl
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:StoryboardTriggerExample"
         xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="StoryboardTriggerExample.UserControlContainingStoryboard"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
    <Storyboard x:Key="Storyboard1">
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle">
            <EasingColorKeyFrame KeyTime="0:0:1" Value="#FF101085"/>
        </ColorAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="rectangle">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="30"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="rectangle">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="30"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="rectangle1">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="rectangle1">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="100"/>
        </DoubleAnimationUsingKeyFrames>
        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="rectangle1">
            <EasingColorKeyFrame KeyTime="0:0:1" Value="#FF6BFF63"/>
        </ColorAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>
<StackPanel>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="AnimationCalled" SourceObject="{Binding Mode=OneWay}">
            <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <Rectangle x:Name="rectangle1" Fill="#FFF4F4F5" Height="30" Stroke="Black" Width="30" HorizontalAlignment="Left" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition"/>
    <Rectangle x:Name="rectangle" Fill="#FFF4F4F5" Height="100" Stroke="Black" Width="100" HorizontalAlignment="Left" VerticalAlignment="Top"/>

</StackPanel>

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:StoryboardTriggerExample"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="StoryboardTriggerExample.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <local:MainViewModel/>
</Window.DataContext>
<StackPanel>
    <Button x:Name="button" Content="Button">
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="Click">
                <ei:CallMethodAction TargetObject="{Binding Mode=OneWay}" MethodName="CallAnimation"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Button>
    <local:UserControlContainingStoryboard/>
</StackPanel>