Binding between my usercontrol and ViewModel

Question

Can not do Binding

Random (MyViewModel) -> VMTestValue (MyViewModel) -> TestUserControl (MainWindow)

"MyViewModel" is ViewModel for "MainWindow"

All project: http://rusfolder.com/32608140

TestUserControl.xaml

<UserControl x:Class="TestBinding.TestUserControl"
             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" 
             mc:Ignorable="d" 
             Background="Green"
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <TextBlock Background="Gray" Margin="50" FontSize="18" Text="{Binding TestValue}" />
        <Rectangle  Height="200" Width="{Binding TestValue}" Fill="#FFFF1717" />
    </Grid>
 </UserControl>

TestUserControl.cs

...
public TestUserControl()
        {
            InitializeComponent();

            this.DataContext = this;
        }

        public static readonly DependencyProperty TestValueProperty =
           DependencyProperty.Register("TestValue", typeof(int), typeof(TestUserControl),
               new FrameworkPropertyMetadata((int)255)
               );

        public int TestValue
        {
            set { SetValue(TestValueProperty, value); }
            get
            {
                return (int)GetValue(TestValueProperty);
            }
        }
...

MyViewModel.cs

using System;

using System.Timers;
using Microsoft.Practices.Prism.ViewModel;

namespace TestBinding
{
    class MyViewModel : NotificationObject
    {
        private int _VMTestValue;

        private Timer timer;
        private Random _random;

        public MyViewModel()
        {
            _random=new Random();

            timer=new Timer();
            timer.Interval = 500;
            timer.Elapsed += new ElapsedEventHandler(timer_Elapsed);
            timer.Start();
        }

        void timer_Elapsed(object sender, ElapsedEventArgs e)
        {
            VMTestValue = _random.Next(10, 300);
        }

        public int VMTestValue
        {
            set 
            { 
                _VMTestValue = value;
                this.RaisePropertyChanged(() => this.VMTestValue);
            }
            get { return _VMTestValue; }
        }
    }
}

MainWindow.cs

...
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MyViewModel();
        }
    }
...

MainWindow.xaml

...
<TestBinding1:TestUserControl TestValue="{Binding VMTestValue}" />
<TextBlock VerticalAlignment="Bottom" Background="Blue" FontSize="20" Text="{Binding VMTestValue}" />
...

Why can not I go to the UserControl?

Answer 1

You should let your UserControl inherit the DataContext:

public TestUserControl()
{
    InitializeComponent();

    //this.DataContext = this;
}

If you want to keep the DataContext of TestUserControl to itself, you can use RelativeSource:

<TestBinding1:TestUserControl TestValue="{Binding DataContext.VMTestValue, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}}" />

Or use ElementName, let's say your MainWindow is named mainWin :

<TestBinding1:TestUserControl TestValue="{Binding VMTestValue, ElementName=mainWin}" />

Answer 2

in addition to baboon i do this in my projects:

remove this.DataContext = this; and add the following to your xaml

<UserControl x:Class="TestBinding.TestUserControl"
         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" 
         mc:Ignorable="d" 
         Background="Green"
         d:DesignHeight="300" d:DesignWidth="300"
         x:Name="uc">
<Grid>
    <TextBlock Background="Gray" Margin="50" FontSize="18" Text="{Binding ElementName=uc,Path=TestValue}" />
    <Rectangle  Height="200" Width="{Binding ElementName=uc,Path=TestValue}" Fill="#FFFF1717" />
</Grid>
</UserControl>