wpf动画隐藏和折叠按钮上的面板点击

Question

我有一个StackPanel和一个按钮。初始化按钮的内容应该是< <当按钮被点击时，StackPanel的内容应该会崩溃，并且按钮文本应该变成>>其中崩溃正在发生。再次按下相同的按钮时，我希望显示的内容和文本应该是< <，我不确定如何操作。

<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），然后在后面的代码转播到按钮的单击事件。在按钮的点击方法内放置一些逻辑来隐藏或显示堆栈面板。 例如：

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