Animating two UIElements at the same time using WPF C#

Question

I have these two animations here, one to close a slide out grid navigation menu, and the other to set a rectangles fill to transparent as that menu closes.

I would like these to both happen at the same time. Right now the animations happen in the order they are invoked.

How can I implement this as simple and clean as possible using C# code? I am only creating this application to learn about animations and different ways layout controls.

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);
}

An event callback for my close button invokes my two private functions that will handle the animations.

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

Here is a link to an Imgur album with a screenshot of the two states of my window, if you are intrested: https://i.sstatic.net/UEubH.jpg

Let me know if I can provide any more information,

Thanks.

Answer 1

Just add them on the same storyboard and it should be fine. I'm not sure what your BrushAnimation is but using ColorAnimation with the property path as below is working just fine.

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

If you REALLY want to do this in code behind and have no other way around it translates as such.

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();
}