PageHeader中的模板10 AutoSuggestBox

Question

我目前正在开发一个UWP应用程序，我正在使用Template10汉堡包模板。我想在PageHeader中添加一个AutoSuggestBox，如果我不设置任何主命令或辅助命令，它就可以正常工作。如果我设置了任何命令，命令和AutoSuggestBox都会重叠。我所做的是为PageHeader设置一个正确的空白值，如下所示：

<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" />
    </controls:PageHeader.SecondaryCommands>
</controls:PageHeader>
<AutoSuggestBox Margin="0,8,12,0" Width="270" QueryIcon="Find" PlaceholderText="Search">
    <RelativePanel.AlignRightWithPanel>True</RelativePanel.AlignRightWithPanel>
</AutoSuggestBox>

我的问题是，这是建议的方法，还是有其他方法？提前感谢

Answer 1

我认为将内容放入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，如果需要，还可以放入其他内容。请注意，您必须为第一个PageHeader (左侧包含命令的那个)提供一个宽度(或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>

您可以在下面的截图中看到结果：

Two PageHeader side by side

希望这能有所帮助。

Answer 2

嘿，我对AutoSuggestBox做了什么，把它放在UserControl中，并在AppBarButton的内容中调用该用户控件，如下所示：

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

Edit1：

您的代码应如下所示：

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