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

Question

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

我有一个复杂的UI，里面有很多项目（一个包含其他东西的SplitView，然后是一个包含Page的Frame，我有一个Grid，最后是我的CommandBar）。

当我点击＆＃34; ...＆＃34;按钮，CommandBar向窗口顶部打开，它实际上也覆盖了其父页面所在框架的外的部分内容（我不知道事情如何＆＃39 ;那可能）。

我尝试将CommandBar，父网格，Page等等的VerticalAlignment属性设置为Top，但CommandBar仍然朝向屏幕的 top 打开。

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

感谢您的帮助！

塞尔吉奥

编辑：为了清楚起见，我的网页的基本结构是这样的：

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

我无法将CommandBar放在Page.TopAppBar中，就像我这样做，CommandBar被放置在我的Page的外面并覆盖我的顶部UI。我需要将CommandBar放在里面页面。

Answer 1

CommandBar依赖于VisualStates来控制其维度和动画的这一部分，这使得使用自定义可视状态管理器来拦截状态更改调用并用OpenDown调用替换所有OpenUp调用变得容易。

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>

Answer 2

您如何定义命令栏？有两种方法可以做到：

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

或相反......

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

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

Answer 3

您正在使用命令栏来处理它不适合的事情。它应该在显示时覆盖页面内容。

如果你无法改变某种行为的方式（如本案例所示）那么替代方案将是一个不同的控制（我不知道哪些东西会给你什么你想要的）或制作自己的。