Question

I have a StackPanel with UserControls as the children. I would like to apply a Storyboard animation which increases the height of the children from 0 to 100 in a second which creates a smooth slide down animation. This will be called for when a new child is added to the StackPanel – StackPanel1.children.Add(usercontrol1). The StackPanel children are UserControls so I do not want to use DataTemplates. Below is an example layout of what I mean.

Could someone please help me create this as I have no idea how to make it. Thank you.

Answer 1

Well, that’s more or less a copy paste from the link written in the comment above.
First, you need to create your control (let’s say usercontrol1) and give it a unique name for the storyboard to reference it.

EDIT: Below is a code of a simple application that works:

XAML:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="800"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <StackPanel Name="StackPanel1">

    </StackPanel>
    <Button Grid.Row="1" Click="Button_Click">

    </Button>
</Grid>

and code behind:

private void Button_Click(object sender, RoutedEventArgs e)
    {
        var usercontrol1 = new Label();
        usercontrol1.Background = new SolidColorBrush(Colors.Red);
        usercontrol1.Content = "Hello";
        usercontrol1.Name = "UniqueName" + System.Guid.NewGuid().ToString("N");
        RegisterName(usercontrol1.Name, usercontrol1);

        StackPanel1.Children.Add(usercontrol1);
        // Create a DoubleAnimation to animate the width of the button.
        DoubleAnimation myDoubleAnimation = new DoubleAnimation();
        myDoubleAnimation.From = 0;
        myDoubleAnimation.To = 100;
        myDoubleAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(1000));

        // Configure the animation to target the button's Width property.
        Storyboard.SetTargetName(myDoubleAnimation, usercontrol1.Name);
        Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Button.HeightProperty));

        // Create a storyboard to contain the animation.
        Storyboard myWidthAnimatedButtonStoryboard = new Storyboard();
        myWidthAnimatedButtonStoryboard.Children.Add(myDoubleAnimation);
        myWidthAnimatedButtonStoryboard.Begin(usercontrol1);

    }