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.stack.imgur.com/UEubH.jpg

Let me know if I can provide any more information,

Thanks.

I think there is some problem in your `BrushAnimation` realization. I've tested two `DoubleAnimations` - all worked fine, animations played simultaneously. — bars222, Jan 15 '16 at 06:22
As the name `BeginAnimation` implies, the method starts an animation and returns immediately. Calling BeginAnimation subsequently for two different animation makes them run at the same time. A Storyboard isn't necessary. — Clemens, Jan 15 '16 at 11:51
BrushAnimation is a class that someone made that inherits from AnimationTimeline. I found it here. http://stackoverflow.com/questions/8096852/brush-to-brush-animation. Any idea what I would have to do to the Brushanimation to make it work at the same time? — Ay Rue, Jan 15 '16 at 13:54
Also, maybe the only reason the two doubleanimation work is because they are of the same type. I want to test using another .net animation as my second animation to see if they will run async like the two doubleanimations do. — Ay Rue, Jan 15 '16 at 13:58

Janne Matikainen · Accepted Answer · 2016-01-15T14:45:38.207

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

Any idea how I would implement this in c# rather than XAML. I've never used XAML and its not immediately clear what the code equivilent to this markup is. Thanks! — Ay Rue, Jan 15 '16 at 13:59

Animating two UIElements at the same time using WPF C#

1 Answers1