Question

我有一个StackPanel和一个按钮。按钮内容的初始值应为＆lt;＆lt;单击该按钮时，StackPanel内容应该折叠，按钮文本应该变为＆gt;＆gt;崩溃正确发生的地方。再次按下相同的按钮时，我希望显示的内容和文本应该是＆lt;＆lt;我不确定该怎么做。

<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

我建议在代码中保留一个变量（类似isCollaped），然后在代码后面连接到按钮的click事件。在按钮的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 "<<" }

Answer 2

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

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

2 个答案: