Custom User Control not binding data

Question

I've created a user control that have a label and textbox. i added two DependencyProperties (Text and Label) and bind them to textbox.text and label.content. however, i'm not able to see the text of textbox.

in the main window, when i'm not binding to any element the label is shown but if i binding the element is not shown. the textbox not showing either way.

here's the xaml:

<UserControl x:Class="TestNewLabeltextbox.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" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<StackPanel Orientation="Horizontal" Background="White" FlowDirection="RightToLeft">
    <Label x:Name="lbl" Content="{Binding Label, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="100"  HorizontalAlignment="Left" Background="blue">
        <Label.Style>
            <Style TargetType="Label">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Label">
                            <StackPanel Orientation="Horizontal">
                                <Border Background="Blue" Width="200" BorderThickness="0,0,0,0">
                                    <StackPanel Orientation="Horizontal">
                                        <Viewbox StretchDirection="DownOnly" Stretch="Uniform">
                                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True" TextBlock.FontSize="14" TextBlock.Foreground="#FFFFFF" Margin="5">
                                                <ContentPresenter.Effect>
                                                    <DropShadowEffect BlurRadius="0.0"
                                              Color="#032A6B"
                                              Direction="90"
                                              Opacity="1"
                                              ShadowDepth="1" />
                                                </ContentPresenter.Effect>
                                            </ContentPresenter>
                                        </Viewbox>
                                    </StackPanel>
                                </Border>
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Label.Style>
    </Label>
    <TextBox x:Name="txt" Text="{Binding Text, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="120" HorizontalAlignment="Right">
        <TextBox.Style>
            <Style TargetType="TextBox">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="TextBox">
                            <Border CornerRadius="0,0,0,50" BorderBrush="Black" Background="White" BorderThickness="0">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True" TextBlock.FontSize="14" TextBlock.Foreground="#FFFFFF" Margin="5">
                                    <ContentPresenter.Effect>
                                        <DropShadowEffect BlurRadius="0.0"
                                              Color="#032A6B"
                                              Direction="90"
                                              Opacity="1"
                                              ShadowDepth="1" />
                                    </ContentPresenter.Effect>
                                </ContentPresenter>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </TextBox.Style>
    </TextBox>
</StackPanel>

Here'sUserControl1.cs:

public partial class UserControl1 : UserControl
{
    public UserControl1()
    {
        InitializeComponent();
        this.DataContext = this;
    }

    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
    }

    public static readonly DependencyProperty LabelProperty = DependencyProperty.Register("Label", typeof(string), typeof(UserControl1), new PropertyMetadata(null));
    public string Label
    {
        get { return (string)this.GetValue(LabelProperty); }
        set { this.SetValue(LabelProperty, value); }
    }

    public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(UserControl1), new PropertyMetadata(null));
    public string Text
    {
        get { return (string)this.GetValue(TextProperty); }
        set { this.SetValue(TextProperty, value); }
    }
}

here's the window xaml + cs:

<Window x:Class="TestNewLabeltextbox.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:TestNewLabeltextbox"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <StackPanel Orientation="Vertical" Height="150">
        <controls:UserControl1 Text="hello" Height="50" Label="{Binding Hello, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
        <controls:UserControl1 Text="hello" Height="50" Label="world" />
        <Label BorderBrush="Black" BorderThickness="2" Width="100" Height="50" Content="{Binding Hello, Mode=TwoWay}"/>
    </StackPanel>
</Grid>

public partial class MainWindow : Window
{
    ViewModel vm = new ViewModel();
    public MainWindow()
    {
        InitializeComponent();
        vm.Hello = "555";
        this.DataContext = vm;            
    }
}

viewmodel.cs

public class ViewModel : INotifyPropertyChanged
{
    private string h = "Hello";
    public string Hello
    {
        get
        {
            return h;
        }
        set
        {
            h = value;
            NotifyPropertyChanged("Hello");
        }
    }

    #region "PropertyChanged Event"
    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    #endregion   
}

Maxim · Accepted Answer · 2017-06-05T06:07:57.230

Default Source of binding is DataContext. But your Label and Text dependency properties defined in the control rather than in view-model. Change binding of Label to

{Binding Path=Label, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}}

and binding of TextBox to

{Binding Path=Text, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type UserControl}}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}

Please read about Mode and UpdateSourceTrigger properties of Binding. It seems that you don't know how they work. Mode=TwoWay, UpdateSourceTrigger=PropertyChanged doesn't make any sense for Content property.

thank you so much it helps me a lot – user7925257 Jun 05 '17 at 08:52 — user7925257, Jun 05 '17 at 08:52

Custom User Control not binding data

1 Answers1