如何在stackpanel动画中为项目设置动画

Question

我正在研究wpf动画。

我需要从左到右翻译网格内的堆栈面板。

它从grid.it后面开始转换。但是工作但是堆叠面板的某些部分由网格裁剪。

如果增加宽度，我可以看到完整的堆栈面板。如何在不增加网格宽度的情况下解决此问题。

这是我的代码：

    <Grid x:Name="OuterGrid">
        <Grid.Background>
            <ImageBrush ImageSource="pack://application:,,,/Resources/Images/Home/home_bg@2x.png"></ImageBrush>
        </Grid.Background>
        <Grid x:Name="imgBase" Opacity="0">
            <Grid.Background>
                <ImageBrush ImageSource="pack://application:,,,/Resources/Images/AboutBasheer/Characters/kadapath_bg@2x.jpg"></ImageBrush>
            </Grid.Background>
        </Grid>
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"  Margin="0,-10,0,0" VerticalAlignment="Top">
            <StackPanel.Resources>
                <Style TargetType="{x:Type Image}">
                    <Setter Property="Margin" Value="30"/>
                </Style>
            </StackPanel.Resources>

            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon1@2x.png" Width="101" Height="86"  x:Name="topItem1" MouseLeftButtonDown="topItem1_MouseLeftButtonDown">

            </Image>
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon2@2x.png" Width="145" Height="86"  x:Name="topItem2" MouseLeftButtonDown="topItem2_MouseLeftButtonDown">

            </Image>
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon3@2x.png" Width="172" Height="86"  x:Name="topItem3" >

            </Image>
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon4@2x.png" Width="96" Height="86"  x:Name="topItem4" >

            </Image>
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon5@2x.png" Width="139" Height="86"  x:Name="topItem5" >

            </Image>
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/p_icon6@2x.png" Width="139" Height="86"  x:Name="topItem6" >

            </Image>
        </StackPanel>
        <StackPanel Orientation="Horizontal" VerticalAlignment="Center" x:Name="AllCharacters" Opacity="0">
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/aanavari@2x.png" Width="256" Height="432"  x:Name="imgRaman"  />
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/kochutrasia@2x.png" Width="256" Height="432"  x:Name="imgThreysya"  />
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/ponkurishe_thoma@2x.png" Width="256" Height="432"  x:Name="imgKurish"  />
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/synaba@2x.png" Width="256" Height="432"  x:Name="imgSynaba"  />
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/moothappa@2x.png" Width="256" Height="432"  x:Name="imgMandan"  />
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/thorappan@2x.png" Width="256" Height="432"  x:Name="imgThorappan"  />
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/naanu@2x.png" Width="256" Height="432"  x:Name="imgnanu"  />
            <Image Source="pack://application:,,,/Resources/Images/AboutBasheer/Characters/pappuni@2x.png" Width="256" Height="432"  x:Name="imgdriver"  />
            <StackPanel.RenderTransform>
                <TransformGroup>
                    <TranslateTransform X="1500" Y="0"></TranslateTransform>
                </TransformGroup>
            </StackPanel.RenderTransform>
        </StackPanel>
        <Grid  VerticalAlignment="Bottom" HorizontalAlignment="Center" x:Name="bottombar" Width="1366" >
            <Grid.Background>
                <ImageBrush ImageSource="pack://application:,,,/Resources/Images/Home/book_menubg@2x.png"/>
            </Grid.Background>

            <Grid.RenderTransform>
                <TranslateTransform Y="117" />
            </Grid.RenderTransform>

            <Button Width="104" Height="65" HorizontalAlignment="Right" Margin="0,-120,20,80"  Style="{StaticResource MyButtonStyle}" Click="Button_Click">
                <Button.Background>
                    <ImageBrush ImageSource="pack://application:,,,/Resources/Images/Home/main_menuButton@2x.png" />
                </Button.Background>
            </Button>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"  Margin="0,20,0,0">
                <StackPanel.Resources>
                    <Style TargetType="{x:Type Image}">
                        <Setter Property="Margin" Value="20"/>
                    </Style>
                </StackPanel.Resources>

                <Image Source="pack://application:,,,/Resources/Images/Home/aboutBasheerIcon@2x.png" Width="84" Height="73"  x:Name="item1" />
                <Image Source="pack://application:,,,/Resources/Images/Home/kithikalIcon@2x.png" Width="88" Height="75"  x:Name="item2"/>
                <Image Source="pack://application:,,,/Resources/Images/Home/kathakalKaanamIcon@2x.png" Width="135" Height="74"  x:Name="item3"/>
                <Image Source="pack://application:,,,/Resources/Images/Home/NighanduIcon@2x.png" Width="78" Height="71"  x:Name="item4"/>
                <Image Source="pack://application:,,,/Resources/Images/Home/kathakalKelkaamIcon@2x.png" Width="150" Height="78"  x:Name="item5"/>
            </StackPanel>
        </Grid>
    </Grid>