Control to Control Binding in Windows Store App

Introduction

In this article we will show how we can bind an element to other elements. There are two ways to bind an element to another element; the first one is by a wizard to set the property in property windows and the second one is to use XAML page code. We can use the second option in the situations where we are well familiar with the properties of controls.

Here we are using two controls; the first one is a slider control and the other one is a textblock control. In this article we will bind the size of textblock text to the slider control between a maximum of 72 and a minimum size of 20 and through the slider we can adjust the size of the textblock text as needed.

Step 1 : First of all you will create a new Metro Style Application. Let us see the description with images of how you will create it.

• Open Visual Studio 2011
• File -> New -> Project
• Choose Template -> Visual C# -> Metro Style Application
• Rename the application

Step 2 : In the Solution Explorer there are two files that we will primarily work with; the BlankPage.xaml and BlankPage.xaml.cs files.

Step 3 : The BlankPage.xaml file is as in the following code:

Code :

<Page

    x:Class="wrapControl.BlankPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:wrapControl"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

<Grid Background="LimeGreen">

    <Grid HorizontalAlignment="Center" VerticalAlignment="Center"  >

    <Grid.RowDefinitions>

            <RowDefinition  Height="Auto" />

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>

    <TextBlock Text="Using Slider Control To Resize The Text" Grid.Row="0" HorizontalAlignment="Center" FontSize="30" Foreground="Red" Width="339.933319091797"/>

            <Slider x:Name="slider" LargeChange="1" Maximum="72" Minimum="20" SmallChange="0.1" Value="12" SizeChanged="FontSizeChange" Grid.Row="1" HorizontalAlignment="Center" Width="200" Height="50"></Slider>

    <TextBlock Text="Binding Data to Slider Control" x:Name="TXTB1" FontSize="{Binding Value, ElementName=slider}" Grid.Row="2" HorizontalAlignment="Center"></TextBlock>

   </Grid>

</Grid>

</Page>

Step 4 : After running this code the output looks like this:

Adjust the size of the Text using the Slider control.