如何在另一个 xaml 的控件上应用双重动画？
How to apply double animation on a control from another xaml?
我有一个按钮应该会在位于另一个 xaml:
中的一些其他控件（Studio、Animation、Record...）上产生淡入动画
<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 class.
中引用按钮控件
在您的 ViewModel 中创建一个事件并将事件触发器附加到您的 XAML（例如 ControlStoryboardAction），事件触发后立即启动动画。
编辑：
你可以把类似的东西放在你的虚拟机里：
public event EventHandler AnimationCalled;
protected virtual void OnAnimationCalled()
{
AnimationCalled?.Invoke(this, EventArgs.Empty);
}
只要有任何东西调用 OnAnimationCalled（由您的按钮或命令触发的任何方法），就会引发事件。
您可以通过使用触发器（SourceObject 必须是包含您的事件的 VM）结合 ControlStoryboardAction:[=25 在 XAML 中订阅此事件=]
<i:Interaction.Triggers>
<i:EventTrigger SourceObject="{Binding Mode=OneWay}" EventName="AnimationCalled">
<ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
编辑 2：完整示例
MainViewModel:
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 将包含我们的故事板：
<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>
还有我们的MainWindow：
<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>
应该是这样的：
应该通过故事板将动画移动到这里，点击按钮：
您可以在GitHub
上下载解决方案
我有一个按钮应该会在位于另一个 xaml:
中的一些其他控件（Studio、Animation、Record...）上产生淡入动画<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 class.
中引用按钮控件在您的 ViewModel 中创建一个事件并将事件触发器附加到您的 XAML（例如 ControlStoryboardAction），事件触发后立即启动动画。
编辑：
你可以把类似的东西放在你的虚拟机里：
public event EventHandler AnimationCalled;
protected virtual void OnAnimationCalled()
{
AnimationCalled?.Invoke(this, EventArgs.Empty);
}
只要有任何东西调用 OnAnimationCalled（由您的按钮或命令触发的任何方法），就会引发事件。
您可以通过使用触发器（SourceObject 必须是包含您的事件的 VM）结合 ControlStoryboardAction:[=25 在 XAML 中订阅此事件=]
<i:Interaction.Triggers>
<i:EventTrigger SourceObject="{Binding Mode=OneWay}" EventName="AnimationCalled">
<ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
编辑 2：完整示例
MainViewModel:
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 将包含我们的故事板：
<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>
还有我们的MainWindow：
<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>
应该是这样的：
应该通过故事板将动画移动到这里，点击按钮：
您可以在GitHub
上下载解决方案