请先查看以下示例
我想在我的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>
答案 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>