Question

我正在研究UWP的压克力选项，遇到了一个奇怪的问题。本质上，我试图获取“导航”视图以使用自定义的“丙烯酸笔刷”。但是，主窗口背景比Navigationview更透明。我需要使NavigationView与当前主视图一样透明。香港专业教育学院附上一张图片，以帮助澄清这一点。很难解释：

如您在左侧看到的，导航视图不如右侧的主要功能窗口透明。我需要交换一下位置，以便NavigationView比MainPage更透明。

这是我的App.XAML

<Application
    x:Class="BS.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BS">
    <Application.Resources>
        <AcrylicBrush x:Key="CustomAcrylicDark"
                      BackgroundSource="HostBackdrop"
                      TintColor="Gray"
                      TintOpacity="0.6"
                      FallbackColor="Black"/>
        <AcrylicBrush x:Key="CustomAcrylicLight"
                      BackgroundSource="HostBackdrop"
                      TintColor="White"
                      TintOpacity="0.6"
                      FallbackColor="White"/>       
    </Application.Resources>
</Application>

这是我的MainPage.XAML

<Page
    x:Class="BS.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BS"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    RequestedTheme="Dark"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>

    </Page.Resources>
    <Grid>
        <NavigationView Background="{StaticResource CustomAcrylicDark}" PaneTitle="BS" IsBackButtonVisible="Collapsed" CompactModeThresholdWidth="9999" ExpandedModeThresholdWidth="9999" CompactPaneLength="96">
            <NavigationView.MenuItems>
                <NavigationViewItem Name="HItem" Content="HOME" Tag="HOME_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
                <NavigationViewItemSeparator/>
                <NavigationViewItem Name="OItem" Content="OVERVIEW" Tag="O_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
                <NavigationViewItem Name="BItem" Content="BILLS" Tag="B_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
                <NavigationViewItem Name="PItem" Content="PEOPLE" Tag="B_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
                <NavigationViewItem Name="TItem" Content="TRANSFERS" Tag="T_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
                <NavigationViewItem Name="PItem" Content="PAY DATES" Tag="P_Page" FontSize="22" HorizontalAlignment="Center" FontWeight="Bold" Foreground="MediumPurple"/>
            </NavigationView.MenuItems>
        </NavigationView>
    </Grid>
</Page>

谢谢。

Answer 1

NavigationView建立在Splitview之上。在Splitview中，您会找到一个名为PaneBackground的属性，但是NavigationView不允许您设置对其进行创建的PaneBackground的{{1}}属性。

但是，您并不幸运，在研究Splitview的模板时，我发现NavigationView属性绑定到名为PaneBackground的{{1}}上。因此，您的工作是覆盖此属性。像这样：

ThemeResource

给出以下结果：

因此，您可以使用此方法根据需要设置窗格的背景。希望有帮助。

Answer 2

如果您使用的是PaneDisplayMode =“ Left”，则覆盖NavigationViewExpandedPaneBackground

<AcrylicBrush x:Key="NavigationViewExpandedPaneBackground"
                  BackgroundSource="HostBackdrop"
                  TintColor="Gray"
                  TintOpacity="0.6"
                  FallbackColor="Black"/>

这是Microsoft文档的链接 -https://docs.microsoft.com/en-us/windows/uwp/design/controls-and-patterns/navigationview#customizing-backgrounds

UWP在导航视图中使用亚克力

2 个答案: