结合在AppBar按钮的命令不起作用 [英] Binding Command of Button in AppBar does not work

问题描述

为什么在下面的示例中的命令没有执行？

Why does the Command in the following example not execute?

我有与AppBar并在它的按钮命名页：

I have a named Page with an AppBar and a Button in it:

   <Page
    x:Class="App13.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" 
    x:Name="myPage"
    >
    <Page.BottomAppBar>
        <AppBar>
           <Button Content="OK" Command="{Binding OkCommand, ElementName=myPage}" />
        </AppBar>
    </Page.BottomAppBar>
</Page>

命令OkCommand在code-背后是这样定义的（使用MVVM光框架）：

The Command "OkCommand" is defined in the code-behind like this (using MVVM light framework):

public RelayCommand OkCommand
{
    get
    {
        return m_OkCommand
            ?? (m_OkCommand = new RelayCommand(
                                  async () =>
                                  {
                                      await new MessageDialog("OkCommand").ShowAsync();
                                  }));
    }
}

有没有说给我一个想法，为什么这不起作用绑定错误，也不在输出窗口中的任何其他线索。
（旁白：如果按钮被放置在AppBar外，一切正常）

There are no binding-errors nor any other hints in the output-window that give me an idea why this does not work. (Aside: if the button is placed outside the AppBar, everything works fine)

有没有人有一个想法，什么是错在这里？

Does anyone have an idea what is wrong here?

推荐答案

不应该有任何理由命令绑定在 AppBar 不工作的一个按钮，如果它适用于一个按钮，页面上的其他地方。

There should be no reason for the command binding not working for a button in AppBar if it works for a button elsewhere on the page.

我怀疑这个问题涉及到如何的DataContext 设置。你应该有它设置在页面级别，而不是在控制树低。所有其他按钮的页面顶部的含量控制内，而 AppBar 是它之外造成的绑定不工作，如果的DataContext 设置在顶部内容控制或以下。

I suspect the problem is related to how DataContext is set. You should have it set at the page level instead of lower in the control tree. All the other buttons are inside the top content control of the page while the AppBar is outside of it causing the binding not to work if DataContext is set at the top content control or below.

您可以用下面的工作例尝试​​吧：

You can try it with the following working example:

MainPage.xaml中：

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

    <StackPanel x:Name="MainGrid" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Button Content="Ok" Command="{Binding OkCommand}" />
    </StackPanel>

    <Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" Padding="10,10,10,10"  >
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                <Button Style="{StaticResource SkipBackAppBarButtonStyle}" Command="{Binding OkCommand}" >
                </Button>
            </StackPanel>
        </AppBar>
    </Page.BottomAppBar>
</common:LayoutAwarePage>

ViewModel.cs ：

public class ViewModel
{
    private RelayCommand _okCommand;
    public RelayCommand OkCommand
    {
        get
        {
            return _okCommand
                ?? (_okCommand = new RelayCommand(
                                      async _ =>
                                      {
                                          await new MessageDialog("OkCommand").ShowAsync();
                                      }));
        }
    }
}

MainPage.xaml.cs中：

public sealed partial class MainPage : LayoutAwarePage
{
    public MainPage()
    {
        this.InitializeComponent();
        DataContext = new ViewModel();
    }
}

这篇关于结合在AppBar按钮的命令不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！