Question

I have a:

System.Windows.Data Error: 4 : Cannot find source for binding with
reference ‘ElementName=Test’. BindingExpression:Path=Value;
DataItem=null; target element is ‘Slider’ (Name=”); target property
is ‘Value’ (type ‘Double’)

error in a very special case.
I though about a name scope problem but I don’t know how to fix it.

Consider the following WPF application :

MyUserControl.xaml:

<UserControl x:Class="WpfApplication1.MyUserControl"
             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" 
             d:DesignHeight="300" d:DesignWidth="300">

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Label Grid.Row="0" Content="Move me !"/>
        <Slider x:Name="Test" Grid.Row="0" Grid.Column="1" />
        <Label Grid.Row="1" Content="Binded slider"/>
        <ContentPresenter Grid.Row="1" Grid.Column="1">
            <ContentPresenter.Content>
                <Slider Value="{Binding Value, ElementName=Test}"/>
            </ContentPresenter.Content>
        </ContentPresenter>
    </Grid>
</UserControl>

MyUserControl.xaml.cs:

using System.Windows.Controls;

namespace WpfApplication1
{
    public partial class MyUserControl : UserControl
    {
        public MyUserControl()
        {
            InitializeComponent();
        }
    }
}

MainWindow.xaml:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Width="300" Height="120">

    <StackPanel>
        <Button Click="Button_Click" Content="Click me to show Sliders !" Height="25"/>
        <ContentPresenter x:Name="contentPresenter"/>
    </StackPanel>
</Window>

MainWindow.xaml.cs:

using System.Windows;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private MyUserControl myUserControl;

        public MainWindow()
        {
            InitializeComponent();

            myUserControl = new MyUserControl();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            contentPresenter.Content = myUserControl;
        }
    }
}

Given the code of MyUserControl.xaml, I expect the binded slider to have the same value has the first one.

But nothing happens.

Now, the tricky part: Start the application, Click on the button, Move the first slider, Open “WPF Inspector” and Attach it to the application. Result: The binding is fixed.

How do you explain this phenomenon?

Answer 1

This will do the trick

    <!--<ContentPresenter Grid.Row="1" Grid.Column="1">
        <ContentPresenter.Content>-->
            <Slider Value="{Binding Value, ElementName=Test}" Grid.Column="1" Grid.Row="1"/>
        <!--</ContentPresenter.Content>
    </ContentPresenter>-->

Because Slider is inside a content presenter you can’t access it’s value like that. You would need to bind to the same viewmodel property to achive this while having it in the content presenter.

Edit

Get Prism and user a ViewModel… I won’t go into details… But What you need to do is this…

After you donwloaded everything add the Microsoft.Practices.Prism dll to your project

Create a new class (ViewModel).Name it whatever you want. I call my MyUserControlViewModel and make it look like this

using Microsoft.Practices.Prism.ViewModel;

namespace YourNamespace
{
    public class MyUserControlViewModel : NotificationObject
    {
        private double _sliderValue;

        public double SliderValue
        {
            get { return _sliderValue; }
            set
            {
                _sliderValue = value;
                RaisePropertyChanged(() => SliderValue);
            }
        }

    }
}

Change the XAML in your usercontrol like this

<Slider x:Name="Test" Grid.Row="0" Grid.Column="1" Value="{Binding SliderValue, Mode=TwoWay}"/>        
<ContentPresenter Grid.Row="1" Grid.Column="1">
    <ContentPresenter.Content>
        <Slider Value="{Binding SliderValue}"/>
    </ContentPresenter.Content>
</ContentPresenter>

And add this line of code into your MyUserControl.cs file

DataContext = new MyUserControlViewModel();

Now the ViewModel takes over for the heavy lifting… You bound the value of the first slider to the Property SliderValue (the Mode=TwoWay indicates that this control can set and get the state of the property) and you have bound the other slider to the same SliderValue so that it moves in sync with the first

Hope this helps