Model "namespacing" for wpf StyleSelector?

Question

I am learning how to use avalonDock by debugging its test sample apps. Something I have not been able to explain at this stage is the presence of the "Model" Keyword in some xaml binding.

Mainly in the style selector, if you remove it, the binding does not work anymore:

        <avalonDock:DockingManager.LayoutItemContainerStyleSelector>
            <local:PanesStyleSelector>
                <local:PanesStyleSelector.ToolStyle>
                    <Style TargetType="{x:Type avalonDock:LayoutAnchorableItem}">
                        <Setter Property="Title" Value="{Binding Model.Title}"/>
                        <Setter Property="IconSource" Value="{Binding Model.IconSource}"/>
                        <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="IsSelected" Value="{Binding Model.IsSelected, Mode=TwoWay}"/>
                        <Setter Property="IsActive" Value="{Binding Model.IsActive, Mode=TwoWay}"/>
                    </Style>
                </local:PanesStyleSelector.ToolStyle>
                <local:PanesStyleSelector.FileStyle>
                    <Style TargetType="{x:Type avalonDock:LayoutItem}">
                        <Setter Property="Title" Value="{Binding Model.Title}"/>
                        <Setter Property="ToolTip" Value="{Binding Model.FilePath}"/>
                        <Setter Property="CloseCommand" Value="{Binding Model.CloseCommand}"/>
                        <Setter Property="IconSource" Value="{Binding Model.IconSource}"/>
                        <Setter Property="ContentId" Value="{Binding Model.ContentId}"/>
                    </Style>
                </local:PanesStyleSelector.FileStyle>
            </local:PanesStyleSelector>
        </avalonDock:DockingManager.LayoutItemContainerStyleSelector>

1. MainWindow.xaml
2. PaneStyleSelector

Why ? I have not been able to figure out any "Model" Field or property. And it seems to work without it for other examples:

Microsoft Example

Answer 1

The nice thing about XAML is that there always seems to be a way to do things a number of ways. This, of course, makes it difficult to get ahead of the learning curve sometimes too. In short, whenever you see {Binding _______} think DataContext.

Also, know that object navigation in XAML is similar to IntelliSense when typing in a normal .cs file. Meaning, if you have:

public class A { public B b = new B(); }
public class B { public string C; }

then you can get to A's B's C by doing string s = new A().B.C.

What I'm getting at is, in XAML, these three are the same:

<Style TargetType="{x:Type avalonDock:LayoutAnchorableItem}">
    <Setter Property="Title" Value="{Binding Title, Path=Model}"/>
    ...

<local:PanesStyleSelector.ToolStyle>
    <Style TargetType="{x:Type avalonDock:LayoutAnchorableItem}">
        <Setter Property="DataContext" Value="{Binding Model}" />
        <Setter Property="Title" Value="{Binding Title}"/>
        ...

<!-- What you currently have -->
<Style TargetType="{x:Type avalonDock:LayoutAnchorableItem}">
    <Setter Property="Title" Value="{Binding Model.Title}"/>
    ...

So really, Model is a property the control is going to look for in it's DataContext, and it will bind to the Title property belonging to Model.

Now the question is, how do you figure out if this is correct? Simple. Navigate through the DataContext. There is a number of ways you can do this, rather you debug, or you use F12; but here is a quick way to figure it out.

We know the target type is LayoutAnchorableItem: TargetType="{x:Type avalonDock:LayoutAnchorableItem}", so we look at its source code and look for the Model property. After looking, you don't see it, but you also notice that LayoutAnchorableItem inherits from LayoutItem, which is also our second target type coincidentally. So we look at LayoutItem source code. As you know it, there is a public object Model property. With that being said, we can make the assumption that through a chain of events, we can figure that our Model property ends up getting set to an instance of FileViewModel or ToolViewModel, and both inherit from PaneViewModel.

With that being said, we know that the DataContext of each Pane in the DockingManager is either a LayoutAnchorableItem or LayoutItem, whose Model is eventually set to an instance of FileViewModel or toolViewModel.