How to bind to a resource

Question

I'm struggling with some binding in what is for me, a complicated set up. To recreate the situation, I've created a new WPF project which has removed everything other than this problem.

My MainWindow has it's datacontext set in the code behind (this.DataContext = this;). Within the MainWindow, there is a single user control. My research shows that the UserControl automatically inherits the DataContext from its parent. So, in order to make UserControl have it's own DataContext, I can do this int he code behind with code similar to MyUserControlsCanvas.DataContext = this;. This works as desired

The problem is, my UserControl has a reference to a class and that is inherited via the RealtiveSource TemplatedParent and as such, I can't bind. Now, I appreciate this part probably makes no sense so let me show the full code (sorry, there is quite a bit).

MainWindow.xaml

<Window x:Class="BindingTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:myControl="clr-namespace:BindingTest"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <myControl:MyControl />
    </Grid>
</Window>

MainWindow.xaml.cs

    ...
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this; // this is required although not shown why in this example
        }
    }

MyControl.xaml

<UserControl x:Class="BindingTest.MyControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:myControl="clr-namespace:BindingTest"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Canvas>
            <Canvas.Resources>
                <ControlTemplate x:Key="ResizeDecoratorTemplate" TargetType="{x:Type Control}">
                    <Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                        <Grid.Background>
                            <SolidColorBrush Color="LightSkyBlue" Opacity=".1"></SolidColorBrush>
                        </Grid.Background>
                        <myControl:MoveMe Width="3" Test="{Binding HOW_DO_I_BIND_HERE}" Cursor="SizeWE" Margin="-2 0 0 0" VerticalAlignment="Stretch" HorizontalAlignment="Left" BorderThickness="2" BorderBrush="LightGreen"/>
                    </Grid>
                </ControlTemplate>
            </Canvas.Resources>
            <ContentControl Width="130"
                    MinWidth="50"
                    x:Name ="MyCanvas"
                    MinHeight="50"
                    Canvas.Top="0"
                    Canvas.Left="1"
                    Template="{StaticResource ResizeDecoratorTemplate}" />
        </Canvas>
    </Grid>
</UserControl>

MyControl.xaml.cs

    ...
    public partial class MyControl : UserControl
    {
        public MyControl()
        {
            InitializeComponent();
            MyCanvas.DataContext = this;
            this.ValueOfLeftBorder = 5;
        }

        //Dependancy properties, properties and methods

        public double ValueOfLeftBorder { get; set; }
        public double ValueOfRightBorder { get; set; }
    }

MoveMe.cs

    ...
    public class MoveMe : Thumb
    {
        public double Test
        {
            get { return (double)GetValue(TestProperty); }
            set { SetValue(TestProperty, value); }
        }

        public static readonly DependencyProperty TestProperty = DependencyProperty.Register(
           "Test",
           typeof(double),
           typeof(MainWindow));    

        public MoveMe()
        {
            base.DragDelta += this.ResizeThumb_DragDelta;
        }

        private void ResizeThumb_DragDelta(object sender, DragDeltaEventArgs e)
        {
            //Logic
            MessageBox.Show("I Moved");
        }
    }

Within MyControl.xaml I have the following code

<myControl:MoveMe Width="3" Test="{Binding HOW_DO_I_BIND_HERE}" Cursor="SizeWE" Margin="-2 0 0 0" VerticalAlignment="Stretch" HorizontalAlignment="Left" BorderThickness="2" BorderBrush="LightGreen"/>

I am trying to bind to Test.

My main goal here is just to find Y Positions of this moveable item. I am creating a timeline where I want to be able to select the start and end points. Here is a screen shot of what it currently looks like. Please note, this works fine other than, I need to know the Y Position of the start (light green vertical line) and (dark green vertical line).

Answer 1

I'm not sure I understand your purpose but if you have a MoveMe xaml like:

<UserControl...>
    <Thumb x:Name="root" DragDelta="ResizeThumb_DragDelta">
        <Thumb.Template>
            <ControlTemplate>
                <Rectangle Fill="Blue"/>
            </ControlTemplate>
        </Thumb.Template>
    </Thumb>
</UserControl>

and code behind of

    public double Test
    {
        get { return (double)GetValue(TestProperty); }
        set { SetValue(TestProperty, value); }
    }
    public static readonly DependencyProperty TestProperty = DependencyProperty.Register(
        "Test",
        typeof(double),
        typeof(MoveMe));

    private void ResizeThumb_DragDelta(object sender, DragDeltaEventArgs e)
    {
        Margin = new Thickness(Margin.Left + e.HorizontalChange,0,0,0);
        Test = Margin.Left;
        //or resize ...
    }

and MyControl xaml like:

<Grid>
    <Grid.Background>
        <SolidColorBrush Color="LightSkyBlue" Opacity=".1"></SolidColorBrush>
    </Grid.Background>
    <myControl:MoveMe Width="30" Cursor="SizeWE" 
Test="{Binding RelativeSource={RelativeSource AncestorType=myControl:MyControl}, Path=ValueOfLeftBorder, Mode=OneWayToSource}"
Margin="-2 0 0 0" VerticalAlignment="Stretch" HorizontalAlignment="Left" BorderThickness="2" 
BorderBrush="LightGreen"/>
</Grid>

your ValueOfLeftBorder is kept updated by dragging the MoveMe