Как отобразить окно поиска в CommandBar

Я хотел бы добавить 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>

изображение ошибки


commandbar uwp-xaml autosuggest search-box
person resp78    schedule 11.05.2017    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Я попытался установить HorizontalContentAlignment="Stretch" и HorizontalAlignment="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>
person Sunteen Wu    schedule 12.05.2017