1

我目前正在开发一个 UWP 应用程序，并且正在使用 Template10 Hamburger 模板。我想在 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>

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

4

2 回答 2

5

我认为将内容放入 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）。此外，您必须将其 Horizo​​ntalAlignment 更改为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>

结果是您可以在以下屏幕截图中看到的结果：

两个 PageHeader 并排

希望它有所帮助。

于 2016-03-18T13:06:47.527 回答
1

嘿，我为 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>
于 2016-03-09T18:36:15.877 回答