wpf 动画在按钮单击时隐藏和折叠面板

Question

我有一个 StackPanel 和一个按钮。 Initallty 按钮内容应为 > 正确发生折叠的位置。再次按下同一个按钮时，我希望显示内容并且文本应该是

<Grid>
    <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"></ColumnDefinition>
         <ColumnDefinition Width="Auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <StackPanel Grid.Column="0" x:Name="stkEasyLocatePanel" Loaded="stkEasyLocatePanel_Loaded" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,0,0,28"></StackPanel>

    <Button Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,5,0,0" Panel.ZIndex="140" Height="20" Width="25" Background="Transparent" Content="&lt;&lt;">
         <Button.Triggers>
             <EventTrigger RoutedEvent="Button.Click">
                 <BeginStoryboard>
                     <Storyboard x:Name="HideStackPanel">
                         <DoubleAnimation Storyboard.TargetName="stkEasyLocatePanel" Storyboard.TargetProperty="Width" From="330" To="0" Duration="0:0:0.3">
                             <DoubleAnimation.EasingFunction>
                                 <PowerEase EasingMode="EaseIn"></PowerEase>
                             </DoubleAnimation.EasingFunction>
                         </DoubleAnimation>
                     </Storyboard>
                 </BeginStoryboard>
                 <BeginStoryboard>
                     <!--This part dosent work. The content collapses and shows on a single click. But I want it to happen on two clicks of same button-->
                     <Storyboard x:Name="ShowStackPanel"> 
                         <DoubleAnimation Storyboard.TargetName="stkEasyLocatePanel" Storyboard.TargetProperty="Width" From="0" To="330" Duration="0:0:0.3">
                             <DoubleAnimation.EasingFunction>
                                 <PowerEase EasingMode="EaseIn"></PowerEase>
                             </DoubleAnimation.EasingFunction>
                         </DoubleAnimation>
                     </Storyboard>
                 </BeginStoryboard>                                  
             </EventTrigger>
        </Button.Triggers>
    </Button>
</Grid>

Answer 1

将 Button 替换为 ToggleButton ，并按原样使用下面的代码，看看这是否能解决您的问题。

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0" Width="330" x:Name="stkEasyLocatePanel" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,0,0,28">
            <Image Source="C:\Users\Public\Pictures\Sample Pictures\Chrysanthemum.jpg"/>
        </StackPanel>

        <ToggleButton Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,5,0,0" Panel.ZIndex="140" Height="20" Width="25" Background="Transparent" Content="&lt;&lt;">
            <ToggleButton.Triggers>               
                <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                    <BeginStoryboard>
                        <Storyboard x:Name="HideStackPanel">
                            <DoubleAnimation Storyboard.TargetName="stkEasyLocatePanel" Storyboard.TargetProperty="Width" From="0" To="330" Duration="0:0:0.3">
                                <DoubleAnimation.EasingFunction>
                                    <PowerEase EasingMode="EaseIn"></PowerEase>
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="&lt;&lt;"  />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="ToggleButton.Checked">
                <BeginStoryboard>
                        <!--This part dosent work. The content collapses and shows on a single click. But I want it to happen on two clicks of same button-->
                        <Storyboard x:Name="ShowStackPanel">
                            <DoubleAnimation Storyboard.TargetName="stkEasyLocatePanel" Storyboard.TargetProperty="Width" From="330" To="0" Duration="0:0:0.3">
                                <DoubleAnimation.EasingFunction>
                                    <PowerEase EasingMode="EaseIn"></PowerEase>
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Content">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="&gt;&gt;"  />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ToggleButton.Triggers>
        </ToggleButton>
    </Grid>

Answer 2

我建议在后面的代码中保留一个变量（类似于isCollaped），然后在后面的代码中连接到按钮的单击事件。在按钮的 click 方法中放置一些逻辑来隐藏或显示堆栈面板。 例如：

XAML

<StackPanel Grid.Column="0" x:Name="stkEasyLocatePanel" Loaded="stkEasyLocatePanel_Loaded" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0,0,0,28"></StackPanel>

//Add the Click event.
<Button Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,5,0,0" Panel.ZIndex="140" Height="20" Width="25" Background="Transparent" Content="&lt;&lt;" Click=Button_Click>

代码隐藏

bool isCollapsed = false;
private void Button_Click(object sender, RoutedEventArgs e)
{
    if (isCollapsed)
    {
        //Create and run show Stackpanel animation
        //Change the content of the button to "<<"
    }
    else
    {
        //Create and run hide Stackpanel animation
        //Change the content of the button to ">>"
    }
    isCollapsed = !isCollapsed;
}

编辑

根据评论中的要求，这是一个关于如何从背后的代码制作动画的示例。

if (isCollapsed)
{
    DoubleAnimation showAnim = new DoubleAnimation();
    showAnim.Duration = TimeSpan.FromSeconds(0.3);
    showAnim.EasingFunction = new PowerEase() { EasingMode = EasingMode.EaseIn };
    showAnim.From = 330;
    showAnim.To = 0;
    stkEasyLocatePanel.BeginAnimation(StackPanel.WidthProperty, showAnim);
    //Change the content of the button to "<<"
}