CODEWITHSUNDEEP
c#wpfuser-controls
Joe
Joe

Reputation: 171

How to bind user control property to other property?

I have the following user control:

The Xaml:

<UserControl x:Class="ScreenRecorder.TimePicker"
         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" Height="27" Width="176">
<Grid>
    <StackPanel Orientation="Horizontal">
        <TextBox  Width="150" Height="25" Text="{Binding Time}" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <StackPanel Orientation="Vertical">
            <Button Width="25" Height="12.5" HorizontalAlignment="Left" VerticalAlignment="Top" Click="btnKeyUp_Clicked">
                <Image Source="up.png" Height="10" Width="10" VerticalAlignment="Top"/>
            </Button>
            <Button Width="25" Height="12.5" HorizontalAlignment="Left" VerticalAlignment="Top" Click="btnKeyDown_Clicked">
                <Image Source="down.png" Height="10" Width="10" VerticalAlignment="Top"/>
            </Button>
        </StackPanel>
    </StackPanel>
</Grid>

The Code:

 public partial class TimePicker : UserControl, INotifyPropertyChanged
{
    public TimePicker()
    {
        InitializeComponent();
        this.DataContext = this;
        //Time = m_time;
    }

    public static DependencyProperty TimeProperty = DependencyProperty.Register(
        "Time", typeof(string), typeof(TimePicker));

    //private string m_time = DateTime.Now.ToString();
    public string Time
    {
        get { return (string)GetValue(TimeProperty); }
        set
        {
            SetValue(TimeProperty, value);
            NotifyPropertyChanged("Time");
        }
    }

    private void btnKeyUp_Clicked(object sender, RoutedEventArgs e)
    {
        DateTime curTime = Convert.ToDateTime(Time);
        curTime += new TimeSpan(0, 0, 1);
        Time = curTime.ToString();
    }

    private void btnKeyDown_Clicked(object sender, RoutedEventArgs e)
    {
        DateTime curTime = Convert.ToDateTime(Time);
        curTime -= new TimeSpan(0, 0, 1);
        Time = curTime.ToString();
    }

    #region INotifyPropertyChanged
    public event PropertyChangedEventHandler PropertyChanged;

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

And I have another user control that uses this user control as follow:

        <StackPanel>
            <Label Content="Begin Record Time" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="5"/>
            <local:TimePicker Time="{Binding StartRecordTime}"/>
        </StackPanel>

StartRecordTime looks like this:

public string StartRecordTime
    {
        get { return m_startRecord; }
        set
        {
            m_startRecord = value;
            NotifyPropertyChanged("StartRecordTime");
        }
    }

I want to change the StartRecordTime according to the Time Property and vice versa, but only the Time property is changing.

Thank you.

Upvotes: 2

Views: 55

Answers (2)

Charles Mager
Charles Mager

Reputation: 26213

Your binding won't work as you've set the DataContext of TimePicker to TimePicker itself. You'll notice a binding error in the Output window:

BindingExpression path error: 'StartRecordTime' property not found on 'object' ''TimePicker' (Name='')'. BindingExpression:Path=StartRecordTime; DataItem='TimePicker' (Name=''); target element is 'TimePicker' (Name=''); target property is 'Time' (type 'String')

I'd suggest to have a more 'sane' experience you remove DataContext = this from the TimePicker constructor and set the Grid's DataContext to the TimePicker by Element Name. Add a name attribute to the UserControl element:

<UserControl x:Name="Root" ...

And set the DataContext of the Grid:

<Grid DataContext="{Binding ElementName=Root}">

This will be inherited by all child elements. You will also need to change your binding to TwoWay, either explicitly:

<local:TimePicker Time="{Binding Path=StartRecordTime, Mode=TwoWay}" />

Or by setting this as the default in the DependencyProperty registration:

public static readonly DependencyProperty TimeProperty = DependencyProperty.Register(
    "Time", typeof(string), typeof(TimePicker), 
    new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.BindsTwoWayByDefault));

I'd also note that there's no reason for TimePicker to implement INotifyPropertyChanged. I suggest you remove this.

Upvotes: 0

caesay
caesay

Reputation: 17271

Try this:

<local:TimePicker Time="{Binding Path=StartRecordTime, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>

Upvotes: 1

Related Questions