CODEWITHSUNDEEP
wpfxamlmvvmbinding
rPulvi
rPulvi

Reputation: 946

WPF XAML - Property update in nested controls

I have a control that exposes a string property named HeaderText in this way:

public partial class HeaderControl : UserControl
{
    public static DependencyProperty HeaderTextProperty;    

    [Category("Header Properties")]
    public string HeaderText
    {
        get { return (string)GetValue(HeaderTextProperty); }
        set { SetValue(HeaderTextProperty, value); }
    }

    static HeaderControl()
    {
        HeaderTextProperty = DependencyProperty.Register("HeaderText", typeof(string), typeof(HeaderControl), new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));
    }

    public HeaderControl()
    {
        this.DataContext = this;
        InitializeComponent();
    }
}

HeaderControl's Xaml:

<UserControl x:Class="Col.HMI.Controls.HeaderControl"
     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">

<Border Background="{Binding Path=HeaderBackground}" >
    <TextBlock Text="{Binding Path=HeaderText}" Foreground="White" TextAlignment="Left" VerticalAlignment="Center" HorizontalAlignment="Stretch" FontFamily="Segoe UI Light" FontSize="36" Margin="5"/>
</Border>

and I want to use this HeaderControl in another UserControl, in this way:

OtherControl's Xaml:

<controls:HeaderControl Grid.Row="0" HeaderText="DEMO" />

And this works without problems. But if I bind the HeaderText property to a string property in the OtherControl ViewModel, in this way:

    <controls:HeaderControl Grid.Row="0" HeaderText="{Binding Path=SummaryTitle}" />

the bind doesn't work.

This is the SummaryTitle property in the OtherControl ViewModel:

public string SummaryTitle
{
    get 
    { 
        return _summaryTitle; 
    }
    set 
    { 
        _summaryTitle = value; OnPropertyChanged("SummaryTitle"); 
    }
}

PS: I have other controls binded to the OtherControl View Model and they work well.

Upvotes: 0

Views: 548

Answers (1)

Suresh
Suresh

Reputation: 4159

You are setting DataContext of HeaderControl to itself in the constructor by doing this:

this.DataContext = this;

That means, when you apply some binding to any of the properties in HeaderControl, the Binding engine tries to find the bound property (in your case SummaryTitle) in this control, which it wont find and will fail.

So, to fix your problem, do not set the DataContext of HeaderControl to itself in the Constructor and the Binding engine will try find the properties in the correct DataContext.

Update your HeaderControl constructor to the following, and the bindings should start to work:

public HeaderControl()
{
    InitializeComponent();
}

UPDATE

What you are trying to do here is, You want to have DependencyProperty named HeaderText in your UserControl, so that it's value can be set via DataBinding, and then update a value of TextBlock in your UserControl with the value of that DependencyProperty.

You can achieve this by two ways:

1) By updating TextBlock Binding to use ElementNme and Path syntax, XAML would look like this:

<UserControl x:Class="WpfApplication1.HeaderControl"
             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"
             x:Name="_This">
    <Grid>
        <TextBlock Text="{Binding ElementName=_This, Path=HeaderText}" FontSize="24" />
    </Grid>
</UserControl>

With this approach, whenever the property HeaderText is changed either via Binding or explicitly setting the value.

2) By listening to property value changed event for HeaderText property and then updating the TextBlock accordingly.

For this approach your HeaderControl.xaml would look like:

<UserControl x:Class="WpfApplication1.HeaderControl"
             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>
        <TextBlock x:Name="TextBlockInUserControl"/>
    </Grid>
</UserControl>

and the HeaderControl.xaml.cs

public partial class HeaderControl : UserControl
{
    public static readonly DependencyProperty HeaderTextProperty;

    [Category("Header Properties")]
    public string HeaderText
    {
        get { return (string)GetValue(HeaderTextProperty); }
        set { SetValue(HeaderTextProperty, value); }
    }

    static HeaderControl()
    {
        HeaderTextProperty = DependencyProperty.Register("HeaderText", typeof (string), typeof (HeaderControl),
            new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.BindsTwoWayByDefault, OnHeaderTextPropertyChanged));
    }

    private static void OnHeaderTextPropertyChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
    {
        var headerControl = (HeaderControl) dependencyObject;
        headerControl.UpdateTextBlock((string) dependencyPropertyChangedEventArgs.NewValue);
    }

    void UpdateTextBlock(string text)
    {
        TextBlockInUserControl.Text = text;
    }

    public HeaderControl()
    {
        InitializeComponent();
    }
}

Upvotes: 1

Related Questions