Gibt es eine Möglichkeit zu animieren, die Margin-Eigenschaft im metro style apps

Ich versuche zu tun, einige Animationen von code mithilfe der Storyboard-Klasse. Es gibt keine ThicknessAnimation Klasse. Und ich habe auch versucht zu erstellen das storyboard, mit Mischung, es nicht dort zu arbeiten. es springt einfach direkt auf den neuen Wert, keine flüssige animation.

UPDATE: ich habe versucht mit der TranslateX verwandeln. Aber wenn ich es auf einem Bild, die Bilder werden abgeschnitten.
Was ich versuche zu tun, ist das animieren eines großen Bildes sehr langsam in einem kleinen Gitter, so hat es diesen Effekt (ähnlich der Innenseite der Zune-und Windows Phone-Galerie). Sobald das Bild geöffnet, ich starte die animation, das ist mein 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>
InformationsquelleAutor Ateik | 2012-05-08
Schreibe einen Kommentar