Well achieving a twitter page like functionality was never the intention but this simple example will introduce to 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 character entered by user will get displayed while user enters text in the text box , that too with out a single line in code behind.

SNAGHTMLee52e4

Here i have added 2 text blocks to hold max length and the other one to hold count the character.NAs we wanted the Text Block Text property should get show the Textbox.Length property , we will bind the Text Block’s Text to the length property of textbox.

SNAGHTMLf5dc7e

The Code to Bind the element as follow

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

In above code the 3rd line is the key where we assigning the Binding to the Text Property , remember dependency property.

SNAGHTMLfcd6d3

The xaml source code only , based on the above fundamental achieves the twitter messaging like functionality.

  1. <UserControl x:Class=”TwitterLikeMessege.MainPage”
  2. xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
  3. xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
  4. xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
  5. xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″
  6. mc:Ignorable=”d”
  7. d:DesignHeight=”300″ d:DesignWidth=”400″ xmlns:sdk=”http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk”>
  8. <Grid x:Name=”LayoutRoot” Background=”White”>
  9. <sdk:Label Height=”30″
  10. HorizontalAlignment=”Left” Margin=”0,12,0,0″
  11. Name=”lblCaption” VerticalAlignment=”Top” Width=”237″ Content=”What’s happening?” FontSize=”15″ Foreground=”#82000000″ />
  12. <TextBlock Height=”23″ Margin=”0,150,44,0″ Name=”tbRem” VerticalAlignment=”Top” FontSize=”13″
  13. TextAlignment=”Right” HorizontalAlignment=”Right” Width=”46″
  14. Text=”{Binding Path=Text.Length,ElementName=txtMsg}” />
  15. <TextBlock Height=”23″ Margin=”0,150,11,0″ Name=”tbMaxLen” VerticalAlignment=”Top”
  16. Width=”26″ TextAlignment=”Right” FontSize=”13″ HorizontalAlignment=”Right”
  17. Text=”{Binding Path=MaxLength,ElementName=txtMsg}”/>
  18. <TextBox Height=”90″ Margin=”12,37,12,0″ Name=”txtMsg” VerticalAlignment=”Top” MaxLength=”160″ />
  19. <sdk:Label HorizontalAlignment=”Right” Margin=”0,152,32,0″ Name=”lblSlash” Width=”25″ Content=” / “ Height=”28″ VerticalAlignment=”Top” />
  20. </Grid>
  21. </UserControl>