WPF - 更改属性时触发 Storyboard

Question

我想在更改属性时触发导航打开 animation。

我的MainWindow包含一个汉堡式导航栏，如下所示：

<Grid x:Name="NavBarMenu" HorizontalAlignment="Left" Width="70" Background="#5757AE">
            <Button x:Name="ButtonMenu" HorizontalAlignment="Right" VerticalAlignment="Top"
                    Background="{x:Null}"
                    BorderBrush="{x:Null}" Width="70" Height="70">
                <Button.Style>
                    <Style TargetType="{x:Type Button}">
                        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type Button}">
                                    <Border x:Name="Border" Background="{StaticResource Brush.Secondary}">
                                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Background" Value="{StaticResource Brush.Secondary}"
                                                    TargetName="Border" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Button.Style>
                <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Rectangle x:Name="Rectangle" Width="30" Height="5" Margin="0 0 0 0" Fill="White"
                               HorizontalAlignment="Center" VerticalAlignment="Top" RenderTransformOrigin="-0,0.5">
                        <Rectangle.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform />
                                <SkewTransform />
                                <RotateTransform />
                                <TranslateTransform />
                            </TransformGroup>
                        </Rectangle.RenderTransform>
                    </Rectangle>
                    <Rectangle x:Name="Rectangle1" Width="30" Height="5" Margin="0 20 0 0 " Fill="White"
                               HorizontalAlignment="Center" VerticalAlignment="Top" RenderTransformOrigin="-0,0.5">
                        <Rectangle.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform />
                                <SkewTransform />
                                <RotateTransform />
                                <TranslateTransform />
                            </TransformGroup>
                        </Rectangle.RenderTransform>
                    </Rectangle>
                    <Rectangle x:Name="Rectangle2" Width="30" Height="5" Margin="0 10 0 0" Fill="White"
                               HorizontalAlignment="Center" VerticalAlignment="Top" />
                </Grid>
            </Button>
            <StackPanel Margin="0,70,0,0" Name="NavIcons">
                <StackPanel Name="Mandatory">
                    <components:NavButton ButtonName="Add Workbench" Icon="Solid_Plus"/>
                    <components:NavButton ButtonName="Home" Icon="Solid_Home" />
                </StackPanel>
                <Label Margin="0, 40, 0, 0" />
                <StackPanel Name="UserConfigurableNavIcons">

                </StackPanel>
            </StackPanel>
        </Grid>

下面是 NavButton 组件的外观：

<UserControl x:Class="NewGUI.resources.components.NavButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:fa5="http://schemas.fontawesome.com/icons/"
             xmlns:components="clr-namespace:NewGUI.resources.components"
             mc:Ignorable="d"
             d:DesignHeight="70" d:DesignWidth="300" MinHeight="70"
             DataContext="{Binding RelativeSource={RelativeSource self}}">
    <Button VerticalAlignment="Top"
            Background="{x:Null}"
            BorderBrush="{x:Null}" Height="70" Name="Stuff">
        <Button.Style>
            <Style TargetType="{x:Type Button}">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="VerticalContentAlignment" Value="Stretch" />
                <Setter Property="FocusVisualStyle" Value="{x:Null}" />
                <Setter Property="Background" Value="{StaticResource Brush.BtnBackground}" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border x:Name="Border" Background="{TemplateBinding Background}">
                                <ContentPresenter VerticalAlignment="Center" />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" Value="{StaticResource Brush.BtnHover}" TargetName="Border" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Button.Style>
        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <Label Name="LabelThing" Content="{Binding ButtonName}"
                   VerticalAlignment="Center" Foreground="White" Opacity="0" 
                   FontSize="14" FontWeight="Bold"
                   Margin="20, 0, 0, 0"/>
            <fa5:SvgAwesome Name="IconThing" Icon="{Binding Icon}" Height="40" Width="40"
                            Margin="0,0,0,0"
                            Foreground="White" HorizontalAlignment="Center"
                            VerticalAlignment="Center">
            </fa5:SvgAwesome>
        </Grid>
    </Button>
    
</UserControl>

我的MainWindowViewModel包含一个属性NavBarOpen ：

public class MainWindowViewModel : ObservableObject
{

    private bool _navBarOpen = false;

    
    public bool NavBarOpen
    {
        get => _navBarOpen;
        set => SetProperty(ref _navBarOpen, value);
    }

}

我想做的是启动 storyboard，它会在NavBarOpen更改时打开菜单。 我尝试在包含 NavBar 的NavBarMenu网格中使用DataTrigger ，但这没有成功。 我愿意接受任何建议，否则我不使用将 _navBarOpen 属性绑定到 MainWindow 的代码隐藏方法，因为我希望能够从其他类中关闭 NavBar。