Шаблон 10 AutoSuggestBox в PageHeader

Я думаю, что самый простой способ поместить содержимое в CommandBar (и, следовательно, в PageHeader, который наследуется от него) — это использовать свойство CommandBar Content, например:

    <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <controls:PageHeader x:Name="pageHeader" BackButtonVisibility="Visible" Frame="{x:Bind Frame}">
        <controls:PageHeader.PrimaryCommands>
            <AppBarButton Label="Shuffle" Icon="Shuffle"></AppBarButton>
            <AppBarButton Label="Send" Icon="Send"></AppBarButton>
        </controls:PageHeader.PrimaryCommands>
        <RelativePanel.AlignTopWithPanel>True</RelativePanel.AlignTopWithPanel>
        <RelativePanel.AlignRightWithPanel>True</RelativePanel.AlignRightWithPanel>
        <RelativePanel.AlignLeftWithPanel>True</RelativePanel.AlignLeftWithPanel>
        <controls:PageHeader.Content>
            <AutoSuggestBox Margin="0,8,12,0" Width="270" QueryIcon="Find" PlaceholderText="Search">
            </AutoSuggestBox>
        </controls:PageHeader.Content>
    </controls:PageHeader>
</RelativePanel>

К сожалению, область содержимого CommandBar зафиксирована в левой части экрана, и, честно говоря, я не знаю простого способа переключить ее на правую. Существует свойство FlowDirection, но оно предназначено для языков с письмом справа налево и может привести к очень странному поведению при использовании в языках с письмом слева направо (первое, что вы можете заметить, если вы попробуйте, чтобы значок поиска AutoSuggestBox переключался слева от поля, а кнопка «Назад», если она есть, переключалась в крайнем правом углу панели, что, я думаю, пользователи сочтут довольно странным).

Однако вы можете добиться того, чего хотите, поместив два PageHeader один рядом с другим, используя расширенные возможности позиционирования RelativePanel: в первый вы помещаете первичную и (в конечном итоге) вторичную команды; во втором ваш AutoSuggestBox и, возможно, другой контент, если он вам нужен. Имейте в виду, вы должны указать ширину (или MaxWidth) для первого заголовка страницы (того, что слева, который содержит команды), который соответствует содержимому, которое вы собираетесь в него поместить. Кроме того, вы должны изменить его HorizontalAlignment на Left и удалить RelativePanel.AlignRightWithPanel. Во втором PageHeader вы используете RelativePanel.AlignTopWithPanel = True, RelativePanel.AlignRightWithPanel = true и RelativePanel.RightOf = pageHeader (то есть имя, которое вы даете первому PageHeader), как в следующем коде:

    <RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <controls:PageHeader x:Name="pageHeader" BackButtonVisibility="Visible" Frame="{x:Bind Frame}" MaxWidth="200" HorizontalAlignment="Left">
        <controls:PageHeader.PrimaryCommands>
            <!--Two sample primary commands -->
            <AppBarButton Label="Shuffle" Icon="Shuffle"></AppBarButton>
            <AppBarButton Label="Send" Icon="Send"></AppBarButton>
        </controls:PageHeader.PrimaryCommands>

        <RelativePanel.AlignTopWithPanel>True</RelativePanel.AlignTopWithPanel>
        <!--<RelativePanel.AlignRightWithPanel>True</RelativePanel.AlignRightWithPanel>-->
        <RelativePanel.AlignLeftWithPanel>True</RelativePanel.AlignLeftWithPanel>
    </controls:PageHeader>
    <controls:PageHeader x:Name="pageHeader2" HorizontalAlignment="Right">
        <controls:PageHeader.Content>
            <AutoSuggestBox Margin="0,8,12,0" Width="270" QueryIcon="Find" PlaceholderText="Search">
            </AutoSuggestBox>
        </controls:PageHeader.Content>

        <RelativePanel.AlignTopWithPanel>True</RelativePanel.AlignTopWithPanel>
        <RelativePanel.AlignRightWithPanel>True</RelativePanel.AlignRightWithPanel>
        <RelativePanel.RightOf>pageHeader</RelativePanel.RightOf>
    </controls:PageHeader>
</RelativePanel>

В результате получилось то, что вы можете увидеть на следующем снимке экрана:

Два заголовка страницы рядом

Надеюсь, это помогло.

Эй, что я сделал для AutoSuggestBox, чтобы поместить его в UserControl и назвал этот пользовательский элемент управления в содержимом AppBarButton следующим образом:

 <AppBarButton x:Name="SearchBarUserControl"
                          Style="{StaticResource SearchAppBarButtonStyle}"
                          Visibility="Visible">
                <AppBarButton.Content>
                    <controls1:SearchBarUserControl Height="40" HorizontalAlignment="Stretch" />
                </AppBarButton.Content>
 </AppBarButton>

Редактировать1:

ваш код должен выглядеть так:

<controls:PageHeader x:Name="pageHeader" Text="Main Page" Padding="0,0,283,0">
  <AppBarButton x:Name="SearchBarUserControl"
                              Style="{StaticResource SearchAppBarButtonStyle}"
                              Visibility="Visible">
                    <AppBarButton.Content>
                        <controls1:SearchBarUserControl Height="40" HorizontalAlignment="Stretch" />
                    </AppBarButton.Content>
     </AppBarButton>
    <!--  place stretched, across top  -->
    <RelativePanel.AlignTopWithPanel>True</RelativePanel.AlignTopWithPanel>
    <RelativePanel.AlignLeftWithPanel>True</RelativePanel.AlignLeftWithPanel>
    <RelativePanel.AlignRightWithPanel>True</RelativePanel.AlignRightWithPanel>
    <!--  secondary commands  -->
    <controls:PageHeader.SecondaryCommands>
        <AppBarButton Click="{x:Bind ViewModel.GotoSettings}" Label="Settings" />
        <AppBarButton Click="{x:Bind ViewModel.GotoPrivacy}" Label="Privacy" />
        <AppBarButton Click="{x:Bind ViewModel.GotoAbout}" Label="About" />
    </controls:PageHeader.SecondaryCommands>
</controls:PageHeader>

Редактировать 2: (панель поиска на вторичной панели команд)

<controls:PageHeader x:Name="pageHeader" Text="Main Page" Padding="0,0,283,0">
    <!--  place stretched, across top  -->
    <RelativePanel.AlignTopWithPanel>True</RelativePanel.AlignTopWithPanel>
    <RelativePanel.AlignLeftWithPanel>True</RelativePanel.AlignLeftWithPanel>
    <RelativePanel.AlignRightWithPanel>True</RelativePanel.AlignRightWithPanel>
    <!--  secondary commands  -->
    <controls:PageHeader.SecondaryCommands>
        <AppBarButton Click="{x:Bind ViewModel.GotoSettings}" Label="Settings" />
        <AppBarButton Click="{x:Bind ViewModel.GotoPrivacy}" Label="Privacy" />
        <AppBarButton Click="{x:Bind ViewModel.GotoAbout}" Label="About" />
<AppBarButton x:Name="SearchBarUserControl"
                              Style="{StaticResource SearchAppBarButtonStyle}"
                              Visibility="Visible">
                    <AppBarButton.Content>
                        <controls1:SearchBarUserControl Height="40" HorizontalAlignment="Stretch" />
                    </AppBarButton.Content>
     </AppBarButton>

  </controls:PageHeader.SecondaryCommands>
</controls:PageHeader>