Command to AppBarButton in CommandBar within Page.BottomAppBar doesn't fire

Question

I am working on a little app for Windows RT / 8.1 using the MVVM-Pattern.

The problem is, that the binded command (coming from the ViewModel) to a AppBarButton in a CommandBar in Page.BottomAppBar is not firing, when clicked on. It doesn't work too, if I set the DataContext to the ViewModel within the CommandBar in Page.BottomAppBar.

If I am moving the CommandBar-Code without Page.BottomAppBar into the grid, the command works fine, but the app doesn't detect taps on the Background anymore, which means, that the CommandBar doesn't Close, when it is supposed to.

I think, that it has something to do with the DataContext-Binding, but I don't have a clue, how to fix this.

There are also no errors or hints showing up. Is there a solution out there? Thanks you very much! :)

WorkListView.xaml: Set ViewModel

<Page.Resources>
    <x:String x:Key="AppName">My Worklist</x:String>
    <vm:WorkListViewModel x:Key="viewModel"/>        
</Page.Resources>

WorkListView.xaml: Set DataContext for Grid (Just FYI)

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" DataContext="{StaticResource viewModel}">

WorkListView.xaml: Bind Command to AppBarButton in BottomAppBar (This doesn't work; RefreshCommand doesn't fire up, when clicked on)

<Page.BottomAppBar>
    <CommandBar x:Name="cmdBar" Background="#FF7300">
        <AppBarButton Icon="Refresh" Label="Refresh" IsEnabled="True" Command="{Binding RefreshCommand}"/>
    </CommandBar>
</Page.BottomAppBar>

WorkListView.xaml: Alternative binding of the Command within the Grid (This works, but the app doesn't detect taps on the Background anymore)

<Grid Grid.Row="2">
    <CommandBar x:Name="cmdBar" Background="#FF7300">
        <AppBarButton Icon="Refresh" Label="Refresh" IsEnabled="True" Command="{Binding RefreshCommand}"/>
    </CommandBar>
</Grid>

WorkListViewModel.cs: Setting RefreshCommand / Delegate RefreshCommand to OnExecuteRefreshCommand

private DelegateCommand _refreshCommand;
public DelegateCommand RefreshCommand
{
    get { return _refreshCommand; }
    set { this.SetProperty<DelegateCommand>(ref _refreshCommand, value); }
}
public WorkListViewModel()
{
    this.ItemsView = this.CreateCollectionView(_workList);
    this.ItemsView.CurrentChanged += this.OnCurrentItemChanged;
    this.RefreshCommand = new DelegateCommand(this.OnExecuteRefreshCommand);

}
private async void OnExecuteRefreshCommand(object parameter)
{
    ItemsView.Clear();
    SetList(await Helpers.WebServiceConnector.refreshWorkList());
}

//EDIT: I already put a breaking Point within the OnExecuteRefreshCommand to check, if the app breaks. Apparently it doesn't, it seems, that it doesn't recognize the binding at all.

Another weird thing is, when I right click on "RefreshCommand" within the Command Binding in the AppBarButton and click on "Go To Definition", Visual Studio Redirects me immediately to the RefreshCommand Method in the ViewModel.

Does the Output Window show you some binding errors if you try the scenario that doesn't work? — Marco Minerva
Yes, but there are no errors showing up. I forgot to say, that I put a breakpoint in the OnExecuteRefreshCommand-Method, too and the app never breaks, when i am clicking on the button. And if I right click on RefreshCommand within the AppBarButton and click on "Go To Definition", he's actually jumping to the ViewModel. — basedgod
If I understand well, the scenario that doesn't work if the one in which the AppBar is outside of the Grid. In fact, in this case, as the DataContext is set to the Grid, the AppBar doesn't have any DataContext to search for the RefreshCommand property. Try to set the DataContext at Page level. — Marco Minerva
Yeah, you understood well. Thanks for your advice, but it didn't really work out. I did something like this <Page ... xmlns:mvvm="using:WorkList.MvvmHelpers"> and <Page.DataContext> <vm:WorkListViewModel/> </Page.DataContext> — basedgod

basedgod basedgod · Accepted Answer · 2013-11-13T10:14:12

I solved the Problem:

All i had to do was: put the ViewModel into the App.xaml Resources, instead into the Page Resources:

App.xaml Application.Resources

<Application.Resources>
    <ResourceDictionary>
        <vm:WorkListViewModel x:Key="workVM" />
    </ResourceDictionary>
</Application.Resources>

and binded it directly into the WorkListView Page and erased the binding within the Grid:

WorkListView.xaml

DataContext="{StaticResource workVM}"´

There was probably a conflict between two bindings before.

Command to AppBarButton in CommandBar within Page.BottomAppBar doesn't fire

1 Answers