将 AutoSuggestBox 添加到汉堡导航的正确方法？答案

【问题标题】：Proper way to add an AutoSuggestBox to Hamburger Navigation?将 AutoSuggestBox 添加到汉堡导航的正确方法？
【发布时间】：2019-06-12 03:50:50
【问题描述】：

我刚刚开始学习 UWP 和 xaml。将 AutoSuggestBox 添加到侧边导航面板的正确方法是什么？（抱歉，代码格式不正确，复制粘贴不太好）

我的 Main.xaml 有一个 AutoSuggestArea，我已将其设置为可见

</VisualStateGroup>
  <VisualStateGroup x:Name="AutoSuggestGroup">
    <VisualState x:Name="AutoSuggestBoxVisible"/>
    <VisualState x:Name="AutoSuggestBoxCollapsed">
  <VisualState.Setters>
    <Setter Target="AutoSuggestArea.Visibility" Value="Visible"/>
  </VisualState.Setters>
</VisualState>
</VisualStateGroup>

在 AutoSuggestArea 的网格中，我定义了一个 AutoSuggestBox

<Grid x:Name="AutoSuggestArea" Height="44" Grid.Row="3" VerticalAlignment="Center">

<ContentControl x:Name="PaneAutoSuggestBoxPresenter" Content="{TemplateBinding AutoSuggestBox}" HorizontalContentAlignment="Stretch" IsTabStop="False" Margin="16,0,16,0" VerticalContentAlignment="Center"/>

<Button x:Name="PaneAutoSuggestButton" Content="&#xE11A;" MinHeight="44" Style="{TemplateBinding PaneToggleButtonStyle}" Visibility="Collapsed" Width="{TemplateBinding CompactPaneLength}"/>

    <AutoSuggestBox Width="234" VerticalAlignment="Center" 
       HorizontalAlignment="Center"
       PlaceholderText="Search" Name ="boxS"                            
       QuerySubmitted="AutoSuggestBox_QuerySubmitted" 
       TextChanged="AutoSuggestBox_TextChanged">
        <AutoSuggestBox.TextBoxStyle>
          <Style TargetType="TextBox">
          <Setter Property="IsHandwritingViewEnabled" Value="False"/>
          <Setter Property="BorderThickness" Value="0"/>
        </Style>
      </AutoSuggestBox.TextBoxStyle>
        <AutoSuggestBox.QueryIcon>
          <SymbolIcon Symbol="Find" Foreground="Black">                                                   
             <SymbolIcon.RenderTransform>
             <CompositeTransform ScaleX="1" ScaleY="1"/>                                         
             </SymbolIcon.RenderTransform>
          </SymbolIcon>
       </AutoSuggestBox.QueryIcon>
    </AutoSuggestBox>
</Grid>

我想要的基本上是与 Windows 上的 Groove Music 应用程序相同的行为，其中搜索栏会随着导航视图的关闭或最小化而消失。

相反，我得到了这个

【问题讨论】：

标签： c# uwp uwp-xaml uwp-navigation

【解决方案1】：

我假设您的意思是 NavigationView NavigationPanel。

这不是您将AutoSuggestBox 放入NavigationView 的方式。 NavigationView 有一个 NavigationView.AutoSuggestBox 属性。您只需在此属性上设置一个AutoSuggestBox，一切都会按预期工作。像这样：

<NavigationView>
    <NavigationView.AutoSuggestBox>
        <AutoSuggestBox x:Name="NavViewSearchBox" QueryIcon="Find"/>
    </NavigationView.AutoSuggestBox>
</NavigationVew>

您不必自己隐藏/显示此AutoSuggestBox。 NavigationView 会自动为您执行此操作。此外，您不必将AutoSuggestBox 放在任何网格或任何东西中。

【讨论】：