Matt

Matt

  • NA
  • 38
  • 0

Programmatically Animating a StackPanel using C# in WPF

Jun 24 2017 8:43 PM
I'm writing a C# WPF application that contains two stacked StackPanels. When the user clicks on Panel1 it's height value changes expanding the space between Panel1 and Panel2. When the user clicks on Panel2 it's height is expanded and Panel1's height is set back to it's original value. I am able to get this working in the xaml code:
 

<StackPanel Margin="1,1,1,1" Grid.ColumnSpan="3">

<StackPanel Name="Panel1" Height="26">

<Label HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="Menu_1" Foreground="White" FontWeight="Bold" MouseLeftButtonUp="Panel1_MouseLeftButtonUp">

<Label.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF80CEF3" Offset="0.01"/>

<GradientStop Color="#FF5588A0" Offset="1"/>

</LinearGradientBrush>

</Label.Background>

</Label>

<StackPanel.Triggers>

<EventTrigger RoutedEvent="UIElement.MouseLeftButtonUp">

<BeginStoryboard >

<Storyboard x:Name="Animation1">

<DoubleAnimation Storyboard.TargetName="Panel1" Storyboard.TargetProperty="Height" To="646" Duration="0:0:0.50" AccelerationRatio="0.6" DecelerationRatio="0.4" />

<DoubleAnimation Storyboard.TargetName="Panel2" Storyboard.TargetProperty="Height" To="26" Duration="0:0:0.50" AccelerationRatio="0.6" DecelerationRatio="0.4" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</StackPanel.Triggers>

</StackPanel>

<StackPanel Name="Panel2" Height="26">

<Label HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Content="Menu_2" Foreground="White" FontWeight="Bold">

<Label.Background>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#FF80CEF3" Offset="0.01"/>

<GradientStop Color="#FF5588A0" Offset="1"/>

</LinearGradientBrush>

</Label.Background>

</Label>

<StackPanel.Triggers>

<EventTrigger RoutedEvent="UIElement.MouseLeftButtonUp">

<BeginStoryboard>

<Storyboard x:Name="menu">

<DoubleAnimation x:Name="Menu_1" Storyboard.TargetName="Panel1" Storyboard.TargetProperty="Height" To="26" Duration="0:0:0.50" AccelerationRatio="0.6" DecelerationRatio="0.4" />

<DoubleAnimation x:Name="Menu_2" Storyboard.TargetName="Panel2" Storyboard.TargetProperty="Height" To="646" Duration="0:0:0.50" AccelerationRatio="0.6" DecelerationRatio="0.4" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</StackPanel.Triggers>

</StackPanel>

</StackPanel>

However, I'm trying to do the same thing programmatically, so that I can determine at runtime what the new height should be when the user clicks on a panel. I implemented the following EventHandler, but it doesn't work (the Panel heights do not change).

private void Panel1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

{

DoubleAnimation oMenuAnimation = new DoubleAnimation();

oMenuAnimation.To =646;

oMenuAnimation.Duration = new Duration(new TimeSpan(0, 0, 0, 500));

oMenuAnimation.AccelerationRatio = .6;

oMenuAnimation.DecelerationRatio = .4;

Storyboard s = new Storyboard();

Storyboard.SetTargetProperty(oMenuAnimation, new PropertyPath("Height"));

Storyboard.SetTarget(oMenuAnimation,Panel1);

Storyboard.SetTargetName(oMenuAnimation, "Panel1");

s.Children.Add(oMenuAnimation);

DoubleAnimation oMenuAnimation2 = new DoubleAnimation();

oMenuAnimation2.To = 26;

oMenuAnimation2.Duration = new Duration(new TimeSpan(0, 0, 0, 500));

oMenuAnimation2.AccelerationRatio = .6;

oMenuAnimation2.DecelerationRatio = .4;

Storyboard.SetTargetProperty(oMenuAnimation2, new PropertyPath("Height"));

Storyboard.SetTarget(oMenuAnimation2, Panel2);

s.Children.Add(oMenuAnimation2);

s.Begin();

}

 Does anyone know what I'm doing wrong?

Answers (2)