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