Home Ask Login Register

Developers Planet

Your answer is one click away!

Philipp Doniec February 2016

Avalondock MVVM Layout

So The Question has been asked before but not answered or not answered the way I would like

I know how to create the Layout I want to achive, using LayoutAnchorablePaneGroup, LayoutAnchorablePane and LayoutDocument in XAML, but I wanted to use Avalondock in a MVVM way, reducing my XAML to:

<avalonDock:DockingManager x:Name="dockingManager" 
                                       DataContext="{Binding DockManagerViewModel}"
                                       DocumentsSource="{Binding Documents}"
                                       AnchorablesSource="{Binding Anchorables}"

Filling the Documents and Anchorables makes the desired windows appear in the dockingManager, but I don't see how I can secify the location in which they will appear.

How can I specify some rules ( prefferably in XAML ), to build a specific Layout, without loosing the MVVM separation?

E.G.: objects of Type A should all go togehter in a LayoutAnchorablePane on the right, Objects of type B all go together in a LayoutAnchorablePane on the left etc..

Thanks in advance.


Abin Mathew February 2016

I went to the same situation. and found a solution which is tricky but works for me.

Followed the Solution on Code Project and implimented save and load the layout.

note that for the first time when the application starts it does not have the layout so you need to create a XML with your desired layout and later on you can load the saved layout. hope this helps.

Example Docking Manager :

  <xcad:DockingManager x:Name="DockingManagerDockView"
                         AnchorablesSource="{Binding AnchorableSource}" 
                         DocumentsSource="{Binding DocumentSource}" 
                         Utility:AvalonDockLayoutSerializer.SaveLayoutCommand="{Binding SaveLayoutCommandOnExit}"
                         Utility:AvalonDockLayoutSerializer.LoadLayoutCommand="{Binding LoadLayoutCommand}">       
        <xcad:MetroTheme />
        <DataTemplate DataType="{x:Type ViewModels:ExplorerViewModel}">
            <Views:ExplorerView />
        <DataTemplate DataType="{x:Type ViewModels:TableOfContentViewModel}">
            <Views:TableOfContentView x:Name="TOCView" Focusable="True">
                    <KeyBinding Key="F5" Command="{Binding GridF5Command}"/>
        <DataTemplate DataType="{x:Type ViewModels:PropertyViewModel}">

Post Status

Asked in February 2016
Viewed 2,931 times
Voted 9
Answered 1 times


Leave an answer

Quote of the day: live life