Bind multiple properties to ToolWindow

Docking/MDI for WPF Forum

Posted 8 months ago by Miles Merckel
Version: 19.1.0685
Avatar

Hi was hoping you could help me, I’m using your “Custom Context Content” example from Docking/MDI – Quickstarts. Using the red or green Ellipse in the datatemplate.


I’m trying to bind the ellipse to a Boolean property from my VM which I have managed, this breaks the DataContext for the visual tree for anything within the ToolWindow. I can fix this by Binding the DataContext for the next control in the ToolWindow using RelativeSource etc. The problem is I’m using another binding on another property on the ToolWindow (TabTintColor binding) but can’t workout how to bind the property as the DataContext has been redirected.


Is there any way to bind multiple properties on the ToolWindow? Or re hash the DataTemplate?

<ribbon:RibbonWindow.Resources>
    <shared:ConditionalConverter x:Key="StatusLightConditionalConverter">
        <shared:ConditionalConverter.TrueValue>
            <SolidColorBrush Color="#5cd404" />
        </shared:ConditionalConverter.TrueValue>
        <shared:ConditionalConverter.FalseValue>
            <SolidColorBrush Color="#d40404" />
        </shared:ConditionalConverter.FalseValue>
    </shared:ConditionalConverter>

    <DataTemplate x:Key="StatusIconDataTemplate">
        <Ellipse Margin="2" Width="12" Height="12" StrokeThickness="1" Stroke="#ffffff" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{Binding Converter={StaticResource StatusLightConditionalConverter}}" />
    </DataTemplate>
</ribbon:RibbonWindow.Resources>

...
<dock:ToolWindow TabTintColor="{Binding MyValidConnection, Mode=OneWay, Converter={StaticResource B2Col}}"
            AutoHideTabContextContentTemplate="{StaticResource StatusIconDataTemplate}"
            StandardMdiTitleBarContextContentTemplate="{StaticResource StatusIconDataTemplate}"
            TabbedMdiTabContextContentTemplate="{StaticResource StatusIconDataTemplate}"
            ToolWindowContainerTabContextContentTemplate="{StaticResource StatusIconDataTemplate}"
            ToolWindowContainerTitleBarContextContentTemplate="{StaticResource StatusIconDataTemplate}" >
    <dock:ToolWindow.DataContext>
        <Binding Path="MyValidConnection"/>
    </dock:ToolWindow.DataContext>

    <DockPanel DataContext="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type local:MainView}}, Path=DataContext}">
...
    </DockPanel>
</dock:ToolWindow>

Comments (4)

Posted 8 months ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Miles,

First, I would recommend that if you set a ToolWindow.DataContext, you always do it more like this:

<dock:ToolWindow DataContext="{Binding ElementName=dockSite, Path=DataContext}">...

The Docking/MDI's Troubleshooting documentation topic talks about this a bit.  If you don't have an ElementName specific reference to something higher up in the hierarchy that is constant, as layout changes occur, the inheritance can get broken.  Using ElementName to a DockSite or Window will prevent that problem.

The same data context for the tool window is passed to the title bar and tab contextual areas. 

Without knowing the actual element structure and what the data context type is, it's hard to give a recommendation.  Is MainView a UserControl that contains the DockSite and its tool windows?  What Type is the data context there, and which property of that Type is the property you want the tool window to have as a data context?  Or do you want the tool window to just use MainView.DataContext directly?  Is "MyValidConnection" a boolean property right on that MainView.DataContext?


Actipro Software Support

Posted 8 months ago by Miles Merckel
Avatar

Hi thanks for the reply.

Ok I understand binding the ToolWindow.DataContext to the parent DockSite and have done that now.

Yes “MyValidConnection” is a Boolean property exposed on the MainView.DataContext and the whole window has the single datacontext/VM containing a DockSite with a couple of ToolWindows. My problem is trying to hook the MyValidConnection property to the appearance of the Ellipse in a similar manner to the “Custom Context Content” example.

Probably a lack of DataTemplate knowledge on my part, I did try binding to the ToolWindow Content but that doesn’t work as the DockPanel inside the ToolWindow means the Content is already set.

Is there an easier way to bind the Ellipse appearance to the MyValidConnection property?

Answer - Posted 8 months ago by Actipro Software Support - Cleveland, OH, USA
Avatar

Hi Miles,

If you have the ToolWindow.DataContext bound to the DockSite.DataContext, then I would expect that same DataContext to be passed into the DataTemplates for the title bar and tab contexts.  Thus I would expect you could do this:

<DataTemplate x:Key="StatusIconDataTemplate">
	<Ellipse Margin="2" Width="12" Height="12" StrokeThickness="1" Stroke="#ffffff" HorizontalAlignment="Center" VerticalAlignment="Center"
		Fill="{Binding Path=MyValidConnection, Converter={StaticResource StatusLightConditionalConverter}}" />
</DataTemplate>

Does that work for you?


Actipro Software Support

Posted 8 months ago by Miles Merckel
Avatar

Hi thanks for the reply.

Yes that works. I had previously done what I thought was the same as your last example and it didn’t work so I assumed the problem was the DataContext.

Turns out I provided my own ValueConverter for the Ellipse Fill and had used Color where as it should be SolidColorBrush. There was a “System.Windows.Data Error: 4” but I missed it!

Many Thanks for your help

Miles

The latest build of this product (v2020.1.1) was released 15 days ago, which was after the last post in this thread.

Add Comment

Please log in to a validated account to post comments.