UWP如何获得内容窗格投影的NavigationView内阴影？答案

【问题标题】：UWP How to get a NavigationView inner shadow projected by the content pane?UWP如何获得内容窗格投影的NavigationView内阴影？
【发布时间】：2020-01-04 11:23:12
【问题描述】：

查看https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/navigationview 的 UWP 导航视图文档，我看到多个示例，其中 NavigationView 在右侧有一个内部阴影，由内容框架投影（见下图）。

有没有办法重现这种风格？通过尝试文档和项目示例中可用的 NavigationView 示例，我得到了一些不同的东西，其中左侧窗格是在右侧投影阴影的窗格（当导航视图打开时），这正好相反。

【问题讨论】：

你试图对抗默认行为的原因是什么？导航窗格是用户与之交互的 UI 元素。阴影表示导航窗格位于前景中。让内容在导航窗格上投下阴影似乎违反直觉。
我的目标不是对抗默认行为。我很欣赏文档示例中的风格，并想了解如何复制它。
正如@IInspectable 所说，阴影表示导航窗格位于前台，这是设计使然。在内容部分加阴影是不可行的。
@Faywang-MSFT 好的，感谢您的回复。所以这意味着文档不正确。
可以，不过这个需要确认，我会向团队汇报的。

标签： windows xaml uwp uwp-xaml

【解决方案1】：

现在可以了 https://docs.microsoft.com/en-us/windows/uwp/design/layout/depth-shadow

<Grid>
   <Grid x:Name="Sidebar" Background="{ThemeResource SystemControlAcrylicWindowBrush}" />

   <Frame x:Name="Frame" Translation="0,0,10">
      <Windows10version1903:Frame.Shadow>
          <ThemeShadow x:Name="Shadow"/>
      </Windows10version1903:Frame.Shadow>
   </Frame>
</Grid>
Shadow.Receivers.Add(Sidebar);

【讨论】：

【解决方案2】：

如果您使用的是 WinUI NavigationView 控件，您还可以绕过它在必要时添加所需的 ThemeShadows，但如果您还想在 Overlay 模式下保持股票阴影行为，则涉及更多：

Page.xaml

<NavigationView x:Name="NavigationView" Loaded="ApplyShadowToSideBar">
   <!-- Your navView content --> 
   <Grid>
         <Grid.Shadow>
              <ThemeShadow x:Name="ContentShadow" />
         </Grid.Shadow>
   </Grid>
</NavigationView>

Page.xaml.cs：

private void ApplyShadowToSideBar(object sender, RoutedEventArgs e)
{
    // Some VisualTree hacking to get the content grid for left display mode and cast shadows over it
    // Names of the ControlTemplates taken from https://github.com/microsoft/microsoft-ui-xaml/blob/master/dev/NavigationView/docs/rendering.md#displaymode-left
    Grid rootGrid = VisualTreeHelper.GetChild(NavigationView, 0) as Grid;
    if (rootGrid != null)
    {
        // Get the pane's grid, which receives all our shadows
        var paneContentGrid = rootGrid.FindName("PaneContentGrid") as Grid;

        // Shadow emitters for the header. The header has grids for both its content and top padding, so we need to shadow up both of them.
        var headerContent = rootGrid.FindName("HeaderContent") as ContentControl;
        var headerTopContent = rootGrid.FindName("ContentTopPadding") as Grid;
        var headerShadow = new ThemeShadow();
        var headerTopShadow = new ThemeShadow();

        // Remove default HeaderContent margin so the shadow can be cast correctly.
        // You can set NavigationViewHeaderMargin again in your own content to match.
        headerContent.Margin = new Thickness(0);

        // Set receivers
        headerShadow.Receivers.Add(paneContentGrid);
        headerTopShadow.Receivers.Add(paneContentGrid);
        ContentShadow.Receivers.Add(paneContentGrid);

        headerContent.Shadow = headerShadow;
        headerContent.Translation += new Vector3(0, 0, 32);

        headerTopContent.Shadow = headerTopShadow;
        headerTopContent.Translation += new Vector3(0, 0, 32);

        shellFrame.Translation += new Vector3(0, 0, 32);
    }
}

如果您为 NavigationView 使用 Header，则必须手动为其添加边距，并确保在 NavView 处于 Minimal 模式时删除所述边距，这样您就不会得到额外的空白。

【讨论】：