如何根据 ViewModel 属性值添加淡入/淡出动画？答案

【问题标题】：How to make add a fade-in/fade-out animation based on ViewModel property value?如何根据 ViewModel 属性值添加淡入/淡出动画？
【发布时间】：2023-03-22 19:24:01
【问题描述】：

我有一个 ViewModel，它公开了字符串属性 PageToolBarVisible，它可以是 true 或 false：： p>

private string _pageToolBarVisible;
public string PageToolBarVisible
{
    get
    {
        return _pageToolBarVisible;
    }

    set
    {
        _pageToolBarVisible = value;
        OnPropertyChanged("PageToolBarVisible");
    }
}

然后在我的 View 我有这个 DataTrigger 相应地显示或隐藏工具栏：

<Style x:Key="PageToolBarStyle" TargetType="Border">
    <Style.Triggers>
        <DataTrigger Binding="{Binding PageToolBarVisible}" Value="false">
            <Setter Property="Visibility" Value="Collapsed"/>
        </DataTrigger>
    </Style.Triggers>
</Style>

<Border Style="{StaticResource PageToolBarStyle}"
    DockPanel.Dock="Bottom" Padding="5 5 5 0" Background="#eee">
    <Grid Background="#eee">
        ...
    </Grid>
</Border>

我现在如何添加动画以便：

当 ViewModel 属性从 true 更改为 false 时，工具栏会淡出
当 ViewModel 属性从 false 更改为 true 时，工具栏淡入

我认为我必须在我的风格中添加这样的东西，但我不知道如何或在哪里：

<BeginStoryboard>
<Storyboard>
    <DoubleAnimation
    Storyboard.TargetName="PageToolBar"
    Storyboard.TargetProperty="(TextBlock.Opacity)"
    From="0.0" To="1.0" Duration="0:0:3"/>
</Storyboard>
</BeginStoryboard>

【问题讨论】：

标签： wpf xaml animation mvvm triggers

【解决方案1】：

您可以将 BeginStoryboard 放在 DataTrigger.EnterActions 中

<DataTrigger Binding="{Binding PageToolBarVisible}" Value="false">
    <DataTrigger.EnterActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation
                Storyboard.TargetName="PageToolBar"
                Storyboard.TargetProperty="(TextBlock.Opacity)"
                From="0.0" To="1.0" Duration="0:0:3"/>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.EnterActions>

    <DataTrigger.ExitActions>
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation
                    Storyboard.TargetName="PageToolBar"
                    Storyboard.TargetProperty="(TextBlock.Opacity)"
                    From="1.0" To="0.0" Duration="0:0:3"/>
            </Storyboard>
        </BeginStoryboard>
    </DataTrigger.ExitActions>
</DataTrigger>

【讨论】：

对于那些对此方法有问题的人，可能需要删除 Storyboard.TargetName 因为它在样式触发器中是不允许的（现在？）。这是答案：stackoverflow.com/a/31929903/2582968