Xaml PageHeader中的模板10 AutoSuggestBox_Xaml_Win Universal App_Template10

Xaml PageHeader中的模板10 AutoSuggestBox

xaml

Xaml PageHeader中的模板10 AutoSuggestBox,xaml,win-universal-app,template10,Xaml,Win Universal App,Template10,我目前正在开发一个UWP应用程序，我正在使用Template10汉堡模板。我想在PageHeader中添加一个AutoSuggestBox，如果不设置任何主命令或辅助命令，它就可以正常工作。如果我设置了任何命令，则命令和AutoSuggestBox都会重叠。我所做的是为PageHeader设置一个padding right值，如下所示： <controls:PageHeader x:Name="pageHeader" Text="Main Page" Padding="0,0,283,0"

我目前正在开发一个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>

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

嘿，我为AutoSuggestBox做了什么，该如何将其放入UserControl中，并在AppBarButton的内容中调用该UserControl，如下所示：

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

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

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

嘿，我为AutoSuggestBox做了什么，将它放在UserControl中，并在AppBarButton的内容中调用该UserControl，如下所示：

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

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

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

我认为将内容放在CommandBar中，从而放在继承自CommandBar的PageHeader中最简单的方法是使用CommandBar内容属性，如下所示：

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

    <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中的内容区域固定在屏幕的左侧，老实说，我不知道如何将其切换到右侧。有一个流方向属性，但它是用于右到左语言的，如果使用左到右语言，会导致一些非常奇怪的行为。首先，你可以注意到，你尝试的是，自动提示框的搜索图标在盒子左边的开关，如果有，则在最右边的按钮上切换。我想用户会觉得很奇怪

但是，您可以通过将两个页眉（一个放在另一个的旁边）来实现所需的功能，利用RelativePanel的高级定位功能：在第一个页面中，您可以放置主命令和最终的辅助命令；在第二个对话框中，您可以选择AutoSuggestBox，如果需要，还可以选择其他内容。请注意，您必须为第一个页眉指定一个宽度或MaxWidth，即左侧包含与要放入其中的内容相匹配的命令的页眉。此外，还必须将其水平对齐方式更改为左侧，然后删除RelativePanel.AlignRightWithPanel。在第二个页眉中，您使用RelativePanel.AlignTopWithPanel=True、RelativePanel.AlignRightWithPanel=True和RelativePanel.RightOf=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>

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

希望它能有所帮助。

我认为将内容放入CommandBar，从而放入继承自CommandBar的PageHeader中最简单的方法是使用CommandBar内容属性，如下所示：

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

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

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

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

希望对您有所帮助。

我会将此文件插入Shell.xaml文件？在您的中，这样做时，它会将搜索栏放在所有内容的左侧。我想要的是把它放在辅助命令的右边。我更新了代码。请告诉我这是否对您有效。当应用更新的代码时，搜索框被移动到辅助命令菜单中，这不是我想要的。此外，由于某些原因，搜索栏在菜单中不可见，当您将其悬停时，它只是一个空白。必须有更好的方法实现搜索，才能将其放置在页眉的右侧…我会将其插入Shell.xaml文件中？在您的中，这样做时，它会将搜索栏放在所有内容的左侧。我想要的是我

t在辅助命令的右侧。我更新了代码。请告诉我这是否适用于您当应用更新的代码时，搜索框被移动到辅助命令菜单中，这不是我想要的。此外，由于某些原因，搜索栏在菜单中不可见，当您将其悬停时，它只是一个空白。必须有一个更好的方法来实现搜索，将其放置在页面标题的右侧。。。