C＃DataTrigger故事板问题

Question

我希望我的网格在单击按钮时显示，并在再次单击时隐藏。 当我在网格中添加一个DataTrigger时，它可以正常工作，但是对于其中两个，它只能在后一个中工作，而当假定为第一个来播放动画时，它基本上什么也不做。 这是代码

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

还有我的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);
    }

问题出在哪里，如果没有，我该怎么做才能实现自己想要的目标？

Answer 1

您的问题是，动画不会停止。 将FillBehavior="Stop"添加到动画中，您将得到想要的东西。

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