locked
Is it possible to animate movement inside WPF Grid? RRS feed

  • Question

  • Hello all,

    Is it possible to animate elements inside WPF grid? I.e. I want to move object from first row to second row and I want this movement to be animated. I was thinking that TranslateTransform may be helpful here but I didn't find a way how to do that. Any ideas? 

     

    Tuesday, March 23, 2010 1:35 PM

Answers

  • The markup below seems to work.  An alternative is to use an Int32 animation to target the Grid.Row property, but then the Button in this case pops to the next row rather than moving smoothly.

     

    <Page

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Background="#FF404040">

        <Grid Name="Grid1" Height="450" Width="450" Background="LightBlue" ShowGridLines="True">

            <Grid.Triggers>

                <EventTrigger RoutedEvent="FrameworkElement.Loaded">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <BeginStoryboard.Storyboard>

                                <Storyboard TargetName="Button1" TargetProperty="(Button.RenderTransform).(TranslateTransform.Y)">

                                    <DoubleAnimation By="150" Duration="0:0:1" />

                                </Storyboard> 

                            </BeginStoryboard.Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Grid.Triggers>

     

            <Grid.ColumnDefinitions>

                <ColumnDefinition />

                <ColumnDefinition />

                <ColumnDefinition />

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition/>

                <RowDefinition/>

                <RowDefinition/>

            </Grid.RowDefinitions>

            <Button Grid.Column="0" Height="60" Width="90" Content="Button1" Name="Button1">

                <Button.RenderTransform>

                    <TranslateTransform />

                </Button.RenderTransform>

            </Button>

            <Button Grid.Column="1" Height="60" Width="90" Content="Button2"/>

            <Button Grid.Column="2" Height="60" Width="90" Content="Button3"/>

        </Grid>

    </Page>

     

    Hope this helps.

    Tuesday, March 23, 2010 4:23 PM

All replies

  • The markup below seems to work.  An alternative is to use an Int32 animation to target the Grid.Row property, but then the Button in this case pops to the next row rather than moving smoothly.

     

    <Page

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Background="#FF404040">

        <Grid Name="Grid1" Height="450" Width="450" Background="LightBlue" ShowGridLines="True">

            <Grid.Triggers>

                <EventTrigger RoutedEvent="FrameworkElement.Loaded">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <BeginStoryboard.Storyboard>

                                <Storyboard TargetName="Button1" TargetProperty="(Button.RenderTransform).(TranslateTransform.Y)">

                                    <DoubleAnimation By="150" Duration="0:0:1" />

                                </Storyboard> 

                            </BeginStoryboard.Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Grid.Triggers>

     

            <Grid.ColumnDefinitions>

                <ColumnDefinition />

                <ColumnDefinition />

                <ColumnDefinition />

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition/>

                <RowDefinition/>

                <RowDefinition/>

            </Grid.RowDefinitions>

            <Button Grid.Column="0" Height="60" Width="90" Content="Button1" Name="Button1">

                <Button.RenderTransform>

                    <TranslateTransform />

                </Button.RenderTransform>

            </Button>

            <Button Grid.Column="1" Height="60" Width="90" Content="Button2"/>

            <Button Grid.Column="2" Height="60" Width="90" Content="Button3"/>

        </Grid>

    </Page>

     

    Hope this helps.

    Tuesday, March 23, 2010 4:23 PM
  • Yes, it works. Thanks for the help!
    Wednesday, March 24, 2010 7:24 AM