Анимация двух UIElements в то же время с использованием WPF C#

Question

У меня здесь есть две анимации: одна для закрытия навигационного меню слайдов с сеткой, а другая - для заполнения прямоугольников прозрачным, когда это меню закрывается.

Я бы хотел, чтобы они оба произошли в одно и то же время. Сейчас анимации происходят в том порядке, в котором они вызываются.

Как я могу реализовать это как можно проще и чище, используя код C#? Я только создаю это приложение, чтобы узнать об анимациях и различных способах управления макетами.

private void _CloseSlideGrid() 
{ 
    DoubleAnimation da = new DoubleAnimation(); 
    da.Duration = TimeSpan.FromSeconds(0.3d); 
    da.DecelerationRatio = 1.0d; 
    da.From = 500.0d; 
    da.To = 0.0d; 
    _slideGrid.BeginAnimation(Grid.WidthProperty, da); 
} 

private void _DisableTransparentCover() 
{ 
    BrushAnimation ba = new BrushAnimation(); 
    ba.Duration = TimeSpan.FromSeconds(0.3d); 
    ba.DecelerationRatio = 1.0d; 
    ba.From = _GetBrush("#77000000"); 
    ba.To = _GetBrush("#00000000"); 
    _tranparentCover.BeginAnimation(Rectangle.FillProperty, ba); 
} 

Обратный вызов для моей кнопки закрытия вызывает мои две частные функции, которые будут обрабатывать анимации.

private void _NavCloseButton_Click(object sender, RoutedEventArgs e) 
{ 
    _CloseSlideGrid(); 
    _DisableTransparentCover(); 
} 

Вот ссылка на альбом Imgur скриншотом из двух состояний моего окна, если вы заинтересуют: http://imgur.com/a/ZaSr1

Позвольте мне знать, если я могу предоставить любую дополнительную информацию,

Спасибо.

Answer 1

Просто добавьте их на одну и ту же раскадровку, и все должно быть хорошо. Я не уверен, что ваша BrushAnimation, но использует ColorAnimation с помощью пути свойств, как показано ниже, работает отлично.

<Window x:Class="WpfApplication1.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" 
     SizeToContent="WidthAndHeight"> 
    <Window.Resources> 
     <Storyboard x:Key="CloseAnimation"> 
      <DoubleAnimation From="500.0" To="0.0" DecelerationRatio="1.0" Duration="00:00:03" 
          Storyboard.TargetName="MyTextBox" Storyboard.TargetProperty="Width"/> 
      <ColorAnimation From="#77000000" To="#00000000" DecelerationRatio="1.0" Duration="00:00:03" 
          Storyboard.TargetName="MyGrid" Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"/> 
     </Storyboard> 
    </Window.Resources> 

    <StackPanel> 

     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition/> 
       <ColumnDefinition/> 
      </Grid.ColumnDefinitions> 

      <TextBox x:Name="MyTextBox" Grid.Column="0" Width="500"/> 

      <Grid x:Name="MyGrid" Grid.Column="1" Background="#77000000" Width="100"/> 
     </Grid> 

     <Button Content="Animate"> 
      <Button.Triggers> 
       <EventTrigger RoutedEvent="Button.Click" > 
        <BeginStoryboard Storyboard="{StaticResource CloseAnimation}"/> 
       </EventTrigger> 
      </Button.Triggers> 
     </Button> 
    </StackPanel> 
</Window> 

Если вы ДЕЙСТВИТЕЛЬНО хотите сделать это в коде позади и не имеете другого пути, это переводится как таковое.

private void _CloseSlideGrid(Storyboard sb) 
{ 
    DoubleAnimation da = new DoubleAnimation(); 
    da.Duration = TimeSpan.FromSeconds(0.3d); 
    da.DecelerationRatio = 1.0d; 
    da.From = 500.0d; 
    da.To = 0.0d; 
    Storyboard.SetTarget(da, MyTextBox); 
    Storyboard.SetTargetProperty(da, new PropertyPath("Width")); 

    sb.Children.Add(da); 
} 

private void _DisableTransparentCover(Storyboard sb) 
{ 
    ColorAnimation ba = new ColorAnimation(); 
    ba.Duration = TimeSpan.FromSeconds(0.3d); 
    ba.DecelerationRatio = 1.0d; 
    ba.From = (Color)ColorConverter.ConvertFromString("#77000000"); 
    ba.To = (Color)ColorConverter.ConvertFromString("#00000000"); 

    Storyboard.SetTarget(ba, MyGrid); 
    Storyboard.SetTargetProperty(ba, new PropertyPath("(Background).(SolidColorBrush.Color)")); 

    sb.Children.Add(ba); 
} 

private void _NavCloseButton_Click(object sender, RoutedEventArgs e) 
{ 
    var sb = new Storyboard(); 

    _CloseSlideGrid(sb); 
    _DisableTransparentCover(sb); 

    sb.Begin(); 
}