Posted by: Zeeshan Amjad | October 16, 2009

Data binding with UI Element

We have already seen an example how to bind UI element with some property of class. Now we are going to do the data binding with the value of another UI element. Let’s take a look at example and create a simple project to demonstrate this concept. We are displaying some text in the text block. We also have one text box to enter the angle of the text and whatever angle we input there it text will display in that angle in the text block.  The main thing to perform data binding with UI element is use the ElementName property of Data binding. Here is a piece of code to show this.

  1: <RotateTransform Angle="{Binding ElementName=angle, Mode=Oneway, Path=Text}"/>

Here is a complete XAML code to demonstrate this.

  1: <Window x:Class="xaml5.Window1"
  2:     xmlns=""
  3:     xmlns:x=""
  4:     Title="Data Binding with UI Element" Height="300" Width="400" Background="Beige">    
  5:     <Grid>
  6:         <Grid.RowDefinitions>
  7:             <RowDefinition/>
  8:             <RowDefinition Height="5*"/>      
  9:         </Grid.RowDefinitions>
 11:         <Grid.ColumnDefinitions>
 12:             <ColumnDefinition/>
 13:             <ColumnDefinition Width="3*"/>
 14:             <ColumnDefinition/>
 15:         </Grid.ColumnDefinitions>
 17:         <TextBlock Margin="5" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center">
 18:             Enter Angle
 19:         </TextBlock>
 20:         <TextBox Margin="5" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Name="angle"/>
 21:         <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" 
 22:                    Margin="5" Grid.Row="1" Grid.Column="1"  Text="Hello World">
 23:             <TextBlock.RenderTransform>
 24:                 <TransformGroup>
 25:                     <RotateTransform Angle="{Binding ElementName=angle, Path=Text}"/>
 26:                 </TransformGroup>
 27:             </TextBlock.RenderTransform>
 28:         </TextBlock>        
 29:     </Grid>
 30: </Window>

This is the output of the program.




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: