UWP中的自适应AutoSuggestBox

Question

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

Answer 1

我希望它看起来像在NarrowViewState一个按钮。

我想你可以通过使用VisualStateManager来达到预期的效果。

对于您的情况，你可以打开AutoSuggestBox成按钮NarrowViewState使用MinWindowWidthAdaptiveTrigger。您可以尝试下面的代码或参考我上传的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> 

这张截图