如何在SearchBox中显示CommandBar

Question

我想在AutoSuggestBox中添加一个CommandBar。但是，下面的代码并不会使AutoSuggestBox扩展。我试着设置HorizontalContentAlignment="Stretch"和HorizontalAlignment="Stretch"，但没有影响。我遗漏了什么？

    <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

我试着设置HorizontalContentAlignment=“拉伸”和HorizontalAlignment=“拉伸”，但没有影响。

将Horizontal​Alignment设置为stretch意味着扩展元素以填充父元素的整个布局槽。在您的代码片段中，AutoSuggestBox位于CommandBar的内容中，如果我们使用Content​Control检查CommandBar的内容，则会检查CommandBar的内容。因此，实际上父元素是一个ContentControl，而不是直接的CommandBar。这里的ContentControl大小似乎取决于它的子大小，因此AutoSuggestBox没有需要填充的空间。

实际上，内容区域是设计成与条形图的左边对齐的。详细资料见应用程序栏的解剖。所以我不建议你把它伸开。您可以考虑使用其他控件作为AutoSuggestBox的容器。如果您确实希望具有拉伸效果，您可以手动计算AutoSuggestBox的宽度。例如：

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