Is there a way to animate the Margin property in metro style apps

animation, storyboard, windows-8, windows-runtime, xaml

Solution

First off, animating the margin is not a good idea (it will require updating whole tree). What kind of effect do you want to achieve? Do you want to move the object? If yes use DoubleAnimation to change TranslateTransform.

I haven't done this in Windows 8, but I bet is almost the same as in WPF. It's the best to define the animation in XAML

<Window.Resources>

    <Storyboard  x:Key="mainInAnimation">
        <DoubleAnimation Storyboard.TargetName="panelTrans" 
                                Storyboard.TargetProperty="X"
                                BeginTime="0:0:0.2"
                                Duration="0:0:0.3" To="0" >
            <DoubleAnimation.EasingFunction>
                <ExponentialEase  EasingMode="EaseOut"  />
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

Then you need render transform to the panel

    <StackPanel Name="leftPanel"  ... >
        <StackPanel.RenderTransform>
            <TranslateTransform x:Name="panelTrans" X="-10"></TranslateTransform>
        </StackPanel.RenderTransform>

To start animation in code (I prefer this way)

        Storyboard anim = (Storyboard)this.Resources["mainInAnimation"];
        anim.Begin();

Problem

I'm trying to do some animation from code using the Storyboard class. There is no ThicknessAnimation class. And I also tried to build the storyboard using Blend, it doesnt work there. it just jump directly to the new value, no smooth animation. UPDATE: I tried using the TranslateX transform. But when I use it on an image, the images get clipped. What I'm trying to do is animate a big image very slow inside a small grid, so it has this effect (similar to the one inside the Zune and Windows Phone Gallery). Once the image opens I start the animation, this is my code: ``` private void Image_ImageOpened_1(object sender, RoutedEventArgs e) { var img = sender as Image; Storyboard sb = new Storyboard(); var doubleAnimationx = new DoubleAnimation() { To = -100, SpeedRatio = 0.1, From = 0 }; Storyboard.SetTarget(doubleAnimationx, img); Storyboard.SetTargetProperty(doubleAnimationx, "(UIElement.RenderTransform).(CompositeTransform.TranslateX)"); sb.Children.Add(doubleAnimationx); sb.Begin(); } ``` Xaml: ``` <Grid IsSwipeEnabled="True" ItemsSource="{Binding Source={StaticResource cvs1}}" ItemClick="ItemsGridView_ItemClick_1" x:Name="ItemsGridView" Margin="50,20,116,46" SelectionMode="None" IsItemClickEnabled="True" AutomationProperties.AutomationId="ItemsGridView" AutomationProperties.Name="Grouped Items"> <Grid.ItemTemplate> <DataTemplate> <Grid Height="250" VariableSizedWrapGrid.ColumnSpan="{Binding ColumnSpan}" Margin="2"> <Image ImageOpened="Image_ImageOpened_1" Stretch="UniformToFill" Source="{Binding ImageHQ}" > <Image.RenderTransform> <CompositeTransform /> </Image.RenderTransform> </Image> <StackPanel VerticalAlignment="Bottom" Background="#AA000000"> <TextBlock Margin="5,5,5,0" FontSize="26" Text="{Binding Name,Mode=OneWay}" FontFamily="Arial Black" /> <TextBlock Margin="5,0,5,5" FontSize="24" Text="{Binding Section,Mode=OneWay}" Foreground="{Binding SectionColor,Mode=OneWay}" /> </StackPanel> </Grid> </DataTemplate> </Grid.ItemTemplate> </Grid> ```

Original source