Using Xaml and WPF, How do you animate a property on click, and then reverse on successive clicks

Question

I would like to know if there is a way to use only XAML to perform an animation on a property, and then on the next click perform the reverse animation?

Here is a sample of the Trigger I have on a Border object to give the appearance of sliding out:

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

You can create a ControlTemplate for a ToggleButton and put border in it. And Button ControlTemplate can give you IsPressed property for the animation.

<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

Nice idea on the ToggleButton from Jobi, thanks! You can get around the scope issue also by defining the trigger for the ToggleButton outside the ControlTemplate and inside the UserControl (or Page) Triggers area, e.g.

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

It seems the scope of the ControlTemplate is completely different from the UserControl/Page so you can't refer to targets between these scopes.