WP7 - Update UserControl through binding - silverlight

Question

I have a WP7 silverlight project. I have a 'UserControl' to display rectangles based on a DependencyProject.
Now, when I place the control on my page with the following:
<uc:RectangleControl NumRectangles={Binding Path=RectangleCount,Mode=OneWay} />
I get my rectangles displayed based on initial value of 'RectangleCount'. However, when RectangleCount is changed, the User control never updates. I expect this is caused by me drawing my rectangles in the OnLoaded event, but I can't for the life of me find another event to bind to to cause the control to draw new rectangles when the NumRectangles DP is updated.
Any help?
The UserControl XAML:
<UserControl x:Class="WP7Test.Controls.RectangleControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="80" d:DesignWidth="480">
<Canvas x:Name="canvas"
Height="{Binding Height}" Width="{Binding Width}">
</Canvas>
</UserControl>
And in the code behind, I add rectangles based on a dependency property:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
namespace WP7Test.Controls
{
public partial class RectangleControl : UserControl
{
private double RectangleSpacing = 1;
#region Dependency Properties
public int NumRectangles
{
get { return (int)GetValue(NumRectanglesProperty); }
set { SetValue(NumRectanglesProperty, value); }
}
// Using a DependencyProperty as the backing store for NumRectangles. This enables animation, styling, binding, etc...
public static readonly DependencyProperty NumRectanglesProperty =
DependencyProperty.Register("NumRectangles", typeof(int), typeof(RectangleControl), new PropertyMetadata(5));
#endregion
public RectangleControl()
{
InitializeComponent();
Loaded += new RoutedEventHandler(OnLoaded);
}
private void OnLoaded(object sender, RoutedEventArgs args)
{
double rectangleWidth = 20;
double rectangleHeight = 20;
double x = 0;
double y = 0;
for (int i = 0; i < NumRectangles; i++)
{
Brush b = new SolidColorBrush(Colors.Red);
Rectangle r = GenerateRectangle(x, y, rectangleWidth, rectangleHeight, b);
canvas.Children.Add(r);
x += rectangleWidth + 1;
}
}
public Rectangle GenerateRectangle(double x, double y, double width, double height, Brush brush)
{
Rectangle r = new Rectangle();
r.Height = height;
r.Width = width;
r.Fill = brush;
Canvas.SetLeft(r, x);
Canvas.SetTop(r, y);
return r;
}
}
}

Answer 1

When you register your dependency property, you need to provide a handler for the 'changed' event within your PropertyMetadata. See the MSDN documentation here:
http://msdn.microsoft.com/en-us/library/ms557330%28VS.95%29.aspx
The method that you supply as a dependency property change handler will be static so you need to use the arguments passed to this method to obtain a reference to your control. From here you can clear and re-build your UI.