Pete Brown is a Senior Program Manager with Microsoft on the developer community team led by Scott Hanselman, as well as a former Microsoft Silverlight MVP, INETA speaker, and RIA Architect for Applied Information Sciences, where he worked for over 13 years. Pete's focus at Microsoft is the community around client application development (WPF, Silverlight, Windows Phone, Surface, Windows Forms, C++, Native Windows API and more). Pete’s site is http://10rem.net Pete has posted 23 posts at DZone. View Full User Profile

From Silverlight in Action 2nd Edition: UI Element Binding

06.24.2009
| 3788 views |
  • submit to reddit

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.

Tweet

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.

 

References
Published at DZone with permission of its author, Pete Brown. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

dee wang replied on Thu, 2009/07/02 - 1:07am

Thanks for a resourceful content. this is what i have been looking for so long. I don't get the idea why they start these kind of trial when the criminal are old. Perhaps this more personal form of accountability will deter future actors where the fear of international condemnation has not. Ed Hardy stores are located in many locations internationally including the Americas, Europe and Asia.


---------------
Ed Hardy UK

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.