UWP Data Binding Using Microsoft Blend Without Writing Code

Data binding is a way for your applications UI to display data, and to stay syned with that data. And yes, you can now bind UI(User interface) controls without writing code using Microsoft Expression Blend.

In this article I'm going to show you how to bind two controls in order to sync their data . I'll use two text boxes and perform data binding graphically.

1. Make a Universal Windows Platform Application in Microsoft Expression Blend. Open its MainPage.xaml from Solution Explorer as shown below.
   
   
2. Drag two text boxes from toolbox to the designer as shown in picture.
   
   
   
   
3. You'll see the two text boxes on the designer. Their XAML code has also been added to the xaml file. Here's the screenshot:
   
   
   
   
4. Select upper textbox and and press F4 to see its properties, or simply open the properties of Upper text box from left side of Blend. After opening the properties navigate to the portion of properties labeled with "Common" and then move the Text Property over there. You'll see a little box on the right side of text property as in the following image. Just click it.
   
   
   
   
5. When you click on that option, a small window will appear where you'll be shown many options. Go to "Bind to Element." Once you click on this option, blend will ask you to select the control upon you want to perform data binding.
   
   
   
   
6. Select the control with your mouse pointer that you want to bind with some other control. See the following small video to clarify what I'm asking you to do.
   
   
   
   
7. Once you select your control to bind with; a small window will appear asking you about the Binding Mode and Type.
   
   You'll see the following three Binding Modes:
   
   a. One Way: One way binding is the binding in which changing of some property in source Control( like text in our case) will reflect to Destination control only.
   
   b. Two Way: In this type of binding both Source and Destination controls will sync to each other.
   
   c. One Time: This is one time binding that means when you start program it will be performed only once. So, Select Property of Textbox to be "text" and mode of Binding "OneWay" and click OK.
   
   
   
   
8. When you click OK after setting its mode and property type you'll see THE following property for data binding has been added to your 1st textbox control. You may change all of stuff in code too.
   

   <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
       <TextBox x:Name="textBoxDestination" Height="56" Margin="92,100,120,0" TextWrapping="Wrap" PlaceholderText="text" Text="{Binding Text, ElementName=textBoxSource, Mode=OneWay}" VerticalAlignment="Top" />
   
       <TextBox x:Name="textBoxSource" Height="56" Margin="92,228,120,0" TextWrapping="Wrap" PlaceholderText="text" VerticalAlignment="Top" />
   
   </Grid>

9. Now if your run your program you'll see your binding is just working fine.
   
   
   

Read more articles on Universal Windows Apps:

• Simple Data Binding In Universal Windows Platform
• Use Hamburger Menu In UWP Application