Question

我有一个显示NavigationView的{{1}}控件：

AutoSearchBox

对于某些页面，我不想显示<NavigationView Style="{StaticResource CompactNavigationViewStyle}" x:Name="NavigationView" OpenPaneLength="280" VerticalAlignment="Stretch" VerticalContentAlignment="Stretch" AlwaysShowHeader="False"> <NavigationView.AutoSuggestBox> <AutoSuggestBox PlaceholderText="Search" QueryIcon="Find" Width="235" x:Name="SearchTxt" QuerySubmitted="OnSearch" /> </NavigationView.AutoSuggestBox>（即Search），因此在SettingPage NavigationView事件中我添加了以下代码：

ItemInvoked

private void NavigationView_ItemInvoked(NavigationView sender, NavigationViewItemInvokedEventArgs args) { if (!args.IsSettingsInvoked) { string tag = (args.InvokedItem as string); switch(tag) { case "settingpage": case "exportpage": SearchTxt.Visibility = Visibility.Collapsed; break; default: SearchTxt.Visibility = Visibility.Visible; break; } // Code to load new page to Frame here } }隐藏AutoSuggestBox，但紧凑模式下仍显示NavigationView图标，如何隐藏此图标？

Answer 1

不幸的是，使用NavigationView控件似乎无法找到您要查找的内容。然而，这是一个相对较新的控件，因此Microsoft可能会在将来更新它。

出于技术原因，将值设置为AutoSuggestBox属性不仅仅是向AutoSuggestBox添加NavigationView;它还会更改NavigationView的其他一些内部（例如，指定在窗格折叠时显示搜索图标的内容）。

AutoSuggestBox属性是一个可选属性，旨在包含一个“允许应用级搜索”的搜索框。这表明它被设计为在整个应用程序存在时始终可见（尽管我可以看到在某些页面上禁用它的合理论据）。但简单地说，看起来这是一个控件不适用的用例。

关于解决方法的一些想法：

选项1

您可以随意放置所需内容的地方是NavigationView.Footer。您可以实现类似上述代码的内容，然后调整StackPanel的可见性属性。

当然，这个选项的主要缺点是页脚卡在底部，这可能是放置搜索栏的奇怪位置。您还需要为StackPanel提供一些视觉样式，以模仿其余NavigationView上的悬停和点击效果。

<StackPanel Orientation="Horizontal"
            Margin="10">
    <TextBlock Style="{StaticResource HamburgerMenuIconStyle}"
               Text="&#xE094;"></TextBlock>
    <TextBlock Style="{StaticResource HamburgerMenuItemTextStyle}"
               Text="Home"></TextBlock>
</StackPanel>

然后是Page.Resources的支持样式，以便上面的绑定工作（您可能需要使用边距和字体大小的数字，但这看起来对我很好）：

<Page.Resources>
    <Style x:Key="HamburgerMenuIconStyle" TargetType="TextBlock">
        <Setter Property="FontFamily" Value="Segoe MDL2 Assets"></Setter>
        <Setter Property="FontSize" Value="18"></Setter>
        <Setter Property="Margin" Value="5,0,0,0"></Setter>
    </Style>

    <Style x:Key="HamburgerMenuItemTextStyle" TargetType="TextBlock">
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
        <Setter Property="Margin" Value="15,0,20,0"></Setter>
        <Setter Property="FontSize" Value="16"></Setter>
    </Style>
</Page.Resources>

选项2

您可以使用NavigationView实现自己的SplitView。这实际上并不太难，甚至在以下链接中有一个很棒的教程（我已经用于几个个人项目）：https://mva.microsoft.com/en-US/training-courses/windows-10-development-for-absolute-beginners-14541?l=4DLgEZ0qB_5705244527。具体请参见视频＃22，如果该链接未打开该链接。

实现自己的功能足以实现视觉效果和导航功能。但遗憾的是，内置NavigationView控件中更高级的功能实现起来要花费大量时间，例如内置的“后退”导航支持和内置的流畅设计样式。您可以将其包装到UserControl或自定义控件中，以便您可以在其他项目中重复使用它，但初始时间投资仍然很高。

值得注意的是，您应首先考虑使用NavigationView对用户施加的要求（如果您尚未这样做）：

NavigationView是在Fall Creator的更新中引入的，因此任何用户都必须拥有比此更新的版本。大约90％的Windows 10用户都这样做，所以对大多数人来说这是非常安全的。
最近推出了NavigationView的后退导航功能，特别是在v10.0.17110.0中。这仍然在Windows Insider中，并且还没有发布（我相信），所以这个功能对于更大的受众来说可能不是一个好的选择。我指出这一点的原因是，为了吸引更多的观众，你需要自己实现后面的功能，因此编写自己的NavigationView的障碍可能不会像看起来那么高。

希望有所帮助！

Answer 2

<NavigationViewItem
    x:Name="NaviSearchItem"
    Icon="Find"
    Visibility="Collapsed" />
<NavigationViewItem x:Name="NaviSearchBarItem">
    <AutoSuggestBox
        x:Name="NaviSearchBar"
        PlaceholderText="Search"
        QueryIcon="Find" />
</NavigationViewItem>

您可以用AutoSuggestBox包围NavigationViewItem并将“搜索”按钮放在其上方。然后，您需要设置NaviSearchBarItem而不是AutoSuggestBox的可见性。这样可以完美地隐藏AutoSuggestBox。

但是，此解决方案存在一个小问题。当您单击NaviSearchBarItem以打开窗格时，选项卡的动画（指示所选项目的蓝色管道）仍将滑动到NaviSearchBarItem，然后消失。理想的解决方案应该是蓝色指示器仍保留在原始项目上。我不知道该如何解决。

在NavigationView中隐藏AutoSuggestBox

2 个答案: