使用Windows 8.1应用商店应用程序TopAppBar中的Command属性

Question

我正在努力掌握如何在Windows应用商店中有效使用TopAppBar。我使用了Basic Page模板，并以实现GoForwardCommand和GoBackCommand的相同方式向NavigationHelper类添加了NavigateCommand。我还在RelayCommand中添加了一个构造函数，使Execute和CanExecute委托能够接受对象参数

    public RelayCommand(Action<object> execute, Func<object, bool> canExecute)
    {
        if (execute == null)
            throw new ArgumentNullException("execute");
        _executeWithParam = execute;
        _canExecuteWithParam = canExecute;
    }
    public bool CanExecute(object parameter)
    {
        return _canExecute == null ? (_canExecuteWithParam == null ? true : _canExecuteWithParam(parameter)) : _canExecute();
    }
    public void Execute(object parameter)
    {
        if (_execute == null)
            _executeWithParam(parameter);
        else
            _execute();
    }

在主页的XAML中，我有以下代码：

<Page
x:Name="pageRoot"
x:Class="UniAppTest.MainPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UniAppTest"
xmlns:common="using:UniAppTest.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
    <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
    <x:String x:Key="AppName">Welcome to universal apps!</x:String>
</Page.Resources>
<Page.TopAppBar>
    <AppBar>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <StackPanel Orientation="Horizontal">
                <Button Content="Home" Width="140" Height="80" />
                <Button Content="Summary" Width="140" Height="80" 
                        Command="{Binding NavigateCommand}"
                        CommandParameter="SummaryPage" />
                <Button Content="Reports" Width="140" Height="80" 
                        Command="{Binding NavigationHelper.NavigateCommand, ElementName=pageRoot}"
                        CommandParameter="ReportsPage " />
            </StackPanel>
            <SearchBox Grid.Column="1" Width="300" Height="50" HorizontalAlignment="Right" />
        </Grid>
    </AppBar>
</Page.TopAppBar>

按下时，两个按钮都不会调用该命令。

然而，如果我在主页面内容中添加一个按钮，命令就会成功工作：

        <Button x:Name="summaryButton" Margin="39,59,39,0" 
        Command="{Binding NavigationHelper.NavigateCommand, ElementName=pageRoot}"
        CommandParameter="SummaryPage"
        Grid.Row="1" Content="Summary"
        Style="{StaticResource TextBlockButtonStyle}"
        VerticalAlignment="Top"
        FontSize="24"/>

有人能帮我看看我做错了什么吗。我认为它一定在绑定引用中。我总是觉得这令人困惑。如果有任何帮助，我将不胜感激。谢谢

Answer 1

Mmm。。。正如我所知，你没有将任何东西绑定到top.appbar或父级，所以当它试图查看时，他不得不去寻找命令，他不知道它在哪里。当你在一个简单的按钮中制作它时，按钮有一个带绑定的父按钮，不是吗？

Answer 2

我也希望用漂亮的命令来完成导航工作。我想出了一种强烈的做事方式。在XAML、代码隐藏或视图模型中运行良好。

首先，创建一个类，该类将包含与页面一样多的命令。

public class PagesLocator
{
    private Dictionary<string, RelayCommand> commands = new Dictionary<string, RelayCommand>();
    private Frame frame;
    private bool useCurrentFrame;
    public PagesLocator()
    {
        this.useCurrentFrame = true;
    }
    public PagesLocator(Frame frame)
    {
        this.frame = frame;
    }
    public RelayCommand Home
    {
        get { return this.GetCommand("Home", typeof(HomePage)); }
    }
    public RelayCommand Page2
    {
        get { return this.GetCommand("Page2", typeof(Page2)); }
    }
    private RelayCommand GetCommand(string key, Type typeOfPage)
    {
        if (this.commands.ContainsKey(key))
        {
            return this.commands[key];
        }
        var item = new RelayCommand(x => this.GetFrame().Navigate(typeOfPage, x));
        this.commands.Add(key, item);
        return item;
    }
    private Frame GetFrame()
    {
        if (this.frame != null)
        {
            return this.frame;
        }
        else if (this.useCurrentFrame)
        {
            return (Frame)Window.Current.Content;
        }
        else
        {
            throw new InvalidOperationException("Cannot navigate. Current frame is not set.");
        }
    }
}

在应用程序资源中实例化它，使其具有可绑定的数据源。

<Application.Resources>
    <common:PagesLocator x:Key="Navigator" />
</Application.Resources>

最后，您可以绑定来自此源的任何命令。

<Button Content="go to page 2"
    Command="{Binding Page2, Source={StaticResource Navigator}}"
    CommandParameter="extra nav parameter here" />
<AppBarButton Label="page2" Command="{Binding Page2, Source={StaticResource Navigator}}" />