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>