WPF4: How do you set a value in a UserControl from the Main Window?

Question

This has to be simple, at least it was in good old .Net where it took maybe four lines of code. I'm working in VS2010, C#, WPF4.

I have a user control with a textbox. When I click a button in the main window, I want my user control textbox to reflect some text. Is this possible in WPF4 with less than 500 lines of esoteric code?

The problem is that while I know the textbox is getting the new text as evidenced from breakpoints in the user control code, that text is never being reflected to the main window. The main window still shows the original text. It has to be some kind of binding thing, and I really don't think I should have to create templates and resources and all for this simple situation. It's got to be something simple that I'm forgetting in the forest of WPF4. Below is what I have. After clicking the button, the textbox is still blank; it does not say "hello earthlings."

In the user control code:

public partial class UserControl1 : UserControl
{
    public static readonly DependencyProperty TextProperty;

    public UserControl1()
    {
        InitializeComponent();
    }

    static UserControl1()
    {
        TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(UserControl1), new UIPropertyMetadata(null));
    }

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

}

User control xaml:

<UserControl x:Class="WTFUserControlLibrary.UserControl1"
         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"&gt;
<Grid Height="164" Width="220">
    <TextBox Name="txtTest" BorderBrush="red" BorderThickness="2" Height="25" Text="{Binding ElementName=UserControl1, Path=Text, Mode=TwoWay}"></TextBox>
</Grid>

(I have no idea what the text binding is supposed to be doing in this case.)

Main window code:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void button1_Click(object sender, RoutedEventArgs e)
    {
        WTFUserControlLibrary.UserControl1 uc = new WTFUserControlLibrary.UserControl1();
        uc.Text = "hello earthlings";
    }
}

and the main window xaml:

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:WTFUserControlLibrary;assembly=WTFUserControlLibrary"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="71,65,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
    <my:UserControl1 HorizontalAlignment="Left" Margin="71,94,0,0" Name="userControl11" VerticalAlignment="Top" Height="116" Width="244" />
</Grid>

Thanks Earthlings (and also those who designed this mess!)

Answer 1

In your method button1_Click you are creating a new user control. This is not the usercontrol in the window and is never displayed.

Instead, give your usercontrol a name in the XAML:

x:Name="uc"

Then in the button1_Click method you just remove that first line where you create a new usercontrol.

update

You want the user control XAML to look more like this:

<UserControl x:Class="WTFUserControlLibrary.UserControl1"
         x:Name="thisControl"
         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"&gt;
<Grid Height="164" Width="220">
    <TextBox Name="txtTest" BorderBrush="red" 
             BorderThickness="2" Height="25" 
             Text="{Binding ElementName=thisControl, Path=Text, Mode=TwoWay}" />
</Grid>

I added x:Name="thisControl" to the root UserControl element, and then referenced this in the binding.

I'll try to explain the binding:

You have this textbox inside your user control, but you want to be able to bind the text value to something outside the user control. What you've done is set up a dependency property on the user control, and bound that textbox to it, so you are using the binding infrastructure pass values from the top level of the UserControl to constituent controls inside it.

Basically, it looks like this:

data
    ---> bind UserControl1.Text to data
         ---> bind TextBox.Text to UserControl1.Text