Welcome to Pete Brown's 10rem.net

First time here? If you are a developer or are interested in Microsoft tools and technology, please consider subscribing to the latest posts.

You may also be interested in my blog archives, the articles section, or some of my lab projects such as the C64 emulator written in Silverlight.

(hide this)

From Silverlight in Action 2nd Edition: UI Element Binding

Pete Brown - 24 June 2009

One reason I’ve been so quiet over the past couple months, is I have been scrambling to update Chad Campbell and John Stockton’s excellent Manning Silverlight 2 in Action book to Silverlight 3, under the title Silverlight in Action 2nd Edition (the Amazon info is out of date), to be released this fall.

I’ve done a little restructuring (but not a ton) in the process, and have also been covering as many new Silverlight 3 goodies as I can, as well as a couple extras like ViewModel and .NET RIA Services.

I just finished writing the section about UI Element binding in Silverlight 3, and thought I’d share some of the pre-edited version with you all, since the example here solves something I’m often asked to do in Silverlight applications. Enjoy!

As a reminder, Manning Early Access Program (MEAP) members will be getting chapters of the book in the next couple days, with a much larger release of content just after Silverlight 3 goes live. If you’re looking to get an edge up on Silverlight 3, I’d definitely recommend joining MEAP.

7.2.3 Binding to a UI element

Binding one or more properties of a UI Element to values on an entity, ViewModel or business object is certainly a compelling use of binding. Sometimes, though, you want to use binding for things we wouldn't traditionally consider "data", things within the user interface. You may want to bind the height of two controls together so that they resize equally, or perhaps you want to bind three sliders to the x, y, and z-axis rotations respectively of a plane (see chapter n for more information on 3d rotation in Silverlight). Rather than binding to gather input or display data to the user, you're binding to avoid writing extra plumbing code.

Let's say that you want to display a count of characters entered into a TextBox in real-time. Something like the figure below.

clip_image002

You could certainly do that in code, but that would be fairly uninteresting code to write, and would need to refer to XAML elements by name, or have event handlers wired in XAML, introducing a dependency on the specific page's code-behind and making it less portable and potentially more brittle. In addition, you'd find yourself doing it enough that you'd either wrap the TextBox in your own CountingCharsTextBox control, or add a helper buddy class or something.

Or, if you prefer a XAML approach, which I hope I've sold you on by now, Silverlight 3 introduced the concept of Element Binding. Element Binding allows you to bind the properties of one FrameworkElement to another FrameworkElement. The usual restrictions apply (target must be a DependencyProperty, source must notify of changes) so you cannot using element binding quite everywhere.

To produce the above TextBox with the automatic count of characters using Element Binding, the markup is pretty straight-forward and entirely self-contained:

<StackPanel Orientation="Vertical" Margin="50">
  <TextBlock Text="Tweet (max 140 characters)" />
  <TextBox x:Name="tweetText"
           MaxLength="140"
           Text="Right now I'm writing a book" />

  <StackPanel Orientation="Horizontal">
    <TextBlock Text="{Binding Text.Length, ElementName=tweetText}" />
    <TextBlock Text="/" />
    <TextBlock Text="{Binding MaxLength, ElementName=tweetText}" />
  </StackPanel>

</StackPanel>

The above XAML will show a TextBox with a count of characters underneath it. The character count will update in real-time to show the number of characters typed into the TextBox. Note also that the MaxLength displayed under the textbox is actually coming from the TextBox itself (the 140 in the label is not, however). The key item that makes this happen is the ElementName parameter in the binding expression. ElementName is, as it suggests, the name of another element on the XAML page.

     
posted by Pete Brown on Wednesday, June 24, 2009
filed under:      

4 comments for “From Silverlight in Action 2nd Edition: UI Element Binding”

  1. torxh@qq.comsays:
    I found the topic "SharePoint 2003 Image Viewer Webpart written in Silverlight",and

    In my mind the sps2003 is based on dotnet1.1
    but the silverlight must be created with vs2008.

    I want to know how and wish for your help .
    can you send me the project file?
    thanks for you!
    my contract torxh@qq.com.
  2. Pete Brownsays:
    @torx

    The code for the Silverlight application would be in a completely separate solution from the SharePoint code.

    If you're really working with sps2003 and .NET 1.1 (VS 2003) My guess is you'd need to do the work on separate machines or in a virtual machine.

    Questions like this usually do best on the forums at http://silverlight.net

    Pete

Comment on this Post

Remember me

5 trackbacks for “From Silverlight in Action 2nd Edition: UI Element Binding”

  1. DotNetShoutoutsays:
    Thank you for submitting this cool story - Trackback from DotNetShoutout
  2. Jason N. Gaylord's Blogsays:
    If you are looking to follow this series, be sure to subscribe to my RSS feed at http://feeds.jasongaylord
  3. Community Blogssays:
    If you are looking to follow this series, be sure to subscribe to my RSS feed at http://feeds.jasongaylord
  4. ASPInsiderssays:
    If you are looking to follow this series, be sure to subscribe to my RSS feed at http://feeds.jasongaylord.com/JasonNGaylord
  5. Zunanji virisays:
    Binding to elements is yet another feature, known to WPF-ers since v1. Silverlight 3 now allows bindings