堆棧內存溢出
  簡體   English   中英

在WPF中移動動畫

[英]move in and move out animation in wpf

 原文  2012-10-16 04:39:24  2   2    c#/ wpf

問題描述

請先檢查以下示例

動畫示例

我想在我的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 個解決方案

解決方案1
 1 已采納  2012-10-16 07:24:43

這就是你想要的。 您每次都更新面板。 我個人而言，會增加持續時間。 但是在此示例中，如果您調整窗口大小，則會注意到面板 

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

解決方案2
 0  2012-10-16 07:35:29

我確實將您的動畫簡化為這樣，以便您可以進行處理： 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 將silverlight動態動畫移動到WPF 如何在WPF中使用動畫使文本塊向上移動（浮動） 如何在C＃WPF中繪制圓並將其作為動畫移動 WPF：觸發動畫-沿Y軸向下移動控件 動畫左右移動 單擊以移動動畫不起作用 WPF-移動GroupBox標頭 WPF中的彈出移動 如何移動 WPF 中的按鈕 在 wpf 中移動無邊框 window
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM