UWP中的自适应AutoSuggestBox

Question

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

Answer 1

  

我希望它看起来像NarrowViewState中的按钮。

我认为您可以使用VisualStateManager来实现预期的效果。

对于您的方案，您可以使用NarrowViewState MinWindowWidth将AutoSuggestBox变为AdaptiveTrigger中的按钮。您可以尝试以下代码或引用我上传的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>

此屏幕截图