WPF user control bind data to user control property

user1736332 picture user1736332 · Aug 27, 2013 · Viewed 58.2k times · Source

I have user control:

xaml

<UserControl x:Class="controlmaker.checkButton"
         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="114" d:DesignWidth="221">
<Grid Background="Aqua" >
    <CheckBox Content="CheckBox" Height="16" HorizontalAlignment="Left" Margin="58,24,0,0" Name="checkBox1" VerticalAlignment="Top" />
    <Button Content="{Binding buttText}" Height="23" HorizontalAlignment="Left" Margin="58,57,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
</Grid>
</UserControl>

code behind

public partial class checkButton : UserControl
{
    public checkButton()
    {
        InitializeComponent();
    }


    public static readonly DependencyProperty buttTextProperty =
DependencyProperty.Register("buttText", typeof(String),
typeof(checkButton), new FrameworkPropertyMetadata(string.Empty));

    public String buttText
    {
        get { return GetValue(buttTextProperty).ToString(); }
        set { SetValue(buttTextProperty, value); }
    }


}

and main window xaml

<Window x:Class="controlmaker.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" xmlns:my="clr-namespace:controlmaker">
<Grid>
    <my:checkButton buttText="aka"  HorizontalAlignment="Left" Margin="145,115,0,0" x:Name="checkButton1" VerticalAlignment="Top" Height="133" Width="250" />
</Grid>
</Window>

I want to bind user control property in window xaml and bind it in user control to button content property. How to do it?

Answer

vitaliy zadorozhnyy picture vitaliy zadorozhnyy · Aug 27, 2013

You can try Element binding inside the user control. Just give a name to UserControl and bind property:

<UserControl x:Class="controlmaker.checkButton"
         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="114" d:DesignWidth="221"
         x:Name="MyUserControl">
<Grid Background="Aqua" >
    <CheckBox Content="CheckBox" Height="16" HorizontalAlignment="Left"
          Margin="58,24,0,0" Name="checkBox1" VerticalAlignment="Top" />
    <Button Content="{Binding Path=buttText, ElementName=MyUserControl}"
          Height="23" HorizontalAlignment="Left" Margin="58,57,0,0" 
          Name="button1" VerticalAlignment="Top" Width="75" />
</Grid>
</UserControl>

And then you can Bind or put static text from user control usage place

<my:checkButton buttText="aka" />

or

  <my:checkButton buttText="{Binding SomeProperty}" />