Recently one of my clients called me and asked the rhetoric question: "I'm already two days in word, but still cannot create dependency property for custom control". "What the problem?" – I asked him, - "Give me a couple of minutes and I'll help you.
So, DP is still the problem. It's really hard to change your mind and understand how to put things in Property system and catch the main idea of what to put there. So let's build custom control, which has DP with complicated value, e.g. Latitude/Longitude Box.
First of all we'll need to create custom control. This is the easy part. Grid, two Text Boxes, two Text Blocks and we have it. The only thing I'll add here is dynamic sizing of textblocks in order to give textboxes more space
<UserControl x:Class="LatBox.CoordinateBox"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:LatBox">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="{Binding ElementName=Lat, Path=Height}"/>
<RowDefinition Height="{Binding ElementName=Lon, Path=Height}"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding ElementName=tbLon, Path=Width}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock>Latitude: </TextBlock>
<TextBox Name="Lat" Grid.Column="1" TextChanged="onTextChanged"/>
<TextBlock Grid.Row="1" Name="tbLon">Longitude: </TextBlock>
<TextBox Name="Lon" Grid.Column="1" Grid.Row="1" TextChanged="onTextChanged" />
</Grid>
</UserControl>
It's easy, right? Two rows with height, binded to the height of the text in textboxes, two columns, where the first is binded to the width of text in textblock. One event for each textbox (we should know when it's going to change, yeah?)
Going to code-behind. First of all we have to create dependency property ValueProperty and register Value property with Property system of WPF. This one will be Coordinate type and related to my User Control, named CoordinateBox. The default value of the property is null and I want it to be binded two way by default. When the property changed I'll call OnValueChanged method and before update I'll coerce the value with CoerceValue method. Why I need coercion? Simple, Latitude cannot be less then 0 and more then 90 degrees and longitude should be between -180 and 180, so instead of Error Providers, I'll just will not allow user to enter something that has wrong value (e.g. text or wrong double)
public static DependencyProperty ValueProperty = DependencyProperty.Register("Value",
typeof(Coordinate), typeof(CoordinateBox),
new FrameworkPropertyMetadata(null,
FrameworkPropertyMetadataOptions.AffectsMeasure |
FrameworkPropertyMetadataOptions.AffectsRender |
FrameworkPropertyMetadataOptions.BindsTwoWayByDefault |
FrameworkPropertyMetadataOptions.Inherits,
new PropertyChangedCallback(OnValueChanged),
new CoerceValueCallback(CoerceValue)));
Nice. Now I have to build the property itself
public Coordinate Value
{
get { return (Coordinate)GetValue(ValueProperty); }
set { SetValue(ValueProperty, value); }
}
That's pretty clear, right? Next step the callback. I want my control to bubble up value change event in order to be able to use it within external window (if needed). You are not really have to do it, if no one will listen to that event. So, when the value will change I'll call OnValueChanged event and update both TextBoxes with new value from Value property, Then I'll fire my Routed Event for value changing (RaiseEvent method is rules!) J
static void OnValueChanged(DependencyObject sender, DependencyPropertyChangedEventArgs args)
{
CoordinateBox box = sender as CoordinateBox;
box.UpdateValue();
RoutedPropertyChangedEventArgs<Coordinate> e = new RoutedPropertyChangedEventArgs<Coordinate>(
(Coordinate)args.OldValue, (Coordinate)args.NewValue, ValueChangedEvent);
box.OnValueChanged(e);
}
private void UpdateValue()
{
this.Lat.Text = Value.Latitude.ToString();
this.Lon.Text = Value.Longitude.ToString();
}
private void OnValueChanged(RoutedPropertyChangedEventArgs<Coordinate> e)
{
RaiseEvent(e);
}
Now I have to provide getter and setter for the event and build the event itself. Piece of cake, trust me J. This one will be RoutedEvent and we'll register it within Event Manager of WPF exactly as we do it with DependencyProperty and Property Manager
public static readonly RoutedEvent ValueChangedEvent = EventManager.RegisterRoutedEvent(
"ValueChanged", RoutingStrategy.Bubble,
typeof(RoutedPropertyChangedEventHandler<Coordinate>), typeof(CoordinateBox));
public event RoutedPropertyChangedEventHandler<Coordinate> ValueChanged
{
add { AddHandler(ValueChangedEvent, value); }
remove { RemoveHandler(ValueChangedEvent, value); }
}
Now, we'll handle OnTextChange event fired by TextBox to update our value
void onTextChanged(object sender, TextChangedEventArgs e)
{
double lat = 0;
double lon = 0;
if (double.TryParse(Lat.Text == String.Empty ? "0" : Lat.Text, out lat) &
double.TryParse(Lon.Text == String.Empty ? "0" : Lon.Text, out lon))
{
Value = new Coordinate(lat, lon);
}
else
{
UpdateValue();
}
}
And build the method for coercing values
static object CoerceValue(DependencyObject sender, object value)
{
Coordinate val = value as Coordinate;
if (val != null)
{
if (val.Latitude < 0)
{
val.Latitude = 0;
}
else if (val.Latitude > 90)
{
val.Latitude = 90;
}
if (val.Longitude < -180)
{
val.Longitude = -180;
}
else if (val.Longitude > 180)
{
val.Longitude = 180;
}
}
return val;
}
Now we'll get all we need, but only if both of Coordinate class members will be updated. I want to fire update event only if one of them will be changed so in the class of Coordinate we'll add the ability to notify about values changed
public class Coordinate : INotifyPropertyChanged
{
public Coordinate(double lat, double lon)
{
this.Latitude = lat;
this.Longitude = lon;
}
private double m_lat;
public double Latitude
{
get { return m_lat; }
set {
m_lat = value;
FirePropertyChanged("Latitude");
}
}
private double m_long;
public double Longitude
{
get { return m_long; }
set {
m_long = value;
FirePropertyChanged("Longitude");
}
}
#region INotifyPropertyChanged Members
internal void FirePropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
public event PropertyChangedEventHandler PropertyChanged;
#endregion
}
Put everything together in form and let's get rocks.
<Window x:Class="LatBox.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:LatBox"
Title="LatBox" Height="300" Width="300"
>
<StackPanel>
<local:CoordinateBox x:Name="cb1"/>
<local:CoordinateBox x:Name="cb2" Value="{Binding ElementName=cb1, Path=Value}"/>
</StackPanel>
</Window>
WPF is rules, isn't it? Don't you pray that all properties in all controls will be Dependency Properties?
Source Code for this article