如何在命令栏中显示搜索框

Question

我想AutoSuggestBox在CommandBar. 但是，以下代码不会进行AutoSuggestBox拉伸。我尝试设置HorizontalContentAlignment="Stretch"and 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

我尝试设置 Horizo​​ntalContentAlignment="Stretch" 和 Horizo​​ntalAlignment="Stretch"，但没有任何影响。

设置Horizontal?Alignment为stretch意味着元素被拉伸以填充父元素的整个布局槽。在你的代码片段中，AutoSuggestBox是对里面的内容CommandBar，如果我们检查了默认模板的CommandBar，该内容CommandBar使用Content?Control。所以实际上父元素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>