How should I set a searchbox in commandbar item?

Question

I'm trying to set an Autosuggestbox inside the commandbar item in a UWP application. I would like to create a search box on the style of the Windows 10 Weather App.

What I would like to have: commandbar from Windows 10 weather app

What I have: my commandbar item

This is the xaml code I'm using:

        <CommandBar x:Name="cmd_bar">
        <AppBarButton Icon="Add" Label="Save Location"/>
        <AppBarButton Icon="Delete" Label="Delete Location" Visibility="Collapsed"/>
        <AppBarButton Icon="Refresh" Label="Refresh"/>
        <AppBarButton Icon="Find" Label="Search"/>
        <CommandBar.Content>
            <AutoSuggestBox PlaceholderText="Search" QueryIcon="Find" Width="200px" Background="Gray"
                            BorderThickness="0"
                            x:Name="search_box"/>
        </CommandBar.Content>

    </CommandBar>

Thanks in advance!!

Answer 1

In the default style of commandbar, the content part is set to the left, so when you add Autosuggestbox in its content, the Autosuggestbox will be placed on the left and the more button is pinned to the right. So it's better to set a two-column Grid and put your command bar in the first column and the Autosuggestbox in the second column. For example:

Update:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <CommandBar x:Name="cmd_bar" Grid.Column="0">
        <AppBarButton Icon="Add" Label="Save Location"/>
        <AppBarButton Icon="Delete" Label="Delete Location" Visibility="Collapsed"/>
        <AppBarButton Icon="Refresh" Label="Refresh"/>
        <AppBarButton Icon="Find" Label="Search"/>
    </CommandBar>
    <StackPanel Grid.Column="1" Background="{ThemeResource CommandBarBackground}" VerticalAlignment="Top" Height="{Binding ElementName=cmd_bar,Path=ActualHeight}">
        <AutoSuggestBox PlaceholderText="Search" QueryIcon="Find" Width="200px" Background="Gray" BorderThickness="0" x:Name="search_box"/>
    </StackPanel>
</Grid>

Or if you still want the search box is inside the commandBar, you can add the Autosuggestbox in the style of commandBar. There is a button named MoreButton represents the moreButton, you can add a stackPanel which Orientation is Horizontal then add the moreButton and Autosuggestbox in it.

.xaml:

<Page.Resources>
    <Style x:Key="CommandBarStyle1" TargetType="CommandBar">
        ......
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CommandBar">
                    ......
                    <StackPanel Orientation="Horizontal" Grid.Column="1">
                        <Button x:Name="MoreButton" ......>
                            <FontIcon x:Name="EllipsisIcon" FontFamily="{ThemeResource SymbolThemeFontFamily}" FontSize="20" Glyph="&#xE10C;" Height="{ThemeResource AppBarExpandButtonCircleDiameter}" VerticalAlignment="Center"/>
                        </Button>
                        <AutoSuggestBox PlaceholderText="Search" QueryIcon="Find" Width="200px" Background="Gray" BorderThickness="0" x:Name="search_box"/>
                    </StackPanel>
                    ......
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<CommandBar Style="{StaticResource CommandBarStyle1}" x:Name="cmd_bar" Grid.Column="0">
    <AppBarButton Icon="Add" Label="Save Location"/>
    <AppBarButton Icon="Delete" Label="Delete Location" Visibility="Collapsed"/>
    <AppBarButton Icon="Refresh" Label="Refresh"/>
    <AppBarButton Icon="Find" Label="Search"/>
</CommandBar>