Adding a AnchorablesSource in AvalonDock using MVVM ViewModel first

Question

I having problems adding an AvalonDock AnchorablesSource under a ViewModel first MVVM approach using Stylet.

My avalonDock XAML is as follows:

<DockingManager 
        Grid.Row="1"
        DocumentsSource="{Binding Scl.Documents}"
        AnchorablesSource="{Binding Scl.DocumentsAnchorable}"            
        x:Name="dockManager"
        AllowMixedOrientation="True"
        AutoWindowSizeWhenOpened="True"
        IsVirtualizingAnchorable="True"
        IsVirtualizingDocument="True"
        ActiveContent="{Binding Scl.ActiveDocument, Mode=TwoWay}"
        DocumentClosed="{s:Action DocumentClosed}"             
        >
        <DockingManager.LayoutItemContainerStyle>
            <Style TargetType="{x:Type LayoutItem}">
                <Setter Property="Title" Value="{Binding Model.Title}"/>
                <Setter Property="Height" Value="Auto"/>
                <Setter Property="IconSource" Value="{Binding Model.IconSource}" />
            </Style>
        </DockingManager.LayoutItemContainerStyle>
        <DockingManager.LayoutItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"></RowDefinition>
                    </Grid.RowDefinitions>
                    <ContentControl s:View.Model="{Binding Content , FallbackValue=#ERROR Content.title#}"></ContentControl>
                </Grid>
            </DataTemplate>
        </DockingManager.LayoutItemTemplate>
        <LayoutRoot x:Name="root">
            <LayoutPanel Orientation="Horizontal">
                <LayoutAnchorablePane x:Name="LayoutAnchorablePane" DockWidth="50">
                </LayoutAnchorablePane>
                <LayoutDocumentPaneGroup>
                    <LayoutDocumentPane x:Name="LayoutDocumentPane">
                        <!--  This is where the new windows are typically added -->
                    </LayoutDocumentPane>
                </LayoutDocumentPaneGroup>
                <LayoutAnchorablePaneGroup DockWidth="250">
                    <LayoutAnchorablePane x:Name="LayoutAnchorablePane1">
                    </LayoutAnchorablePane>
                </LayoutAnchorablePaneGroup>
            </LayoutPanel>

            <LayoutRoot.LeftSide>
                <LayoutAnchorSide>
                    <LayoutAnchorGroup>
                    </LayoutAnchorGroup>
                </LayoutAnchorSide>
            </LayoutRoot.LeftSide>
        </LayoutRoot>
    </DockingManager>

In my ViewModel I have:

public ObservableCollection<LayoutDocument> Documents {get; set;} = new ObservableCollection<LayoutDocument>();
public ObservableCollection<LayoutAnchorable> DocumentsAnchorable { get; set; } = new ObservableCollection<LayoutAnchorable>();

When I add a new normal layout to the LayoutDocumentPane as follows it works perfectly:

    public void NewLayout(Screen viewModel, string title)
    {
        if (IsOpen(title) == true)
        {
            return;
        }

        LayoutDocument layout = new LayoutDocument
        {
            Title = title,
            Content = viewModel
        };

        Documents.Add(layout);
        Documents.Move(Documents.Count - 1, 0);
        
        ActiveDocument = layout;

    }

But If try and add a new Anchorable Layout (even with a know working ViewModel like this I get an error.

    public void NewLayoutAnchorable(Screen viewModel, string title)
    {
        if (IsOpen(title) == true)
        {
            return;
        }
        LayoutAnchorable layout = new LayoutAnchorable
        {
            Title = title,
            Content = viewModel
        };

        DocumentsAnchorable.Add(layout);
        //DocumentsAnchorable.Move(Documents.Count - 1, 0);
        //ActiveDocument = layout;

    }

The error I get is:

Exception thrown: 'Stylet.StyletViewLocationException' in Stylet.dll Exception thrown: 'System.Windows.Markup.XamlParseException' in PresentationFramework.dll Unable to transform ViewModel name AvalonDock.Layout.LayoutAnchorable into a suitable View name

Does anyone know why Stylet can find the relevant View then the ViewModel is used for a LayoutDocument but not a LayoutAnchorable in AvalonDock?

Edit 1:

The issue does not appear to be with the LayoutAnchorable viewmodels, as I can add them to the ObservableCollection<LayoutDocument> and they find a view just fine. It is only a problem if I try and add a viewmodel to the ObservableCollection<LayoutAnchorable> that I get the error, so it appear to be an issue with my AvalonDock XAML.

Edit 2:

If I remove the following line from my XAML:

<ContentControl s:View.Model="{Binding Content , FallbackValue=#ERROR Content.title#}"></ContentControl>

I can add ViewModels to both by observable collections, and the windows appear in both the LayoutPane and the AchorablePane, except the windows are missing their content.

It therefore appears that I need a LayoutItemTemplate that works for anchorable windows but I can't seem to find an example.

Edit 3:

I've made a bare bones project that demonstrates the problem here if anybody wants to have a play.

https://github.com/montyjohn/StyletAvalonDockTest.git

If Stylet and AvalonDock can be made to play nicely together it would be a great starting point so new applications.

Egemen Çiftci · Accepted Answer · 2022-10-30T18:35:06.367

I think there is a problem with DockingManager, because it sets different DataContexts for its items. The DataContext for ContentControl is LayoutDocument for DocumentPane but it is ContentPresenter (Parent of LayoutAnchorable) for AnchorablePane.

You can use this workaround. I added a template selector and modified ShellView.xaml file. Now it works.

ShellView.xaml

<Window x:Class="StyletAvalonDockTest.Views.ShellView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ts="clr-namespace:StyletAvalonDockTest.TemplateSelectors"
    xmlns:s="https://github.com/canton7/Stylet"
    mc:Ignorable="d"
    Title="ShellView" Height="450" Width="800">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Orientation="Horizontal">
        <Button Width="auto" Command="{s:Action NewLayout}">Add New Window</Button>
        <Button Width="auto" Command="{s:Action NewLayoutAnchorable}">Add New Anchorable Pane</Button>
    </StackPanel>

    <DockingManager
        Grid.Row="1"
        DocumentsSource="{Binding Documents}"
        AnchorablesSource="{Binding DocumentsAnchorable}"
        >

        <!--If the theme is removed, neither the new Layout, nor the New Anchorable Layout work-->
        <DockingManager.Theme>
            <Vs2013LightTheme />
        </DockingManager.Theme>

        <!--This adds the title to the new windows-->
        <DockingManager.LayoutItemContainerStyle>
            <Style TargetType="{x:Type LayoutItem}">
                <Setter Property="Title" Value="{Binding Model.Title}"/>
            </Style>
        </DockingManager.LayoutItemContainerStyle>

        <DockingManager.LayoutItemTemplateSelector>
            <ts:PanesTemplateSelector>
                <ts:PanesTemplateSelector.DocumentPaneTemplate>
                    <DataTemplate>
                        <ContentControl s:View.Model="{Binding Content}"/>
                    </DataTemplate>
                </ts:PanesTemplateSelector.DocumentPaneTemplate>
                <ts:PanesTemplateSelector.AnchoroblePaneTemplate>
                    <DataTemplate>
                        <ContentControl s:View.Model="{Binding Content.Content}"/>
                    </DataTemplate>
                </ts:PanesTemplateSelector.AnchoroblePaneTemplate>
            </ts:PanesTemplateSelector>
        </DockingManager.LayoutItemTemplateSelector>

        <LayoutRoot>
            <LayoutPanel>
                <LayoutAnchorablePane>
                    <!--  This is where the new Anchorable windows are added -->
                </LayoutAnchorablePane>
                <LayoutDocumentPaneGroup>
                    <LayoutDocumentPane>
                        <!--  This is where the new windows are added -->
                    </LayoutDocumentPane>
                </LayoutDocumentPaneGroup>
            </LayoutPanel>
        </LayoutRoot>

    </DockingManager>
</Grid>

PanesTemplateSelector.cs

using AvalonDock.Layout;
using System.Windows;
using System.Windows.Controls;

namespace StyletAvalonDockTest.TemplateSelectors
{
    public class PanesTemplateSelector : DataTemplateSelector
    {
        public DataTemplate DocumentPaneTemplate { get; set; }

        public DataTemplate AnchoroblePaneTemplate { get; set; }

        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            if (item is LayoutDocument)
                return DocumentPaneTemplate;
            else
                return AnchoroblePaneTemplate;
        }
    }
}

Adding a AnchorablesSource in AvalonDock using MVVM ViewModel first

1 Answers1