在 XAML 中实施 IE/Microsoft 边缘底栏

Question

我是 Windows phone 上浏览器的超级粉丝，我想为我的应用程序移植一个类似的底部栏。现在，我使用的是标准 CommandBar.

<Page.BottomAppBar>
    <CommandBar>
        <AppBarButton Icon="Go" Click="Go"/>
        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Setting" Label="Settings" Click="ShowSettings"/>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

由于这会浪费屏幕 space，我真的很想利用剩余的 space 栏来添加应用状态之类的东西（代替 [=27= 的地址栏） ])，类似于 download/upload 进度。不幸的是，CommandBar 不允许引入像 TextBlock 或 ProgressRing 这样的东西。要使用这些控件，我们需要改为 AppBar。但是，我无法使用 CommandBar 的功能，例如添加 3 个点按钮来打开隐藏按钮。

有没有一种简单的方法可以实现这一目标，即结合 AppBar 的灵活性和 CommandBar 的 3 点功能？

Answer 1

CommandBar 只接受继承 ICommandBarElement 接口的控件。

我们可以创建一个继承ICommandBarElement的UserControl，简单地做了一个小测试，没有优化代码，看看是否有帮助：

public sealed partial class MyUserControl1 : UserControl, ICommandBarElement
{
    public MyUserControl1()
    {
        this.InitializeComponent();
    }
    private bool _IsCompact = true;
    bool ICommandBarElement.IsCompact
    {
        get
        {
            return _IsCompact;
        }

        set
        {
            _IsCompact = value;
        }
    }
}

还有用户控件XAML:

<UserControl
x:Class="App10.MyUserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App10"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignWidth="400" Height="38.027">

<Grid>
    <TextBlock Foreground="DarkBlue">asdsadasdasdasdasda</TextBlock>
</Grid>

然后我们在 CommandBar 中使用 userControl，我们开始： http://i.stack.imgur.com/Bgug9.png

注意：请进一步优化，例如注册一些Text依赖属性以启用接受数据绑定。

Answer 2

根据 documentation on MSDN，您可以使用 CommandBar.Content 属性，它对应于任何主要命令一侧的空白区域。要更改内容的对齐方式，您需要更改 CommandBar.HorizontalContentAlignment 属性.

    <CommandBar HorizontalContentAlignment="Stretch">
        <AppBarButton Icon="Go" Click="Go"/>
        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Setting" Label="Settings" Click="ShowSettings"/>
        </CommandBar.SecondaryCommands>
        <CommandBar.Content>
            <Grid>
                <TextBox HorizontalAlignment="Stretch"
                     VerticalAlignment="Top"
                     Margin="12,8"/>
            </Grid>
        </CommandBar.Content>
    </CommandBar>

从 Win10 开始，建议将 CommandBar 置于内联位置，而不是使用 Page.TopAppBar 或 Page.BottomAppBar 属性。您可能仍想使用 Page.BottomAppBar 属性的一种情况是确保 CommandBar 在软件键盘出现时保持可见。

在 XAML 中实施 IE/Microsoft 边缘底栏

Implement IE/Microsoft Edge bottom bar in XAML

xaml

win-universal-app

uwp