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

Question

我正在尝试在 UWP 应用程序的命令栏项内设置自动提示框。我想根据 Windows 10 天气应用程序的样式创建一个搜索框。

我想要的是： 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

在commandbar的默认样式中，content部分设置在左边，所以当你在内容中添加Autosuggestbox时，Autosuggestbox会放在左边，more按钮固定在右边。所以最好设置一个双列网格并将命令栏放在第一列，将自动提示框放在第二列。例如：

更新：

<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为Horizontal的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>

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

How should I set a searchbox in commandbar item?

c#

windows

xaml

win-universal-app

uwp-xaml