How to control width of suggestion list for AutoSuggestBox

Question

How do I make the suggestion list for an AutoSuggestBox wider? It is currently defaulting to the same width as the TextBox part, but I would like to make the list wider.

Answer 1

Hello,
Welcome to Microsoft Q&A!

How do I make the suggestion list for an AutoSuggestBox wider?

You could update AutoSuggestBox's suggestion list width by editing the default AutoSuggestBox style. It contains SuggestionsList that use to display suggestions. You could reduce list width by setting small Width property. However, you can't make it wider than AutoSuggestBox input box. because it was limited by SuggestionsPopup and it's size was managed internally.

   <Style TargetType="AutoSuggestBox">  
       <Setter Property="VerticalAlignment" Value="Top" />  
       <Setter Property="IsTabStop" Value="False" />  
       <Setter Property="TextBoxStyle" Value="{StaticResource AutoSuggestBoxTextBoxStyle}" />  
       <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />  
       <Setter Property="Template">  
           <Setter.Value>  
               <ControlTemplate TargetType="AutoSuggestBox">  
                   <Grid x:Name="LayoutRoot">  
     
                       <VisualStateManager.VisualStateGroups>  
                           <VisualStateGroup x:Name="Orientation">  
                               <VisualState x:Name="Landscape" />  
                               <VisualState x:Name="Portrait" />  
     
                           </VisualStateGroup>  
     
                       </VisualStateManager.VisualStateGroups>  
     
                       <Grid.ColumnDefinitions>  
                           <ColumnDefinition Width="*" />  
                       </Grid.ColumnDefinitions>  
     
                       <Grid.RowDefinitions>  
                           <RowDefinition Height="*" />  
                       </Grid.RowDefinitions>  
     
                       <TextBox x:Name="TextBox"  
                       Style="{TemplateBinding TextBoxStyle}"  
                       PlaceholderText="{TemplateBinding PlaceholderText}"  
                       Header="{TemplateBinding Header}"  
                       Width="{TemplateBinding Width}"  
                       Description="{TemplateBinding Description}"  
                       ScrollViewer.BringIntoViewOnFocusChange="False"  
                       Canvas.ZIndex="0"  
                       Margin="0"  
                       DesiredCandidateWindowAlignment="BottomEdge"  
                       UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}" />  
     
                       <Popup x:Name="SuggestionsPopup" >  
                             
                           <Border x:Name="SuggestionsContainer" Background="DarkGreen">  
                               <ListView x:Name="SuggestionsList"   
                               Background="{ThemeResource AutoSuggestBoxSuggestionsListBackground}"  
                               BorderThickness="{ThemeResource AutoSuggestListBorderThemeThickness}"  
                               BorderBrush="{ThemeResource AutoSuggestBoxSuggestionsListBorderBrush}"  
                               DisplayMemberPath="{TemplateBinding DisplayMemberPath}"  
                               IsItemClickEnabled="True"  
                               ItemTemplate="{TemplateBinding ItemTemplate}"  
                               ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"  
                               ItemContainerStyle="{TemplateBinding ItemContainerStyle}"  
                               MaxHeight="{ThemeResource AutoSuggestListMaxHeight}"  
                               Margin="{ThemeResource AutoSuggestListMargin}"  
                               Padding="{ThemeResource AutoSuggestListPadding}" />  
                           </Border>  
                       </Popup>  
     
                   </Grid>  
     
               </ControlTemplate>  
           </Setter.Value>  
       </Setter>  
   </Style>  

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.