Wie man doppelte Animation auf ein Steuerelement von einem anderen XAML anwendet?

Question

Ich habe eine Schaltfläche, die auf einige andere Steuerelemente (Studio, Animateur, Rekord ...), die in einem anderen XAML befinden Fade-in Animation führen sollte:

<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> 

Wie verweisen diese Kontrollen in meinem aktuellen XAML ? Nur um zu erwähnen, dass ich mvvm verwende, und ich möchte nicht auf Button-Steuerelement innerhalb der ViewModel-Klasse verweisen.

Answer 1

Erstellen Sie ein Ereignis in Ihrem ViewModel und hängen Sie einen Ereignisauslöser an Ihr XAML an (z. B. ControlStoryboardAction), der die Animation startet, sobald das Ereignis ausgelöst wurde.

Edit:

Sie so etwas in Ihrer VM setzen könnte:

public event EventHandler AnimationCalled; 

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

Sobald etwas OnAnimationCalled (jede Methode, die von Ihrem Schaltfläche oder einen Befehl ausgelöst wird) rufen die Veranstaltung wird ausgelöst.

Sie können auf dieses Ereignis innerhalb XAML abonnieren, indem Sie einen Trigger (die SourceObject hat die VM mit Ihrem Fall sein) in Kombination mit dem ControlStoryboardAction:

<i:Interaction.Triggers> 
    <i:EventTrigger SourceObject="{Binding Mode=OneWay}" EventName="AnimationCalled"> 
     <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/> 
    </i:EventTrigger> 
</i:Interaction.Triggers> 

---

Edit 2: Vollständiges Beispiel Die 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); 
     } 
    } 
} 

Ein UserControl, die unsere Storyboard enthalten:

<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> 

Und unsere 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> 

Sollte wie folgt aussehen:

Sollte über Storyboard diese animiert bewegen, indem Sie den Knopf klicken:

Sie die Lösung, die Sie auf GitHub