MvvmCross Windows Store How to bind different ViewModels to Appbar?

Question

I use 3 ViewModel: Folders, Folder and Item (Folder in Folders and Item in Folder).

So, I use 3 View for these 3 ViewModels for Windows Phone app.

Then, I want to create app with master detail view for Windows Store and use 1 View for those ViewModels. I want create app like here:

1) http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh758322.aspx);

2) Like OneNote and Mail Windows Store apps from Microsoft.

I understand, that I must use "Custom Presenters" to show data from 3 ViewModels on the 1 View.

So, I tried to use "MvvmCross - Controls Navigation Plugin" (https://github.com/ChristianRuiz/MvvmCross-ControlsNavigation).

MvvmCross Controls Navigation Plugin put 2 other View in a UserControls. I though, it suits me fine, but I found one issue (Appbar in Windows Store apps).

Appbar have to change buttons based on a section, which user select. So, I need to change it dynamically and bind to different ViewModels depends on contecst (user clicks).

Early I did it by delete/add buttons in code behind without any ViewModel.

I can give example of Appbar dynamically changes depends on context: OneNote application for Windows Store platform.

Example of Appbar (link):

Is it possible to create master detail app with mvvmcross?

If it is, so how can I do it?

Could you hint me, because I can't find any solution?

Or I must create one page navigation for Windows Store app (I don't want to do it, because I think it is not convenient for my app)?

Or I must bind appbar only with one (first loaded) ViewModel (I think, it isn't convenient too)?

I also tried to place Appbar like UserControl, but I don't know hot to bind it to different ViewModels or if I bind it to AppbarViewModel, I don't know hot to inform others ViewModel.

Thanks in advance anyway!

updated 1

I tried to solve my problem with Appbar like UserControl and AppbarViewModel.

Also I tried use "MvvmCross Messenger plugin" to inform other ViewModels about Button Events, which is raised in appbar.

Link to the MvvmCross Messenger plugin: https://github.com/MvvmCross/MvvmCross/wiki/MvvmCross-plugins#messenger

Now, I have problem with Page.BottomAppBar again.

I create AppbarControl and AppbarViewModel.

1) When I put AppbarControl in Page.BottomAppBar:

<Page.BottomAppBar>
    <AppBar>
        <controls:AppbarControl></controls:AppbarControl>
    </AppBar>
</Page.BottomAppBar>

I get an error like this:

Error seen during navigation request to AppbarViewModel - error KeyNotFoundException: Could not find view for PortableTasks.ViewModels.AppbarViewModel at Cirrious.MvvmCross.Views.MvxViewsContainer.GetViewType(Type viewModelType) at Cirrious.MvvmCross.WindowsStore.Views.MvxStoreViewPresenter.Show(MvxViewModelRequest request)

2) When I don't put AppbarControl in Page.BottomAppBar and put it in other place in a page like this:

<controls:AppbarControl Grid.Row="2"></controls:AppbarControl>

Then it works well, but it isn't convenient control IsOpen=true/false Appbar, when user will use right mouse click.

How to overcome this problem?

updated 2

I almost solved the problem with AppBar with IsOpen="True" and IsSticky="True" property of AppBar.

More about IsSticky property here: issticky

Xaml code below:

<Page.BottomAppBar>        
    <AppBar IsOpen="True" IsSticky="True">
         <controls:AppbarControl></controls:AppbarControl>
    </AppBar>
</Page.BottomAppBar>

Where AppbarControl is:

<controls:MvxStoreControl xmlns:controls="using:MupApps.MvvmCross.Plugins.ControlsNavigation.WindowsStore">
    <Grid >
        <StackPanel Orientation="Horizontal">            
                <AppBarButton/>
                <AppBarButton/>
        </StackPanel>
    </Grid>    
</controls:MvxStoreControl>

Also I change a little source code of "MvvmCross - Controls Navigation Plugin". After this improvement the error "Could not find view for AppbarViewModel" disappear. If I don't use IsSticky="True" properties the problem appears again.

Thanks in advance!

Thanks for the question - and the updates. I'm a little lost where to start on answering this currently. One basic answer is that master-detail is definitely possible using Mvx - but it definitely requires a custom presenter (custom navigation service). For the appbar, there isn't really a standard answer - normally I'd manipulate it on a page by page basis, but where that isn't possible then the messenger and/or code behind does seem like a good approach. Sorry, I can't answer more formally - I don't have a standard answer here. It's code and the app is king. — Stuart

Maks Maks · Accepted Answer · 2014-06-25T20:52:28

I solved this problem with change a source code of "MvvmCross - Controls Navigation Plugin" for Windows Store platform.

I create 1 FirstViewModel and 4 ViewModel for 4 Controls (Folders, Folder, Mail, and Setting ViewModel).
Then put all Controls in FirstView which correspond FirstViewModel.
Also I created 3 AppbarControl, which correspond 3 ViewModels (Folders, Folder, and Mail ViewModel) define above.
Then I bind 3 AppbarControl to the 3 ViewModels (Folders, Folder, and Mail ViewModel), so if I click on a button in an AppbarControl correspondent ViewModel will handle the Command.
I put 3 AppbarControl in Bottum.Appbar.
I control which AppbarControl have to be shown by Visibility property of AppbarControl in FirstViewModel by Events (mouse clicks as example).

I checked, and it seems to work.

I'd like to hear about any improvements or alternative approaches.

Source code on GitHub.

MvvmCross Windows Store How to bind different ViewModels to Appbar?

1 Answers