0

最初に以下の例を確認してください

アニメーションの例

私のwpf Windowsアプリケーションでこれを行いたいです。助けてください

grid.row="0" で 3 つのボタンを使用し、grid.row="1" で 3 つのスタック パネルを使用しています。

ユーザーが任意のボタンをクリックすると、適切なスタック パネルが移動し、他のスタック パネルが移動する必要があります。

私は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>
4

2 に答える 2

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>
于 2012-10-16T07:24:43.347 に答える
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>
于 2012-10-16T07:35:29.960 に答える