XAMLとWPFを使用して、どのようにクリックでプロパティをアニメーション化した後、連続したクリックで逆転ん

Question

私は、プロパティにアニメーションを実行するだけXAMLを使用する方法があるかどうかを知りたいし、次のクリックで逆アニメーションを行うのでしょうか？

ここで私は、スライドの外観を与えるためにBorderオブジェクトの上に持っているトリガーのサンプルです：

<!-- Animates the Width to Slide It Out. -->
<EventTrigger RoutedEvent="Border.MouseLeftButtonUp">
  <BeginStoryboard>
     <Storyboard>
        <DoubleAnimation Storyboard.TargetName="theFilterControl"
             Storyboard.TargetProperty="Width"
             From="16"
             To="170"
             Duration="0:0:.7" />
      </Storyboard>
    </BeginStoryboard>
 </EventTrigger>

Answer 1

あなたはトグルボタンのためのControlTemplateを作成し、その中に境界線を入れることができます。そして、ボタンControlTemplateのは、あなたのアニメーションのIsPressedプロパティを与えることができます。

<ToggleButton>
    <ToggleButton.Template>
        <ControlTemplate  TargetType="{x:Type ToggleButton}">
            <Border x:Name="theFilterControl" Background="#FF686868" 
                BorderBrush="Black" Width="16" />
            <ControlTemplate.Triggers>
                <EventTrigger RoutedEvent="ToggleButton.Checked">
                    <BeginStoryboard> 
                    <Storyboard>
                          <DoubleAnimation Storyboard.TargetName="theFilterControl"
                                 Storyboard.TargetProperty="Width"
                                 From="16"
                                 To="170"
                                 Duration="0:0:.7" />
                    </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
                <EventTrigger RoutedEvent="ToggleButton.Unchecked">
                    <BeginStoryboard>
                        <Storyboard>
                          <DoubleAnimation Storyboard.TargetName="theFilterControl"
                                 Storyboard.TargetProperty="Width"
                                 From="170"
                                 To="16"
                                 Duration="0:0:.7" />
                          </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

Answer 2

Jobiからトグルボタンに

ニースのアイデア、ありがとう！あなたはControlTemplateの外およびユーザーコントロール（またはページ）内のトグルボタンのためのトリガーを定義することによっても、スコープの問題を回避することができる領域、例えばをトリガします。

  <UserControl.Triggers>
    <EventTrigger RoutedEvent="ToggleButton.Checked"
                  SourceName="ExpandCollapseToggleButton">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation 
                        Storyboard.TargetName="SidebarCanvas"
                        Storyboard.TargetProperty="Width"
                        To="0"
                        Duration="0:0:0.15" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="ToggleButton.Unchecked"
                  SourceName="ExpandCollapseToggleButton">
        <EventTrigger.Actions>
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation 
                        Storyboard.TargetName="SidebarCanvas"
                        Storyboard.TargetProperty="Width"
                        To="250"
                        Duration="0:0:0.15" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger.Actions>
    </EventTrigger>
</UserControl.Triggers>

あなたがこれらのスコープの間のターゲットを参照することができないようなControlTemplateの範囲は、ユーザーコントロール/ページとは完全に異なっているようです。