Как мне установить окно поиска в панели команд? - PullRequest
Новая
       77

Как мне установить окно поиска в панели команд?

0 голосов
/ 07 марта 2020

Я пытаюсь установить Autosuggestbox внутри элемента командной строки в приложении UWP. Я хотел бы создать окно поиска в стиле Windows 10 приложения погоды.

Что бы я хотел иметь: панель команд из Windows 10 приложения погоды

Что у меня есть: мой элемент панели команд

Это код 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>

Заранее спасибо !!

1 Ответ

0 голосов
/ 09 марта 2020

В стиле командной строки по умолчанию часть содержимого устанавливается слева, поэтому, когда вы добавляете Autosuggestbox в его содержимое, Autosuggestbox будет располагаться слева, а кнопка «больше» будет закреплена справа. Поэтому лучше установить сетку с двумя столбцами и поместить панель команд в первый столбец, а поле Autosuggest - во второй столбец. Например:

Обновление: 

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

или , если вы все еще хотите, чтобы поле поиска находилось внутри панели команд, вы можете добавить Autosuggestbox в стиле commandBar. Есть кнопка с именем MoreButton, представляющая moreButton, вы можете добавить стековую панель, ориентация которой горизонтальная, а затем добавить в нее 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>
...