Question

我目前正在开发一款UWP应用，而且我正在使用Template10汉堡包模板。我想在PageHeader中添加一个AutoSuggestBox，如果我没有设置任何主要或辅助命令，它可以正常工作。如果我设置了任何命令，则命令和AutoSuggestBox重叠。我所做的是为PageHeader设置一个padding right值，如下所示：

#define PRINT(level, ...) \
  do if (level & LEVEL_MASK) \
  printf(__VA_ARGS__); while (0)

我的问题是这是建议的做法还是另外一种方式？提前致谢

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的内容中调用了usercontrol，如下所示：

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

PageHeader中的模板10 AutoSuggestBox

2 个答案: