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):

OneNote Appbar1

OneNote Appbar2

OneNote Appbar3

OneNote Appbar4

---

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!

Answer 1

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 .