How does ElementName Binding work – Part 3 InheritanceContext

In this part, I am going to introduce a new concept called InheritanceContext. In WPF, there are some elements are not FrameworkElement or even Visual, which means they will not be shown on either Logical Tree or Visual Tree, e.g. Brush, however we still wish they can enjoy the feature called “property value inheritance”. Property value inheritance enables child elements to obtain the value of a particular property from parent elements, inheriting that value as it was set anywhere in the nearest parent element.  

In following example, the Brush can get the DataContext property from its parent, however a Brush is neither a FramewrokElement nor Visual.

 

<Window x:Class="TestElementBindingInUserControl.MainWindow">
    <StackPanel DataContext="Red">
        <Rectangle Width="75" Height="75">
            <Rectangle.Fill>
                <SolidColorBrush Color="{Binding}" />
            </Rectangle.Fill>
        </Rectangle>
    </StackPanel>

</Window> 

 

In this example, Brush doesn’t have a logical parent nor visual parent, so how does it get the DataContext property from its parent? The secret is in InheritanceContext. Brush is a Freezable object whose InheritanceContext property is set to the element which contains it.

Here is the Rectangle, while Rectangle inherits the DataContext property from its Logical Parent StatckPanel.

With the help of InheritanceContext, the ElementName Binding will work properly in following codes:

<Window x:Class="TestElementBindingInUserControl.MainWindow">
    <StackPanel>
        <Button Content="Blue" x:Name="btn"/>
        <Rectangle Width="75" Height="75">
            <Rectangle.Fill>
                <SolidColorBrush Color="{Binding ElementName=btn, Path=Content}" />
            </Rectangle.Fill>
        </Rectangle>
    </StackPanel>

</Window> 

Although SolidColorBrush doesn’t have a Logical parent, it will try to get its InheritanceContext instead, by which it will reach the Rectangle, then follow by the logical parent, we will find the Window which owns a NameScope; Finally btn will be found in this NameScope.

Now let’s take a look at a popular issue in WPF development: use ElementName in ToolTip or ContextMenu.

 

<Window x:Class="TestElementBindingInUserControl.MainWindow"

        Title="MainWindow" x:Name="win">
    <Button >
        <Button.ToolTip>
            <TextBox x:Name="tbx" Text="{Binding ElementName=win, Path=Title}"/>
        </Button.ToolTip>
    </Button>
</Window> 

The content defined in the a ToolTip is not part of Logical tree or Visual tree, it’s not a Freezable object either. Then how can we use ElementName binding in the content?

 

A straightforward solution comes into my mind is to do some hack to set the InheritanceContext property of TextBox to the Window directly. By looking into the source code of FrameworkElement, I found a static filed called InheritanceContextField whose type is UncommonField<DependencyObject> in which there is a SetValue method. By knowing this, I can use reflection to set the InheritanceContext manually.

      void Window_Loaded(object sender, RoutedEventArgs e)
        {
 
            var tooltipContent = tbx.tooltip;
 
            var field = typeof(FrameworkElement).GetField("InheritanceContextField",
                                                          BindingFlags.static | BindingFlags.nonpublic);
 
            var inheritanceContext=field.GetValue(null);
 
            //type of UncommonField<DependencyObject>
            var type = Type.GetType("System.Windows.UncommonField`1[
                                                                    [System.Windows.Dependencyobject,
                                                                     windowsbase,
                                                                     version=3.0.0.0,
                                                                     culture=neutral,
                                                                     publickeytoken=31bf3856ad364e35]
                                                                  ],
                                    windowsbase, version=3.0.0.0, culture=neutral, publickeytoken=31bf3856ad364e35");
 
  
 
            var setMethod=type.GetMethod("SetValue");
            setMethod.Invoke(inheritanceContext,new object[]{ tooltipContent,this});
        }

Although it’s not a good fix, it do resolve the problem. Do we have a better solution? Since ElementName binding cannot work here, we can try to use another Binding - Source Binding.

 

First of all, we need to define a Spy make it inherit from Freezable class,

public class ElementSpy : Freezable
   {
     
       public static readonly DependencyProperty ValueProperty =
           DependencyProperty.Register("Value", typeof(object), typeof(ElementSpy),
               new FrameworkPropertyMetadata(null));
   
       public object Value
       {
           get { return (object)GetValue(ValueProperty); }
           set { SetValue(ValueProperty, value); }
       }

       protected override Freezable CreateInstanceCore()
       {
           throw new NotImplementedException();
       }
   }

Then we put it into the Resource of the Window. Since Freezable object’s InheritanceContext will be set to the containing element, here it’s the window, Element binding will work fine for ElementSpy.

<Window x:Class="TestElementBindingInUserControl.MainWindow"

        Title="MainWindow" x:Name="win">

    <Window.Resources>
        <local:ElementSpy x:Key="spy" Value="{Binding ElementName=win, Path=Title}"/>
    </Window.Resources>

</Window> 

Now we can simply use ElementSpy as a bridge to make ElementName Binding work for ToolTip.

 

<Window x:Class="TestElementBindingInUserControl.MainWindow"

        Title="MainWindow" x:Name="win">

    <Window.Resources>
        <local:ElementSpy x:Key="spy" Value="{Binding ElementName=win, Path=Title}"/>
    </Window.Resources>
    <Button >
        <Button.ToolTip>
            <TextBox  Text="{Binding Source={StaticResource spy}, Path=Value}"/>
        </Button.ToolTip>
    </Button>

</Window> 

 

Here is the rule how ElementName binding works: 

1. Get the BindingExpression which is created by the ElementName Binding.
2. Start from the TargetElement of the BindingExpression. If the value of BindingExpression’s ResolveNamesInTemplate property is true, it will search in the TargetElement’s template, if an element with the same name can be found in its template then return it, else go to next step.
3. Keep searching on the logic tree via its logic parent or InheritanceContext(when logic parent is null), until an element which has NameScope is found, let’s call it NameScopeElement. If no element owns a NameScope, search will stop.
4. Call the NameScope.FindName method on the found NameScope.
5. If the element is found, return it, otherwise try to get the template parent of NameScopeElement; if the template parent is null, it will stop search. or it goes back to step 3, search on the logic tree for an element owns a NameScope.

 

Related resources:

Enable ElementName Bindings with ElementSpy

Artificial Inheritance Contexts in WPF

Hillberg Freezable Trick

Leveraging Freezables to Provide an Inheritance Context for Bindings