如何禁用UWP NavigationView紧凑模式下的窗格展开/收缩动画？

我之前做UWP项目时也碰到过一模一样的需求——在秋季创意者更新（1709/16299）版本的NavigationView里，把DisplayMode设为Compact后，点击汉堡按钮的展开/收缩动画太拖沓，想要改成即时切换。以下是两个经过验证的可行方案：

方案一：修改NavigationView的控件模板（最可靠） #

这是最直接且稳定的方法，通过自定义控件模板移除对应的动画：

1. 获取默认模板：
   打开Blend，右键你的NavigationView控件，选择「编辑模板」→「编辑副本」，选择要存放模板的资源字典（比如当前页面的Resources或者全局的ResourceDictionary），Blend会自动生成完整的默认控件模板代码。

2. 移除动画代码：
   在生成的模板代码里，找到以下几个关键的VisualState，删除或注释掉其中的<Storyboard>动画：

   • <VisualState x:Name="PaneOpened">：这里包含Pane展开时的宽度/位移动画
   • <VisualState x:Name="PaneClosed">：这里包含Pane收缩时的宽度/位移动画
   • 针对Compact模式的子状态（比如嵌套在Compact VisualState里的动画片段）

   举个例子，你会看到类似这样的动画代码，直接删掉整个<Storyboard>块即可：

   <VisualState x:Name="PaneOpened">
       <Storyboard>
           <DoubleAnimation Storyboard.TargetName="PaneRoot" Storyboard.TargetProperty="Width" To="320" Duration="0:0:0.33" />
           <!-- 其他相关动画 -->
       </Storyboard>
   </VisualState>
   

3. 应用修改后的模板：
   保存模板后，你的NavigationView会自动使用这个无动画的模板，点击汉堡按钮时Pane就会即时展开/收缩了。

方案二：通过事件拦截停止动画（临时 hack 方案） #

如果不想修改完整模板，可以尝试在Pane的展开/收缩事件里拦截并停止动画，但这个方法相对hacky，可能在某些场景下有兼容性问题：

1. 订阅NavigationView的PaneOpening和PaneClosing事件：

   navView.PaneOpening += NavView_PaneOpening;
   navView.PaneClosing += NavView_PaneClosing;
   

2. 在事件处理方法中，找到Pane对应的动画并停止：

   private void NavView_PaneOpening(NavigationView sender, object args)
   {
       // 找到PaneRoot元素（需要根据模板结构调整名称）
       var paneRoot = sender.FindName("PaneRoot") as FrameworkElement;
       if (paneRoot != null)
       {
           // 停止所有正在运行的动画
           paneRoot.BeginAnimation(FrameworkElement.WidthProperty, null);
       }
   }
   
   private void NavView_PaneClosing(NavigationView sender, NavigationViewPaneClosingEventArgs args)
   {
       var paneRoot = sender.FindName("PaneRoot") as FrameworkElement;
       if (paneRoot != null)
       {
           paneRoot.BeginAnimation(FrameworkElement.WidthProperty, null);
       }
   }
   

   注意：这个方法依赖于默认模板里的元素命名，如果后续模板结构有变更，可能会失效，所以优先推荐方案一。

内容的提问来源于stack exchange，提问作者Cody Wright