我应如何在命令栏项中设置搜索框？

Question

我正在尝试在UWP应用程序的命令栏项内设置一个Autosuggestbox。我想创建一个Windows 10 Weather App样式的搜索框。

我想拥有：commandbar from Windows 10 weather app

我有：my commandbar item

这是我正在使用的xaml代码：

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

提前感谢！

Answer 1

在命令栏的默认样式中，内容部分设置为左侧，因此，在其内容中添加Autosuggestbox时，Autosuggestbox将位于左侧，而more按钮固定在右侧。因此，最好设置一个[[two-column网格并将命令栏放在第一列中，并将Autosuggestbox放在第二列中。例如：

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

或

如果您仍然希望搜索框位于commandBar内，则可以按照commandBar的样式添加Autosuggestbox。有一个名为MoreButton的按钮代表moreButton，您可以添加一个Orientation为Horizo​​ntal的stackPanel，然后在其中添加moreButton和Autosuggestbox。。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>