c# DataTrigger Storyboard issue

Question

I want my grid to show up on button click, and hide when clicked again. When i add one DataTrigger to grid it works fine, however for two of them it works only on the latter one and when it's supossed to play animation for the first one, it just basicly does nothing. Here is the code

    <Grid Background="Red" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Grid.Style>
            <Style TargetType="Grid">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Open}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="Width" From="0" To="300"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                    <DataTrigger Binding="{Binding Open}" Value="False">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="Width" From="300" To="0"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Style>
        <Button />
    </Grid>

And my ViewModel

   public bool Open
    {
        get
        {
            return _open;
        }
        set
        {
            _open = value;
            RaisePropertyChanged("Open");
        }
    }

    public RelayCommand OpenButtonClicked
    {
        get;
        private set;
    }

    private bool _open;

    public AppMenuViewModel() : base()
    {
        _open = false;
        OpenButtonClicked = new RelayCommand(() => Open = !Open);
    }

Where is the issue, and if there is none, what can I do to achieve what i want?

Answer 1

Your problem is, that animation doesn't stop. Add FillBehavior="Stop" to the animation and you will get what you are after.

<Style TargetType="Grid">
    <Style.Triggers>
        <DataTrigger Binding="{Binding Open}" Value="True">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="Width" From="0" To="300" FillBehavior="Stop"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
        </DataTrigger>
        <DataTrigger Binding="{Binding Open}" Value="False">
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Duration="0:0:1" Storyboard.TargetProperty="Width" From="300" To="0" FillBehavior="Stop"/>
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
        </DataTrigger>
    </Style.Triggers>
</Style>