如何仅在XAML中制作汉堡菜单过渡动画

<Button x:Name="MenuButton" Content="☰" Click="MenuButton_Click"/>
<Grid x:Name="MenuPanel" Width="200" Background="LightGray" Visibility="Collapsed">
    <!-- 菜单项内容 -->
</Grid>

private void MenuButton_Click(object sender, RoutedEventArgs e)
{
    if (MenuPanel.Visibility == Visibility.Collapsed)
    {
        VisualStateManager.GoToState(this, "MenuOpen", true);
        MenuPanel.Visibility = Visibility.Visible;
    }
    else
    {
        VisualStateManager.GoToState(this, "MenuClose", true);
        MenuPanel.Visibility = Visibility.Collapsed;
    }
}

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState x:Name="MenuOpen">
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="MenuPanel" Storyboard.TargetProperty="Opacity"
                                 From="0" To="1" Duration="0:0:0.3"/>
                <DoubleAnimation Storyboard.TargetName="MenuPanel" Storyboard.TargetProperty="TranslateTransform.X"
                                 From="-200" To="0" Duration="0:0:0.3"/>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="MenuClose">
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="MenuPanel" Storyboard.TargetProperty="Opacity"
                                 From="1" To="0" Duration="0:0:0.3"/>
                <DoubleAnimation Storyboard.TargetName="MenuPanel" Storyboard.TargetProperty="TranslateTransform.X"
                                 From="0" To="-200" Duration="0:0:0.3"/>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>