Comment afficher un SearchBox dans CommandBar

Question

Je voudrais ajouter un AutoSuggestBox dans le CommandBar. Cependant, le code suivant ne fait pas l'extension AutoSuggestBox. J'ai essayé de régler le HorizontalContentAlignment="Stretch" et le HorizontalAlignment="Stretch", mais cela n'a aucun impact. Qu'est-ce que je rate?

<CommandBar Grid.Row="0" HorizontalContentAlignment="Stretch"> 
     <CommandBar.Content> 
      <AutoSuggestBox HorizontalAlignment="Stretch" Margin="8 8 8 4" PlaceholderText="Search podcasts" QueryIcon="Find"> 
       <Interactivity:Interaction.Behaviors> 
        <Core:EventTriggerBehavior EventName="QuerySubmitted"> 
         <Core:InvokeCommandAction       
        Command="{Binding SearchCommand}" 
        InputConverter="{StaticResource QueryArgsConverter}" /> 
        </Core:EventTriggerBehavior> 
       </Interactivity:Interaction.Behaviors> 
      </AutoSuggestBox> 
     </CommandBar.Content> 
    </CommandBar> 

Answer 1

J'ai essayé le réglage de la HorizontalContentAlignment = "Stretch" et HorizontalAlignment = "Stretch", mais il n'a pas d'impact.

Cadre Horizontal​Alignment-stretch signifie un élément étiré pour remplir toute la rainure de mise en page de l'élément parent. Dans votre extrait de code, le AutoSuggestBox se trouve à l'intérieur du contenu du CommandBar, si nous avons vérifié le default template de CommandBar, le contenu du CommandBar en utilisant un Content​Control. Donc, en fait, l'élément parent est un ContentControl pas le CommandBar directement. Il semble que la taille de ContentControl dépend ici de la taille de l'enfant, de sorte que AutoSuggestBox n'a pas d'espace à remplir.

En fait, la zone de contenu est conçue de manière à être alignée sur le côté gauche de la barre. Détails voir Anatomie de app bars. Donc je ne vous recommande pas de l'étirer. Vous pouvez envisager d'utiliser d'autres contrôles comme conteneur du AutoSuggestBox. Si vous voulez avoir un effet d'étirement, vous pouvez calculer manuellement la largeur de AutoSuggestBox. Par exemple:

<CommandBar x:Name="cmdbar"> 
    <CommandBar.Content> 
     <AutoSuggestBox 
      x:Name="autobox" 
      Width="{Binding ElementName=cmdbar, Path=ActualWidth}" 
      HorizontalAlignment="Stretch" 
      PlaceholderText="Search podcasts" 
      QueryIcon="Find" /> 
    </CommandBar.Content> 
</CommandBar>