El uso de XAML y WPF, ¿Cómo se puede animar una propiedad de clic y, a continuación, invertir en clics sucesivos

Question

Me gustaría saber si hay una manera de utilizar sólo XAML para realizar una animación en una propiedad, y luego en el siguiente clic llevar a cabo la animación inversa?

A continuación se muestra un ejemplo del Disparador tengo en un objeto Border para dar la apariencia de deslizarse hacia fuera:

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

Se puede crear un ControlTemplate para un ToggleButton y poner fronteras en ella. Y Button ControlTemplate le puede dar la propiedad IsPressed para la animación.

<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

Buena idea en la ToggleButton de Jobi, gracias! Usted puede obtener en torno al tema ámbito de aplicación también definiendo el detonante de la ToggleButton fuera del ControlTemplate y dentro del control de usuario (o página) Los disparadores zona, por ejemplo.

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

Parece que el alcance de la ControlTemplate es completamente diferente del control de usuario / Página de modo que no se puede tratar de los objetivos entre estos ámbitos.