如何使 CommandBar 打开到屏幕底部？

Question

我有一个可能是愚蠢的疑问，但我真的不知道如何解决这个问题。

我有一个复杂的 UI 里面有很多项目（一个 SplitView 里面有其他东西，然后是一个包含页面的框架，我有一个网格，最后是我的 CommandBar）。

当我点击“...”按钮时，CommandBar 向 window 的顶部打开，它实际上还覆盖了 UI 外部的一部分 其父页面所在的框架（我不知道怎么可能）。

我尝试将 CommandBar、父网格、页面等的 VerticalAlignment 属性设置为顶部，但 CommandBar 仍然向 top[=38= 打开] 的屏幕。

有没有办法让它向底部打开，就像内置天气或照片应用程序中的 CommandBar 一样？我在这里漏掉了 setting/property 吗？

感谢您的帮助！

塞尔吉奥

编辑： 澄清一下，我页面的基本结构是这样的：

RootContent > ... > Frame > Page > Grid > CommandBar

我不能将 CommandBar 放在 Page.TopAppBar 里面，就好像我这样做一样，CommandBar 被放置在外面我的页面并覆盖了我的 UI 的顶部。我需要将 CommandBar 放置在页面内部。

Answer 1

您如何定义命令栏？有两种方法：

<Page.BottomAppBar>
    <CommandBar>
    ....
    </CommandBar>
</Page.BottomAppBar>

或者相反..

<Page.TopAppBar>
    <CommandBar>
    ....
    </CommandBar>
</Page.TopAppBar>

在您的情况下，您可能希望使用前者并确保您的应用栏不在任何其他容器内。

Answer 2

您将命令栏用于非预期用途。显示时应该覆盖页面内容。

如果您不能改变某些行为的方式（如在本例中），那么替代方案将是一个不同的控件（我知道没有任何东西可以为您提供您想要的东西）或自己做。

Answer 3

CommandBar 依靠 VisualStates 来控制这部分尺寸和动画，这使得使用自定义视觉状态管理器拦截状态更改调用并将所有 OpenUp 调用替换为 OpenDown 调用变得容易。

public class OpenDownCommandBarVisualStateManager : VisualStateManager
{
    protected override bool GoToStateCore(Control control, FrameworkElement templateRoot, string stateName, VisualStateGroup group, VisualState state, bool useTransitions)
    {
        //replace OpenUp state change with OpenDown one and continue as normal
        if(!string.IsNullOrWhiteSpace(stateName) && stateName.EndsWith("OpenUp"))
        {
            stateName = stateName.Substring(0, stateName.Length - 6) + "OpenDown";
        }
        return base.GoToStateCore(control, templateRoot, stateName, group, state, useTransitions);
    }
}

public class OpenDownCommandBar : CommandBar
{
    public OpenDownCommandBar()
    {
    }

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        var layoutRoot = GetTemplateChild("LayoutRoot") as Grid;
        if(layoutRoot != null)
        {
            VisualStateManager.SetCustomVisualStateManager(layoutRoot, new OpenDownCommandBarVisualStateManager());
        }
    }
}

然后只需使用新的 OpenDownCommandBar 而不是普通的。

<myControls:OpenDownCommandBar>...</myControls:OpenDownCommandBar>

如何使 CommandBar 打开到屏幕底部？

How to make the CommandBar open towards the bottom of the screen?

c#

xaml

windows-10

visual-studio-2015

uwp