How to change style for a single LayoutDocument?

Question

Suppose I have this xaml:

<avalonDock:DockingManager>
    <avalonDock:LayoutRoot>
        <avalonDock:LayoutPanel Orientation="Horizontal">
            <avalonDock:LayoutDocumentPaneGroup>
                <avalonDock:LayoutDocumentPane>
                    <avalonDock:LayoutDocument Title="Main Panel">
                    </avalonDock:LayoutDocument>
                </avalonDock:LayoutDocumentPane>
                <avalonDock:LayoutDocumentPane>
                    <avalonDock:LayoutDocument Title="Panel 02">
                    </avalonDock:LayoutDocument>
                </avalonDock:LayoutDocumentPane>
                <avalonDock:LayoutDocumentPane>
                    <avalonDock:LayoutDocument Title="Panel 03">
                    </avalonDock:LayoutDocument>
                </avalonDock:LayoutDocumentPane>
                <!-- 
                Other LayoutDocumentPane's here...
                -->
            </avalonDock:LayoutDocumentPaneGroup>
        </avalonDock:LayoutPanel>
    </avalonDock:LayoutRoot>
</avalonDock:DockingManager>

Now I need put a different style only for "Main Panel", by example, a red background. All other panels ("Panel 02", "Panel 03", etc...) must be unchanged. All samples I found are to change the entire theme, but I need change only one LayoutDocument element.

score 1 · Answer 1 · answered May 06 '20 at 23:41

You need to use DataTemplates, TemplateSelector, or Converters and you need to give them something that can differantiate between the items you want to change and those you do not want to change.

A WPF Converter on the style property could, for example, use the Title (if its unique across your app) to return a corresponding style for each document. But this would be a very poor implementation - use an enumeration property in the class to make this one more robust.

An even better solution is the usage of a TemplateSelector based on a class hierarchy of inherating classes over your document viewmodel - but this is more involved - but there are some samples to look at: Here is one that does the same for LayoutAnchorables.

score 1 · Answer 2 · answered Jun 09 '20 at 10:37

You might simply change the Style of LayoutDocument adding a DataTrigger that would change background color basing on a property set on your ViewModel.

That property should be set to true (if the logic behind is binary but should be more complex if needed) just on the ViewModel of your MainPanel.

Please have a look to the Theme.xaml of AvalonDock and search for <Style TargetType="{x:Type avalonDockControls:LayoutDocumentTabItem}">. Inside that style you can easily access The ViewModel binded to any TabItem by simply access {Binding LayoutItem.Model.<my_property>

How to change style for a single LayoutDocument?

2 Answers2