How to display a SearchBox in CommandBar

autosuggest, commandbar, search-box, uwp-xaml

Solution

I tried setting the HorizontalContentAlignment="Stretch" and HorizontalAlignment="Stretch", but it has no impact.

Setting `Horizontal​Alignment` to `stretch` means an element stretched to fill the entire layout slot of the parent element. In your code snippet, the `AutoSuggestBox` is inside the content of the `CommandBar`, if we checked the default template of `CommandBar`, the content of the `CommandBar` using a `Content​Control`. So actually the parent element is a `ContentControl` not the `CommandBar` directly. It seems like the size of `ContentControl` here is depend on its child size, so that `AutoSuggestBox` has no space to fill.

Actually the content area is designed aligned to the left side of the bar. Details see Anatomy of app bars. So I don't recommend you to stretch it. You may consider using other controls as the container of the `AutoSuggestBox`. If you do want to have stretch effect you may calculate the width of `AutoSuggestBox` manually. For example:

<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>

Problem

Original source