Element binding

In our first recipe, let's learn how to create XAML elements and about data binding to another control like textbox using the ElementName property of the binding object.

Getting ready

1. Open the Visual Studio for Phone 7 and create a Windows Phone Application. Name the application Recipe1 and click on OK.

   

2. A shell application with default files is added as shown in the following screenshot. Notice that there are several files added to the project by default. The App.xaml file contains the App constructor with different App event handlers included in the App.xaml.cs file. There are three image files; ApplicationIcon.png is for the App Icon displayed in the Phone, Background.png is the default background image of the app, and SplashScreenImage.jpg can be used for flashing the screen before the app launches. MainPage.xaml is the main page to be displayed when the app is launched. This is where we add all the display elements for the application. The MainPage.xaml.cs file is where all the code is added to manipulate the data.

   

3. After you open the project, just press F5 and run it to make sure there are no errors. It is good practice to run the app as often as you can so you can resolve any issue, otherwise you end up accumulating too many bugs.

How to do it...

Let's build a simple display page where we have one textbox to enter data and a text block to display it. When you enter text in the textbox you will see it is displayed in the display text block.

1. Let's change the application title and the page title text blocks in the MainPage.xaml.cs file. Open the file and look for StackPanel with Name TitlePanel.

   <!--TitlePanel contains the name of the application and page title-->
   
   <StackPanel x:Name="TitlePanel" Grid.Row="0" Grid.ColumnSpan ="2">>
     <TextBlock x:Name="ApplicationTitle" Text="Ch1 Recipes" Style="{StaticResource PhoneTextNormalStyle}"/>
     <TextBlock x:Name="PageTitle" Text="Element Name" Style="{StaticResource PhoneTextTitle1Style}"/>
   </StackPanel>

   Tip

   Downloading the example code

   You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

2. In order to display two columns and three rows, we should change the Grid ColumnDefinition and RowDefinition as illustrated in the XAML snippet. Locate this inside the Grid named LayoutRoot:

   <Grid.RowDefinitions>
     <RowDefinition Height="Auto"/>
     <RowDefinition Height="81"/>
     <RowDefinition Height="526*"/>
   </Grid.RowDefinitions>
   
   <Grid.ColumnDefinitions>
     <ColumnDefinition Width="159*"></ColumnDefinition>
     <ColumnDefinition Width="321*"></ColumnDefinition>
   </Grid.ColumnDefinitions>

3. Add three TextBlock elements and a text element inside the ContentPanel grid. Here we will add binding information to the tbNameDisplayContent control. ElementName is assigned to TextBox control name. Path is assigned to the Text property of the TextBox control; this is where the data is fetched.

   <Grid x:Name="ContentPanel" Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Margin="0,0,0,-16">
   
     <TextBlock x:Name ="tbName" Text ="Name:" Margin="2,13,371,582" />
   
     <TextBox x:Name ="txtNameContent" Text ="" Margin="128,0,6,567" />
   
     <TextBlock x:Name ="tbNameDisplay" Text ="Display Name:" Height="43" VerticalAlignment="Top" Margin="2,94,0,0" HorizontalAlignment="Left" Width="133" />
   
     <TextBlock x:Name ="tbNameDisplayContent" Text ="{Binding     ElementName=txtNameContent, Path=Text}" Margin="140,100,24,505" />
   
   </Grid>

4. Press F5; now enter a name in the textbox and as you type you will see the text in the display text block, as shown in the following screenshot. This is the power of Data Binding.

   

How it works...

We used the Binding class in the XAML using the following shorthand syntax:

<object property="{Binding ElementName=name, Path=property}" …/>

You can either use Path=Name or just the name in the property Path. We set the binding information to the Content property of the TextBlock control. We used ElementName as the textbox control name and then we assigned the textbox control's Text property to the Path. Basically, the data source for the binding is the Text property of the textbox.

There's more...

In the last recipe, we learned how to use Binding with ElementName and Path. Similar to Path, we can use many properties like Converter, Mode, StringFormat, and so on. We will discuss the usage of these properties in the next several recipes in this chapter. For more information on Binding check this MSDN article:

http://msdn.microsoft.com/en-us/library/ms752347.aspx

See also

Check the recipes on How DataMode is used and Converting data for display in this chapter. Also, check the next recipe, which discusses the important concept of DataContext.