UWP 中的自适应 AutoSuggestBox

Question

我已经在 UWP 应用程序中实现了一个 AutoSuggestBox（用于搜索），如下面的屏幕截图所示，我正在尝试使其自适应，但我还没有找到方法。我希望它在 NarrowViewState 中看起来像一个按钮，如下所述：https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/search#Implementation

Answer 1

I want it to appear like a button in NarrowViewState.

我认为使用 VisualStateManager.

可以达到预期的效果

对于您的方案，您可以使用 MinWindowWidth AdaptiveTrigger 将 AutoSuggestBox 变成 NarrowViewState 中的按钮。你可以试试下面的代码或者参考我上传的project

 <StackPanel
     x:Name="LayoutRoot"
     Height="640"
     VerticalAlignment="Bottom"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
     <AutoSuggestBox
         x:Name="SuggestBox"
         PlaceholderText="Search some info!"
         QueryIcon="AlignRight" />
     <Button x:Name="SearchBtn" Content="SearchButton">
         <Button.Flyout>
             <Flyout Placement="Bottom">
                 <StackPanel>
                     <AutoSuggestBox x:Name="MiniSuggsetBox" PlaceholderText="search some info..." />
                 </StackPanel>
             </Flyout>
         </Button.Flyout>
     </Button>
     <VisualStateManager.VisualStateGroups>
         <VisualStateGroup x:Name="WindowStates">
             <VisualState x:Name="Normal">
                 <VisualState.StateTriggers>
                     <AdaptiveTrigger MinWindowWidth="600" />
                 </VisualState.StateTriggers>
                 <VisualState.Setters>
                     <Setter Target="SuggestBox.Visibility" Value="Visible" />
                     <Setter Target="SearchBtn.Visibility" Value="Collapsed" />
                 </VisualState.Setters>
             </VisualState>
             <VisualState x:Name="Hide">
                 <VisualState.StateTriggers>
                     <AdaptiveTrigger MinWindowWidth="0" />
                 </VisualState.StateTriggers>
                 <VisualState.Setters>
                     <Setter Target="SuggestBox.Visibility" Value="Collapsed" />
                     <Setter Target="SearchBtn.Visibility" Value="Visible" />
                 </VisualState.Setters>
             </VisualState>
         </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
 </StackPanel>

这个截图

UWP 中的自适应 AutoSuggestBox

Adaptive AutoSuggestBox in UWP

xaml

uwp

windows-10-universal

uwp-xaml