User Interface Rocker

Today I’ll show you how to implement a PropertyChanged-UpdateSourceTrigger for Silverlight. In Silverlight a Data Binding can have different UpdateSourceTriggers. An UpdateSourceTrigger specifies, when a TwoWay-DataBinding will update its source with the value of the Target-Property.

In most cases you have a TwoWay-DataBinding on TextBoxes. When the user types something into a TextBox, it should be written back to the underlying Data-Object. The other way, when the underlying Data-Object changes, the TextBox should show the actual value of the bound property.

In this post I’ll focus on the moment of writing the data back to the underlying object. In other words, when the data is updated with the text the user has typed in.

In Silverlight the underlying object is updated after the TextBox has lost its focus. In WPF, the UpdateSourceTrigger-Enum has a Member PropertyChanged. If you set the UpdateSourceTrigger-Property of the Data Binding to that value, the underlying object will be updated everytime the user changes the text. Unfortunately Silverlight doesn’t contain the PropertyChanged-Value in its UpdateSourceTrigger-Enum. It only contains a Default- and a LostFocus-Member. As the name implies, LostFocus will update the source when the TextBox loses its focus. But an Attached Property would do the trick.

When I tried to solve this problem I came across a post of Michael Sync, who showed up a solution with an attached-Property that works by stealing the focus everytime the Text of a TextBox changes, and immediately set it back to the TextBox again. Find his post under http://michaelsync.net/2009/06/10/silverlight-attached-properties-bindingupdatesourcetriggerpropertychanged

As I got deep knowledge about WPFs Binding-Engine, I could produce a solution for Silverlight, and I think I got a similar solution to Michael’s, but my solution is built closer on the binding-engine and doesn’t need a focus-trick. So, some details: Behind each Binding, a BindingExpression does the real work. All you have to do when the Text of the TextBox changes is to get the BindingExpression of the Data Binding and to call its UpdateSource-Method. So my Attached-Property-Class looks like the one below (Feel free to use the source in your projects, but please keep the reference to www.thomasclaudiushuber.com). As it is, it just works for the Text-Property of TextBoxes.

/// <summary>
/// Supports a PropertyChanged-Trigger for DataBindings 
/// in Silverlight. Works just for TextBoxes
/// (C) Thomas Claudius Huber 2009
/// http://www.thomasclaudiushuber.com
/// </summary>
public class BindingHelper
{
  public static bool GetUpdateSourceOnChange
    (DependencyObject obj)
  {
    return (bool)obj.GetValue(UpdateSourceOnChangeProperty);
  }

  public static void SetUpdateSourceOnChange
    (DependencyObject obj, bool value)
  {
    obj.SetValue(UpdateSourceOnChangeProperty, value);
  }

  // Using a DependencyProperty as the backing store for ...
  public static readonly DependencyProperty 
    UpdateSourceOnChangeProperty =
      DependencyProperty.RegisterAttached(
      "UpdateSourceOnChange",
      typeof(bool),
      typeof(BindingHelper),
      new PropertyMetadata(false, OnPropertyChanged));

  private static void OnPropertyChanged
    (DependencyObject obj,
    DependencyPropertyChangedEventArgs e)
  {
    var txt = obj as TextBox;
    if (txt == null)
      return;
    if((bool)e.NewValue)
    {
      txt.TextChanged += OnTextChanged;
    }
    else
    {
      txt.TextChanged -= OnTextChanged;
    }
  }
  static void OnTextChanged(object sender,
    TextChangedEventArgs e)
  {
    var txt = sender as TextBox; 
    if(txt==null)
      return;
    var be = txt.GetBindingExpression(TextBox.TextProperty);
    if (be != null)
    {
      be.UpdateSource();
    }
  }
}

The usage of the BindingHelper-class is very simple. Just add it to your project, insert a matching xmlns to your XAML file that contains the CLR-Namespace the BindingHelper-class is in. When that is done, you can simply set the UpdateSourceOnChange-Property on a TextBox to true, and if the Text-Property is databound, you’ll have a Data Binding that will update its source on every PropertyChange. Like in WPF.

<UserControl ...
    xmlns:local="clr-namespace:BindingHelperExample">
  <Grid x:Name="LayoutRoot">
      ...
    <TextBox Text="{Binding FirstName, Mode=TwoWay}" 
    local:BindingHelper.UpdateSourceOnChange="True" />
      ...
    </Grid>
</UserControl>

If this post helped you, please kick it.

Tags: Silverlight

This entry was posted on Friday, July 17th, 2009 at 12:51 pm and is filed under Silverlight, TrivadisContent. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.