Avalondock MVVM Layout

Question

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}"
                                       Loaded="dockingManager_Loaded" 
                                       Unloaded="dockingManager_Unloaded">

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.

Answer 1

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:DockingManager.Theme>
        <xcad:MetroTheme />
    </xcad:DockingManager.Theme>
    <xcad:DockingManager.LayoutUpdateStrategy>
        <Pane:LayoutInitializer/>
    </xcad:DockingManager.LayoutUpdateStrategy>
    <xcad:DockingManager.Resources>            
        <DataTemplate DataType="{x:Type ViewModels:ExplorerViewModel}">
            <Views:ExplorerView />
        </DataTemplate>            
        <DataTemplate DataType="{x:Type ViewModels:TableOfContentViewModel}">
            <Views:TableOfContentView x:Name="TOCView" Focusable="True">
                <Views:TableOfContentView.InputBindings>
                    <KeyBinding Key="F5" Command="{Binding GridF5Command}"/>
                </Views:TableOfContentView.InputBindings>
            </Views:TableOfContentView>
        </DataTemplate>
        <DataTemplate DataType="{x:Type ViewModels:PropertyViewModel}">
            <Views:PropertyView />
        </DataTemplate>           
        <DataTemplate DataType="{x:Type ViewModels:SearchViewModel}">
            <Views:SearchPanel />
        </DataTemplate>
        <DataTemplate DataType="{x:Type ViewModels:DocumentViewModel}">
            <Views:DocumentView />
        </DataTemplate>
        <DataTemplate DataType="{x:Type ViewModels:ReIndexPanelViewModel}">
            <Views:ReIndexPanel />
        </DataTemplate>
    </xcad:DockingManager.Resources>       
    <xcad:DockingManager.LayoutItemContainerStyleSelector>
        <Pane:PanesStyleSelector>
            <Pane:PanesStyleSelector.ToolStyle>
                <Style TargetType="{x:Type xcad:LayoutAnchorableItem}">
                    <Setter Property="Title" Value="{Binding Model.Title}"/>
                    <Setter Property="Visibility" Value="{Binding Model.IsVisible, Mode=TwoWay, Converter={StaticResource BoolToVisibilityConverter}, ConverterParameter={x:Static Visibility.Hidden}}"/>
                    <Setter Property="ContentId" Value="{Binding Model.ContentId}"/>
                    <Setter Property="FlowDirection" Value="LeftToRight"/>
                    <Setter Property="UseLayoutRounding" Value="False"/>
                    <Setter Property="IconSource" Value="{Binding Model.IconSource}"/>
                </Style>
            </Pane:PanesStyleSelector.ToolStyle>
            <Pane:PanesStyleSelector.FileStyle>
                <Style TargetType="{x:Type xcad:LayoutItem}">
                    <Setter Property="Title" Value="{Binding Model.Title}"/>
                    <Setter Property="ToolTip" Value="{Binding Model.FilePath}"/>
                    <Setter Property="ContentId" Value="{Binding Model.ContentId}"/>
                    <Setter Property="CanClose" Value="False"/>                        
                </Style>
            </Pane:PanesStyleSelector.FileStyle>
        </Pane:PanesStyleSelector>
    </xcad:DockingManager.LayoutItemContainerStyleSelector>
    <xcad:LayoutRoot>
        <xcad:LayoutPanel Orientation="Horizontal">                
                <xcad:LayoutAnchorablePaneGroup>
                    <xcad:LayoutAnchorablePane Name="Explorer" DockMinWidth="250"/> 
                    <xcad:LayoutAnchorablePane Name="TOC" DockMinWidth="500"/>
                    <xcad:LayoutAnchorablePane Name="Property" DockMinWidth="300" />
                    <xcad:LayoutAnchorablePane Name="Search" DockMinWidth="300" />
                    <xcad:LayoutAnchorablePane Name="ReIndex" DockMinHeight="300" />
                </xcad:LayoutAnchorablePaneGroup>
            <xcad:LayoutDocumentPaneGroup >
                <xcad:LayoutDocumentPane/>
            </xcad:LayoutDocumentPaneGroup>
        </xcad:LayoutPanel>            
    </xcad:LayoutRoot>
</xcad:DockingManager>