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

ToggleButtonとButtonを交換し、そのまま次のコードを使用し、これはあなたの問題を解決するかどうかを確認。

<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のようなもの）と、コード内の変数を保つためにお勧めします。ボタンのクリック方法の中で、スタックパネルを隠すか表示するロジックを配置します。たとえば ：BEHIND

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> 

CODE

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

EDIT

コメントで要求されたように、これはどのように例であるだろうアニメーションからコードの背後にある。

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