UWP中的自适应AutoSuggestBox

时间:2017-03-07 10:55:05

标签: xaml uwp windows-10-universal uwp-xaml

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

Screenshot

1 个答案:

答案 0 :(得分:0)

  

我希望它看起来像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>

此屏幕截图 enter image description here