Click here to Skip to main content
Click here to Skip to main content

Element Binding in Silverlight

, 12 Apr 2011
Rate this:
Please Sign up or sign in to vote.
Achieving a Twitter page like functionality using Element Binding in Silverlight.

Well, achieving a Twitter page like functionality was never the intention, but this simple example will introduce you to the element binding concept in Silverlight. In Element Binding, we can bind a control property to another control property, that too declaratively inside XAML.

In this post, we will emulate the Twitter feature where the number of characters entered by the user will get displayed while the user enters text in the text box, that too without a single line in the code-behind.

SNAGHTMLee52e4

Here I have added two TextBlocks to hold the max length and to hold the count of characters. We want the TextBlock Text property to show the Textbox.Length property. We will bind the TextBlock’s Text to the Length property of the TextBox.

SNAGHTMLf5dc7e

The code to bind the element is as follows:

<TextBlock Height=”23″ Margin=”0,150,44,0″ Name=”tbRem” VerticalAlignment=”Top” 
   FontSize=”13″ TextAlignment=”Right” HorizontalAlignment=”Right” Width=”46″ 
   Text=”{Binding Path=Text.Length,ElementName=txtMsg}” />

In the above code, the third line is the key where we assign the binding to the Text property; remember the dependency property?

SNAGHTMLfcd6d3

The XAML source code, based on the above fundamentals, achieves the Twitter messaging like functionality:

<UserControl x:Class=”TwitterLikeMessege.MainPage” 
    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” d:DesignHeight=”300″ d:DesignWidth=”400″ 
    xmlns:sdk=”http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk”> 

<Grid x:Name=”LayoutRoot” Background=”White”> 
<sdk:Label Height=”30″ HorizontalAlignment=”Left” Margin=”0,12,0,0″ 
  Name=”lblCaption” VerticalAlignment=”Top” Width=”237″ 
  Content=”What’s happening? FontSize=”15″ Foreground=”#82000000″ /> 

<TextBlock Height=”23″ Margin=”0,150,44,0″ Name=”tbRem” VerticalAlignment=”Top” 
  FontSize=”13″ TextAlignment=”Right” HorizontalAlignment=”Right” Width=”46″ 
  Text=”{Binding Path=Text.Length,ElementName=txtMsg}” /> 

<TextBlock Height=”23″ Margin=”0,150,11,0″ Name=”tbMaxLen” VerticalAlignment=”Top” 
  Width=”26″ TextAlignment=”Right” FontSize=”13″ HorizontalAlignment=”Right” 
  Text=”{Binding Path=MaxLength,ElementName=txtMsg}”/> 

<TextBox Height=”90″ Margin=”12,37,12,0″ Name=”txtMsg” 
  VerticalAlignment=”Top” MaxLength=”160″ /> 

<sdk:Label HorizontalAlignment=”Right” Margin=”0,152,32,0″ 
  Name=”lblSlash” Width=”25″ Content=” /  Height=”28″ VerticalAlignment=”Top” /> 
</Grid> 
</UserControl>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Manas_Patnaik
Software Developer (Senior) Infosys
India India
Nothing special .. I like challenges and love my critics.
 
Associate Consultant | Microsoft | Bangalore | India

Blog : http://manaspatnaik.com/blog

Twitter@manas_patnaik
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 12 Apr 2011
Article Copyright 2011 by Manas_Patnaik
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid