How to animate the width of an element multiple times in xaml?

Question

I'm trying to add a Split View control on my WPF app that looks like the UWP one. But when I click on the "Expand menu button"(the hamburger button) three times it just doesn't work anymore.

On the first click it expands to 358px. (Ok)
On the second click it returns to 48px (Ok)
On the third click it does nothing... it should expand the panel to 358px again but it doesn't.

I don't have any C# code behind, only this XAML code for the animation:

            <Style TargetType="StackPanel" x:Key="expand">
            <Style.Triggers>
                <!--TO EXPAND-->
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding IsPressed, ElementName=btnExpandirMenu}" Value="True"/>
                        <Condition Binding="{Binding Width, ElementName=menuLateral}" Value="48"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Width" To="358" Duration="0:00:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </MultiDataTrigger.EnterActions>
                </MultiDataTrigger>
                <!--TO CLOSE-->
                <MultiDataTrigger>
                    <MultiDataTrigger.Conditions>
                        <Condition Binding="{Binding IsPressed, ElementName=btnExpandirMenu}" Value="True"/>
                        <Condition Binding="{Binding Width, ElementName=menuLateral}" Value="358"/>
                    </MultiDataTrigger.Conditions>
                    <MultiDataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="Width" To="48" Duration="0:00:0.2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </MultiDataTrigger.EnterActions>
                </MultiDataTrigger>
            </Style.Triggers>
        </Style>

And here is the complete XAML code:

<Window x:Class="LojaDeEletronicos.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:LojaDeEletronicos"
        mc:Ignorable="d"
        Title="MainWindow" Height="438" Width="640">
    <Grid>
        <Grid.Resources>
            <Style TargetType="StackPanel" x:Key="expand">
                <Style.Triggers>
                    <!--TO EXPAND-->
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding IsPressed, ElementName=btnExpandirMenu}" Value="True"/>
                            <Condition Binding="{Binding Width, ElementName=menuLateral}" Value="48"/>
                        </MultiDataTrigger.Conditions>
                        <MultiDataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Width" To="358" Duration="0:00:0.2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiDataTrigger.EnterActions>
                    </MultiDataTrigger>
                    <!--TO CLOSE-->
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding IsPressed, ElementName=btnExpandirMenu}" Value="True"/>
                            <Condition Binding="{Binding Width, ElementName=menuLateral}" Value="358"/>
                        </MultiDataTrigger.Conditions>
                        <MultiDataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="Width" To="48" Duration="0:00:0.2"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiDataTrigger.EnterActions>
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>

            <Style x:Key="CleanButton" TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Background="{TemplateBinding Background}" BorderThickness="0">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Opacity" Value="0.8"/>
                        <Setter Property="Cursor" Value="Hand"/>
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type Button}">
                                    <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
                                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
            <Style x:Key="menuButton" TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Background="{TemplateBinding Background}" BorderThickness="0">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>

                </Setter>
                <Setter Property="Background" Value="#eee"/>

                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#ddd"/>
                        <Setter Property="Cursor" Value="Hand"/>
                    </Trigger>
                    <DataTrigger Binding="{Binding IsMouseOver, ElementName=btnHome3}" Value="True" >
                        <Setter Property="Background" Value="#ddd" />
                    </DataTrigger>

                </Style.Triggers>
            </Style>
            <Style x:Key="menuButtonExpanded" TargetType="{x:Type Button}">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Background="{TemplateBinding Background}" BorderThickness="0">
                                <ContentPresenter HorizontalAlignment="Left" Margin="20,0,0,0" VerticalAlignment="Center"/>
                            </Border>

                        </ControlTemplate>
                    </Setter.Value>

                </Setter>
                <Setter Property="Background" Value="#eee"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#ddd"/>
                        <Setter Property="Cursor" Value="Hand"/>

                    </Trigger>
                </Style.Triggers>
            </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="48"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="48" />
            <RowDefinition Height="1*" />
        </Grid.RowDefinitions>

        <!--START OF RELEVANT CONTENT-->




        <StackPanel Name="menuLateral"  Grid.Row="1" Grid.Column="0" Grid.RowSpan="2" Width="48"  Grid.ColumnSpan="2" HorizontalAlignment="Left" Background="#eee" Style="{StaticResource expand}">
            <!--#region Home Button -->
            <Button Name="btnHome" HorizontalAlignment="Left" FontSize="21" Foreground="#333" Style="{StaticResource menuButton}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Width="48" Height="44" VerticalAlignment="Top" FontFamily="Segoe MDL2 Assets" Content="&#xE10F;"/>
            <!--#endregion-->
            <Separator  Width="30"  Height="5" Margin="9,0,0,0" HorizontalAlignment="Left"  VerticalAlignment="Top"/>
            <!--#region Products Button -->
            <Button Name="btnProdutos"  HorizontalAlignment="Left" Style="{StaticResource menuButton}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Width="48" Height="44" VerticalAlignment="Top">
                <Image x:Name="product_icon_png"  Tag="fdsf" Source="product_icon.png" RenderOptions.BitmapScalingMode="HighQuality" Width="25" Height="25" Stretch="Fill" />
            </Button>
            <!--#endregion-->
        </StackPanel>

        <Rectangle Grid.Column="1" Fill="#FF7B7BFF" Grid.Row="0" />

        <Button Name="btnExpandirMenu" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="20" Foreground="White" Background="#333" Style="{StaticResource CleanButton}" Click="btnExpandirMenu_Click"/>

        <StackPanel Name="MenuExpandido" Grid.Column="1" Background="#eee" Width="310" Visibility="Collapsed" Style="{StaticResource expand}" HorizontalAlignment="Left" Grid.Row="0" Grid.RowSpan="2">
            <Button Name="btnHome3" Margin="0,48,0,0" Content="Página Inicial"  Foreground="#444" FontSize="16" Style="{StaticResource menuButtonExpanded}" Height="44"/>
        </StackPanel>

    </Grid>
</Window>

Answer 1

Probably it really has to do something with some kind of floating precision.

The simplest fix i can imagine is the following:

<Style TargetType="StackPanel" x:Key="expand">
    <Setter Property="Width" Value="48"></Setter>

    <Style.Triggers>

        <!--TO EXPAND-->
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding IsPressed, ElementName=btnExpandirMenu,PresentationTraceSources.TraceLevel=High}" Value="True" />
                <Condition Binding="{Binding Width, ElementName=menuLateral,PresentationTraceSources.TraceLevel=High, UpdateSourceTrigger=PropertyChanged}" Value="48" />
            </MultiDataTrigger.Conditions>
            <MultiDataTrigger.EnterActions>
                <StopStoryboard BeginStoryboardName="OUT"/>
                <BeginStoryboard Name="IN">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Width" To="358" Duration="0:00:0.2"/>
                    </Storyboard>
                </BeginStoryboard>
            </MultiDataTrigger.EnterActions>
        </MultiDataTrigger>
        <!--TO CLOSE-->
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding IsPressed, ElementName=btnExpandirMenu}" Value="True"/>
                <Condition Binding="{Binding ActualWidth, ElementName=menuLateral}" Value="358"/>
            </MultiDataTrigger.Conditions>
            <MultiDataTrigger.EnterActions>
                <StopStoryboard BeginStoryboardName="IN"/>
                <BeginStoryboard Name="OUT">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Width" To="48" Duration="0:00:0.2"/>
                    </Storyboard>
                </BeginStoryboard>
            </MultiDataTrigger.EnterActions>
        </MultiDataTrigger>
    </Style.Triggers>
</Style>

As you can see, i just named the StoryBoards and also used a StopStoryboard before starting the next one.

That should fix your issue.