Data binding outside the visual tree. Data Context bridging

Question

I am trying to bind a dynamic behavior to a visual element outside the WPF logical and visual trees.

My problem is that the RadChart plot color is given in (quasi path): RadChart.SeriesMapping.LineSeriesDefinition.Appearance.Stroke

I originally wanted to Bind that to a property of the chart datacontext in XAML. Naively, I just wrote a regular {Binding PlotBrush}

Compiler returned "Cannot Find Governing FrameWorkelement" error. After reading up, I reckon that this means that resolving the datacontext up the hierarchy did not work. Because its ancestors (XAML speaking) has other types than FrameWorkElement and other relationships than being contents of a contents control. At least, that is my current understanding of it. Please correct me.

So, I found the "DataContext Bridge" http://www.codeproject.com/KB/WPF/AttachingVirtualBranches.aspx

Simply speaking it says that you bind the datacontext property of the framework element that is at runtime assigned the datacontext (not any of those that inherits it) to the datacontext of a FrameWorkElement instance within the resources. Then the same resource object instance is used to bind to the datacontext property of a "branch" that you wish to "attach" to the DataContext inheritance dynamic. But the author of the article had the luxury of being able to implement the validationrule consumer of the observed property. SolidColorBrush is sealed and I imagine it would be quite some work to implement a complete Brush, even using a decorator.

In my case, this does not help me do what I want, but I am "so close". So I wonder if there is some aspect of XAML tricks that could help me out.

<Window.Resources>
    <local:FrameWorkElement x:Key="DataContextBridge"/>
</Window.Resources>

However, it is unclear how I utilize this. There is no object whose datacontext should be set. AppearanceSettings is not a FrameWorkElement.

<telerik:SeriesAppearanceSettings>
   <telerik:SeriesAppearanceSettings.Stroke>
       Ok, how do I use the fact that I can access the datacontext here?                                         
   </telerik:SeriesAppearanceSettings.Stroke>
</telerik:SeriesAppearanceSettings>

So, the next step was wether I could get the brush object directly somehow. I experimented with this kind of thing, just messing around:

.cs :

public class ObservableBrush : FrameworkElement
{
    public Brush Brush
    {
        get { return (Brush) GetValue(BrushProperty); }
        set { SetValue(BrushProperty, value); }
    }

    public static readonly DependencyProperty BrushProperty =
        DependencyProperty.Register("Brush", typeof (Brush), typeof (ObservableBrush), new UIPropertyMetadata(new SolidColorBrush(Colors.Black)));
}

Top of XAML:

<Window.Resources>
    <local:ObservableBrush x:Key="StrokeBrush"/>
</Window.Resources>

Inline XAML:

<telerik:SeriesAppearanceSettings.Stroke>
     <Binding Path="Brush">
     <Binding.Source>
          <Binding Source="{StaticResource ResourceKey=StrokeBrush}" Path="DataContext"/>
     </Binding.Source>                                            
     </Binding>                                     
</telerik:SeriesAppearanceSettings.Stroke>

"Binding" is not a frameworkelement, nor is "Source" a dependencyproperty, either, so the runtime of course complains. I am aware that the Brush property wont ever return anything other than the default value given in the dependency property registration.

I am sort of going on the second day straight on this problem. I think that my next two attempts will be to: * Make ObservableBrush an actual Brush. Then programatically set it (effectively using standard dynamic resource binding instead). I don't like it. I wanted to make databinding work. * Bridge a BRUSH instead of DATACONTEXT.

XAML part of this works fine:

<telerik:SeriesAppearanceSettings.Stroke>
     <Binding Source="{StaticResource ResourceKey=StrokeBrush}" Path="Brush"/>
</telerik:SeriesAppearanceSettings.Stroke>

But again, how do I bind the Brush to the DataContext property? Is there some override that I can use within ObservableBrush to make Brush dynamically follow the one in the datacontext?

How about creating a fake visual element within the tree and then associate TWO bindings to it?

<!-- Within the visual tree scope -->
<SomeFrameWorkElementType>
     <SomeFrameWorkElemetType.SomeBrushProp>
         <Binding Source="{StaticResource ResourceKey=StrokeBrush}" Path="Brush" Mode="OneWayToSource"/>
         <Binding Stroke/>
     </SomeFrameWorkElemetType.SomeBrushProp>
<SomeFrameWorkElementType>

And this somehow will "connect" the two bindings?

Or is there some (un)official "helper class" for this type of functionality?

Or am I barking up the wrong tree, and (much) better off solving this in the code-behind through dynamic resource binding?

Any thoughts or observations on how to go on about this? Other than on my apparent self destructiveness for insisting on databinding when dynamic resources should be solving this.

Answer 1

you found a good article there by Josh Smith, but it is a little dated. The same guy wrote an even better article about one year later, that covers pretty much the same question but has better answers: Artificial Inheritance Context

There he uses the class DataContextSpy and while I still don't completely get what you are trying to accomplish I'll try to show you how you use it:

<Grid><!-- this is some container where its DataContext has the PlotBrush Property-->
    <Grid.Resources>
        <spy:DataContextSpy x:Key="Spy"/>
    </Grid.Resources>
    <telerik:thisIsYourControl>
        <telerik:SeriesAppearanceSettings.Stroke>
             <Binding Source="{StaticResource Spy}" Path="DataContext.PlotBrush"/>
        </telerik:SeriesAppearanceSettings.Stroke>
    </telerik:thisIsYourControl>
<Grid>

I hope this helps and works for you. I have not used telerik controls before, that's why I can't code a complete example, still hope this covers it.