移入并移出wpf中的动画

时间:2012-10-16 04:39:25

标签: c# wpf

请先查看以下示例

animation example

我想在我的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>

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

我确实将动画简化为类似的东西,以便您可以使用它:

<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>