如何在 Windows 10 中删除更多应用栏？

Question

我目前在 Windows 10 中工作，并且正在开发 AppBar 和命令栏控件。我创建了一个 Appbar，在其中添加了一个包含应用栏按钮的 commandBar。现在的问题是它为 commandBar 和 AppBar 显示更多图标。您能建议我如何删除它吗？

我的代码在下面

CommandBar commandBar = new CommandBar();
if (this.BottomAppBar == null)
{
       this.BottomAppBar = new AppBar();
       this.BottomAppBar.IsOpen = true;
       this.BottomAppBar.IsSticky = true;
}

commandBar.PrimaryCommands.Clear();
commandBar.IsSticky = true;
commandBar.IsOpen = true;
commandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Compact;
AppBarButton appBarButton = new AppBarButton();
appBarButton.Foreground = MCSExtensions.GetColorFromHex(foreground_color);
appBarButton.Icon = new BitmapIcon() { UriSource = new Uri("ms-appx:///Images/submit.png", UriKind.Absolute) };
appBarButton.Label = formButton.B_NAME;

commandBar.PrimaryCommands.Add(appBarButton);
this.BottomAppBar.Content=commandBar;

上面正在生成以下输出

我真正想要的是左侧栏，即commandBar，而不是灰色部分。有人可以建议我做错了什么吗？我也尝试在网格中添加 CommmandBar，但它根本没有显示。

更新

CommandBar commandBar=new CommmandBar();
commandBar.IsOpen=true;
commandBar.IsSticky=true;
commandBar.ClosedDisplayMode=AppBarClosedDisplatMode.Compact;
AppBarButton appBarButton = new AppBarButton();
appBarButton.Foreground = MCSExtensions.GetColorFromHex(foreground_color);
appBarButton.Icon = new BitmapIcon() { UriSource = new Uri("ms-appx:///Images/submit.png", UriKind.Absolute) };
appBarButton.Label = formButton.B_NAME;

commandBar.PrimaryCommands.Add(appBarButton);
pageLayoutRootGrid.Children.Add(commandBar);

我还尝试在 AppBar 中添加 StackPanel，如下所示，但没有给出正确的结果。

if (this.BottomAppBar == null)
{
       this.BottomAppBar = new AppBar();
       this.BottomAppBar.IsOpen = true;
       this.BottomAppBar.IsSticky = true;
}
StackPanel appBarPanel=new StackPanel();
appBarPanel.Orientation=Orientation.Horizontal;          
AppBarButton appBarButton = new AppBarButton();
appBarButton.Foreground = MCSExtensions.GetColorFromHex(foreground_color);
appBarButton.Icon = new BitmapIcon() { UriSource = new Uri("ms-appx:///Images/submit.png", UriKind.Absolute) };
appBarButton.Label = formButton.B_NAME;

appBarPanel.Children.Add(appBarButton);
this.BottomAppBar.Content=appBarPanel;

Answer 1

对于 xaml：

<Page.BottomAppBar>
    <CommandBar>
        <CommandBar.PrimaryCommands>
            <AppBarButton Icon="Accept"/>
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

这一行会让你的 UI 混乱：

this.BottomAppBar = new AppBar();

从我的 xaml 中可以看到，在 BottomAppBar 中只创建 1 个 CommandBar

编辑：如果你想使用代码，使用这个：

var commandBar = new CommandBar();
commandBar.PrimaryCommands.Add(new AppBarButton() { Label = "test" });
commandBar.VerticalAlignment = VerticalAlignment.Bottom;
this.root.Children.Add(commandBar);

更新

完整的xml代码：

<Page
    x:Class="CommandBarSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CommandBarSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="root">

    </Grid>
</Page>

背后的代码：

public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();



            var commandBar = new CommandBar();
            commandBar.VerticalAlignment = VerticalAlignment.Bottom;
            var appBarButton = new AppBarButton() { Icon = new SymbolIcon(Symbol.Accept), Label = "Accept" };
            commandBar.PrimaryCommands.Add(appBarButton);

            root.Children.Add(commandBar);
        }
    }