在wpf中移入和移出动画答案

【问题标题】：move in and move out animation in wpf在wpf中移入和移出动画
【发布时间】：2012-10-16 04:39:24
【问题描述】：

请先检查下面的例子

我想在我的 wpf windows 应用程序中执行此操作。请帮帮我

我在 grid.row="0" 中使用了 3 个按钮和 grid.row="1" 中的三个堆栈面板

当用户单击任何按钮时，相应的堆栈面板应移入，而其他应移出。

我是 WPF 新手，我在下面尝试过。

<Grid>

    <Grid.Triggers>
        <EventTrigger SourceName="btnPNB" RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard x:Name="StoryBoard1">
                    <Storyboard>
                        <DoubleAnimation x:Name="dbMoveOut" Storyboard.TargetName="sPanelPNB" 
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                         From="0" To="600" AutoReverse="False">
                        </DoubleAnimation>
                        <DoubleAnimation x:Name="dbMoveIn" Storyboard.TargetName="sPanelOtherBank" 
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                         From="-550" To="0" AutoReverse="False">
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger SourceName="btnOther" RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard x:Name="StoryBoard2">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="sPanelOtherBank" 
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                         From="-550" To="0" AutoReverse="False">
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger SourceName="btnCAIIB" RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard x:Name="StoryBoard3">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="sPanelCAIIB" 
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                         From="-550" To="0" AutoReverse="False">
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Grid.Triggers>

    <Button x:Name="btnPNB" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="20,0,0,0" Content="PNB" Click="moveSP_Click"></Button>
    <Button x:Name="btnOther" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="70,0,0,0" Content="OTher"  Click="moveSP_Click"></Button>
    <Button x:Name="btnCAIIB" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="150,0,0,0" Content="CAIIB" Click="moveSP_Click"></Button>

    <StackPanel x:Name="sPanelPNB" VerticalAlignment="Bottom" Orientation="Horizontal">
        <StackPanel.RenderTransform>
            <TranslateTransform X="-550" Y="0"></TranslateTransform>
        </StackPanel.RenderTransform>
        <Image Source="1_1.jpg" Margin="10,0,0,0" Width="100" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
        <Image Source="1_2.png" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
        <Image Source="1_3.png" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
    </StackPanel>

    <StackPanel x:Name="sPanelOtherBank" VerticalAlignment="Bottom" Orientation="Horizontal">
        <StackPanel.RenderTransform>
            <TranslateTransform X="-550" Y="0"></TranslateTransform>
        </StackPanel.RenderTransform>
        <Image Source="2_1.png" Margin="10,0,0,0" Width="100" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
        <Image Source="2_2.jpg" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
        <Image Source="2_3.png" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
    </StackPanel>

    <StackPanel x:Name="sPanelCAIIB" VerticalAlignment="Bottom" Orientation="Horizontal">
        <StackPanel.RenderTransform>
            <TranslateTransform X="-550" Y="0"></TranslateTransform>
        </StackPanel.RenderTransform>
        <Image Source="3_1.png" Margin="10,0,0,0" Width="100" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
        <Image Source="3_2.png" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
        <Image Source="3_3.jpg" Width="100" Margin="50,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Bottom">
        </Image>
    </StackPanel>




</Grid>

【问题讨论】：

嗨，Deepak，到目前为止，您尝试过什么？向我们展示您的代码。
冲浪管家您好，感谢您的回复。我通过添加代码更新了我的问题。
你的例子有很多动画......这是误导......尽量不要通过指定你的问题和你的期望来浪费人们的时间。
我并不是要浪费任何人的时间。我希望我的应用程序中的动画与示例中所示的相同，如果您知道并想分享，那么请

标签： c# wpf

【解决方案1】：

这就是你想要的。您每次都更新您的面板。我个人会增加持续时间。但是在这个例子中，如果你调整窗口大小，你会注意到你的面板

<Grid>
    <Grid.Triggers>
        <EventTrigger SourceName="btnRed" RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard x:Name="StoryBoard1">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="sPanelRed"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="0"/>
                        <DoubleAnimation Storyboard.TargetName="sPanelBlue"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="-550"/>
                        <DoubleAnimation Storyboard.TargetName="sPanelBlack"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="-550"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger SourceName="btnBlue" RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard x:Name="StoryBoard2">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="sPanelRed"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="600" AutoReverse="False"/>
                        <DoubleAnimation Storyboard.TargetName="sPanelBlue"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="0"/>
                        <DoubleAnimation Storyboard.TargetName="sPanelBlack"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="-550"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger SourceName="btnBlack" RoutedEvent="Button.Click">
            <EventTrigger.Actions>
                <BeginStoryboard x:Name="StoryBoard3">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="sPanelRed"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="600"/>
                        <DoubleAnimation Storyboard.TargetName="sPanelBlue"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="600"/>
                        <DoubleAnimation Storyboard.TargetName="sPanelBlack"
                                     Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                     To="0"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Grid.Triggers>

    <Button x:Name="btnRed" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="20,0,0,0" Content="show red"></Button>
    <Button x:Name="btnBlue" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,359,0" Content="show blue"></Button>
    <Button x:Name="btnBlack" VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,279,0" Content="show black"></Button>
    <StackPanel x:Name="sPanelRed" VerticalAlignment="Bottom" Orientation="Horizontal" Height="10" Background="Red">
        <StackPanel.RenderTransform>
            <TranslateTransform X="-550" Y="0"></TranslateTransform>
        </StackPanel.RenderTransform>
    </StackPanel>

    <StackPanel x:Name="sPanelBlue" VerticalAlignment="Bottom" Orientation="Horizontal" Height="10" Background="Blue">
        <StackPanel.RenderTransform>
            <TranslateTransform X="-550" Y="0"></TranslateTransform>
        </StackPanel.RenderTransform>
    </StackPanel>

    <StackPanel x:Name="sPanelBlack" VerticalAlignment="Bottom" Orientation="Horizontal" Height="10" Background="Black">
        <StackPanel.RenderTransform>
            <TranslateTransform X="-550" Y="0"></TranslateTransform>
        </StackPanel.RenderTransform>
    </StackPanel>
</Grid>

【讨论】：

感谢您的回复，但无需添加 Duration 即可正常工作。我需要的是在按钮点击事件上调用故事板。
检查 HichemC 答案 - 我还尝试设置堆栈面板的背景颜色及其高度 - 它有效（我希望如你所料:)）
请建议我正确运行它的逻辑，它不能正常工作。
没有持续时间它太快了（对我来说）。你能指定 - 你想要什么？您在外面有 2 个面板，您希望它们移动 - 怎么做？
我明白了，谢谢 JleruOHeP。

【解决方案2】：

我确实将您的动画简化为这样的内容，以便您可以处理它：

<Grid>

            <Grid.Triggers>
                <EventTrigger SourceName="btnPNB" RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard x:Name="StoryBoard1">
                            <Storyboard>
                                <DoubleAnimation x:Name="dbMoveOut" Storyboard.TargetName="sPanelPNB" 
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                         From="0" To="600" AutoReverse="False">
                                </DoubleAnimation>
                                <DoubleAnimation x:Name="dbMoveIn" Storyboard.TargetName="sPanelOtherBank" 
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                         From="-550" To="0" AutoReverse="False">
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger SourceName="btnOther" RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard x:Name="StoryBoard2">
                            <Storyboard>

                                <DoubleAnimation Storyboard.TargetName="sPanelOtherBank" 
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                         From="-550" To="0" AutoReverse="False">
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger SourceName="btnCAIIB" RoutedEvent="Button.Click">
                    <EventTrigger.Actions>
                        <BeginStoryboard x:Name="StoryBoard3">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="sPanelCAIIB" 
                                         Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" 
                                         From="-550" To="0" AutoReverse="False">
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Grid.Triggers>

            <Button x:Name="btnPNB" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="20,0,0,0" Content="PNB" ></Button>
            <Button x:Name="btnOther" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="70,0,0,0" Content="OTher"  ></Button>
            <Button x:Name="btnCAIIB" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="150,0,0,0" Content="CAIIB" ></Button>

            <Grid x:Name="sPanelPNB" Height="100" VerticalAlignment="Bottom" >
                <Border Background="Aquamarine"></Border>
            </Grid>

            <Grid x:Name="sPanelOtherBank" Height="100" VerticalAlignment="Bottom" >
                <Grid.RenderTransform>
                    <TranslateTransform X="-550" Y="0"></TranslateTransform>
                </Grid.RenderTransform>
                <Border Background="Blue"></Border>
            </Grid>

            <Grid x:Name="sPanelCAIIB" Height="100" VerticalAlignment="Bottom" >
                <Grid.RenderTransform>
                    <TranslateTransform X="-550" Y="0"></TranslateTransform>
                </Grid.RenderTransform>
                <Border Background="Violet"></Border>
            </Grid>




        </Grid>

【讨论】：