Using Command attribute in Windows 8.1 Store App TopAppBar - windows

Question

I am trying to get to grips with effective use of the TopAppBar in Windows Store Apps. I have used the Basic Page template and added a NavigateCommand to the NavigationHelper class in the same way that the GoForwardCommand and GoBackCommand have been implemented. I have also added a constructor to the RelayCommand to enable Execute and CanExecute delegates to take an object parameter
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();
}
In my XAML for the MainPage I have the following code:
<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>
Neither of the Buttons invoke the command when pressed.
However, if I add a button to the main page content the command works successfully:
<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"/>
Can anyone help me see what I'm doing wrong. I think it must be in the Binding reference. I aalways find this confusing. Would appreciate any help. Thanks.

Answer 1

Mmmm... As I know, you are not Binding Anything to the top.appbar or the parent, So when it tries to see were has to go to find the command he doesn't know where it is.
When you make it in a simple button the button has a parent with the Bind, isn't?

Answer 2

I too desire nice commands to do the navigation work. I came up with a strongly-type way of doing things. Works nicely from XAML, code-behind or viewmodel.
First, make a class that will contain as many commands as you have pages.
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.");
}
}
}
Instantiate that in the app resources to have a data-bindable source.
<Application.Resources>
<common:PagesLocator x:Key="Navigator" />
</Application.Resources>
Finally, you can bind any command from this source.
<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}}" />