在 XAML 中实现 IE/Microsoft Edge 底栏答案

【问题标题】：Implement IE/Microsoft Edge bottom bar in XAML在 XAML 中实现 IE/Microsoft Edge 底栏
【发布时间】：2016-05-14 16:09:11
【问题描述】：

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

由于这会浪费屏幕空间，我很想利用栏的剩余空间来添加应用状态（代替 Edge/IE 的地址栏）之类的内容，例如下载/上传进度之类的内容。不幸的是，CommandBar 不允许引入像 TextBlock 或 ProgressRing 这样的东西。要使用这些控件，我们需要改为 AppBar。但是，我无法使用CommandBar 的功能，例如添加 3 个点按钮来打开隐藏的按钮。

有没有一种简单的方法来实现这一点，即结合AppBar 的灵活性和CommandBar 的三点功能？

【问题讨论】：

标签： xaml win-universal-app uwp

【解决方案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;
        }
    }
}

还有 UserControl 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

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

【讨论】：

您知道如何推动文本与栏的左侧对齐或拉伸控件以占用 Edge 等可用空间吗？我尝试了在典型情况下使用的HorizontalAlignment="Stretch"，但在这种情况下没有帮助。

【解决方案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 在软件键盘出现时保持可见。

【讨论】：