Windows 10 Development Tutorial (PDF

Windows 10 Apps Development

get { return ageValue; }

set

{

if (value != ageValue)

{

ageValue = value;

}

}

}

}

}

When the above code is compiled and executed, you will see the following window. Click the Display button.

Let us change the Name and Age and click the Display button again.

You can see that in click button ‘Display’, the text of the textboxes are not used to show the data on TextBlock but the class variables are used.

I recommend you to execute the above code with both cases for better understanding.

Element Binding

It is also possible to bind, not to a standard data source, but rather to another element on the page. Let us create an application called ElementBinding in which a Slider and a

Rectangle are created and with the slider, the rectangle width and height are bound. Given below is the code in XAML.

36

Windows 10 Apps Development

<Page

x:Class="ElementBinding.MainPage"

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

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

xmlns:local="using:ElementBinding"

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

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

mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">

<Rectangle Height="100" Width="100" Fill="SteelBlue"

RenderTransformOrigin="0.5,0.5" Margin="50">

<Rectangle.RenderTransform>

<CompositeTransform ScaleX="{Binding Value,

ElementName=MySlider}"

ScaleY="{Binding Value,

ElementName=MySlider}"/>

</Rectangle.RenderTransform>

</Rectangle>

<Slider Minimum=".5" Maximum="2.0" StepFrequency=".1"

x:Name="MySlider" />

</StackPanel>

</Grid>

</Page>

When the above code is compiled and executed, you will see the following window.

37

Windows 10 Apps Development

With a slider, you can change the size of the rectangle as shown below.

38