locked
Animation Grid's Height using StoryBoard

    Question

  • hey...

    I have a Grid like below

    <UserControl ....>

    <Grid x:Name="LayoutRoot">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

    ....

    <StackPanel Grid.Row="2" VertialAlignment="Bottom">

    //child stuff

    </Stack>

    </Grid>

    </UserControl>

    when click a button, I want to move the content in the StackPanel to be lower, so I created a StoryBoard in code behind in the button't click event handler, it looks like :

    Storyboard^ sb = ref new Storyboard();

    TimeSpan ts;

    ts.Duration = 10000000L;


    DoubleAnimation^ da = ref new DoubleAnimation();

    da->Duration = ts;

    da->To = (double)200;

    da->EnableDependentAnimation = true;

    sb->SetTarget(da, LayoutRoot);

    sb->SetTargetProperty(da, "Height");



    sb->Begin();

    but the animation does not work, I also tried to write the storyboard in XAML file in UserControl.Resources node, like:

     <UserControl.Resources>

            <Storyboard x:Name="ResizeAnimation">
                <DoubleAnimation Duration="00:00:03" To="700" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Height" EnableDependentAnimation="True" AutoReverse="True"/>
            </Storyboard>
        </UserControl.Resources>

    and calling ResizeAnimation->Begin(); in the button's event handler, it also does not work, can anyone help here?

    Really appreciate.

    Wednesday, December 17, 2014 10:08 AM

Answers

  • Hi Mike_Zhou,

    Where is your button? Inside the usercontrol or outside usercontrol?

    Following code works fine here by mouse click to begin resizeAnimation.

    <UserControl
        x:Class="App239.MyUserControl1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App239"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300"
        d:DesignWidth="400">
        <UserControl.Resources>
            <Storyboard x:Name="ResizeAnimation">
                <DoubleAnimation Duration="00:00:03" To="700" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Height" EnableDependentAnimation="True" AutoReverse="True" From="1"/>
            </Storyboard>
        </UserControl.Resources>
    
    
        <Grid x:Name="LayoutRoot" Background="Aqua" Height="10" Margin="103,80,0,209">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
    
            
    
            <StackPanel Grid.Row="2" >
    
           
    
                </StackPanel>
            <Button Content="Button" HorizontalAlignment="Left" Height="46" Margin="-93,-67,0,0" VerticalAlignment="Top" Width="62" Click="Button_Click"/>
    
        </Grid>
    
    </UserControl>
    

    Could you give a try and let me know the result?

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by Mike_Zhou Friday, December 19, 2014 11:57 AM
    Thursday, December 18, 2014 3:19 AM
    Moderator

All replies

  • sb->SetTargetProperty(da, "RenderTransform.Height");

    also won't work, FWIW.

    Wednesday, December 17, 2014 10:13 AM
  • Hi Mike_Zhou,

    Where is your button? Inside the usercontrol or outside usercontrol?

    Following code works fine here by mouse click to begin resizeAnimation.

    <UserControl
        x:Class="App239.MyUserControl1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:App239"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        d:DesignHeight="300"
        d:DesignWidth="400">
        <UserControl.Resources>
            <Storyboard x:Name="ResizeAnimation">
                <DoubleAnimation Duration="00:00:03" To="700" Storyboard.TargetName="LayoutRoot" Storyboard.TargetProperty="Height" EnableDependentAnimation="True" AutoReverse="True" From="1"/>
            </Storyboard>
        </UserControl.Resources>
    
    
        <Grid x:Name="LayoutRoot" Background="Aqua" Height="10" Margin="103,80,0,209">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
    
            
    
            <StackPanel Grid.Row="2" >
    
           
    
                </StackPanel>
            <Button Content="Button" HorizontalAlignment="Left" Height="46" Margin="-93,-67,0,0" VerticalAlignment="Top" Width="62" Click="Button_Click"/>
    
        </Grid>
    
    </UserControl>
    

    Could you give a try and let me know the result?

    --James


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Marked as answer by Mike_Zhou Friday, December 19, 2014 11:57 AM
    Thursday, December 18, 2014 3:19 AM
    Moderator
  • Thanks Jamles, that works.

    my button is inside the root grid as well, the reason my code did not work was due to I missed the From attribute in the animation, i'm marking this as answer.

    Friday, December 19, 2014 11:57 AM