PageHeader中的模板10 AutoSuggestBox

Question

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

<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的Content区域固定在屏幕的左侧,老实说,我不知道在右侧切换它的简单方法.有一个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并排

希望它有所帮助.