DevStudent

Steps for binding value of a control to other control

Drag and drop a slider and rectangle to your xaml design page and name them as slider1 and rectangle1.
Now go the properties of slider 1 - StepFrequency="0.1", Maximum="10", Minimum="0", Value="2".
Drag the edges of slider1 to have good width. eg: Width="1122"
Now go to the properties of rectangle1 - transform - select scalable icon - click on the binding small square icon to see the list of binding option for x value - select create data binding - select binding type as element name - select slider1 under grid - select path as value - click on ok.
Do the same with y to add value of slider1 as databinding value for rectangle1 y value.

And see the output. With a change in the value of slider1 the rectangle1 size is scaled. This is because the value of the slider1 is binded to the value of x and y of rectangle1.

Code of mainpage.xaml page for the above example is given below

Converters are used to change data during binding.
-IValueConvertor: Convert converts the Object Property data to a new format/value before assignment to the FrameworkElement property. ConvertBack converts the FrameworkElement Property data to a new format/value before assignment to the Object Property in two-way bindings. Often not implemented.

There are three types of binding. OneTime, OneWay, TwoWay.
In OneTime bindings data will be updated from the datasource only one time that is when binding is created.
In OneWay bindings data will be updated continuosly from the source to the target for every change and this is default binding mode.
In TwoWay bindings data will be updated from target to source and source to target continuously for every change.

Here is an example for databinding with two way mode.
In this example we will use two textboxes and the data entered in textbox1 will be immediately displayed in textbox2 with uppercase characters.
So databinding + convertion to uppercase letters

Steps for databinding with two way mode and data conversion example
Create a new blank c# xaml windows store app project
Add a new class to the project and name it as UpperCaseConvertor
Add this namespace using Windows.UI.Xaml.Data;
Inherit this class IValueConverter
Right click on the class name - implement interface - implement interface explicitly
Now the code generated looks should be modified as code below for convertion.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml.Data;

namespace App1
{
    class UpperCaseConvertor:IValueConverter
    {

        object IValueConverter.Convert(object value, Type targetType, object parameter, string language)
        {
            if (!(value is string))
            {
                return string.Empty;
            }
            var valAsString=value  as string;
            return valAsString.ToUpper();

        }

        object IValueConverter.ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }
}
Now create XAML UI to use this UpperCaseConvert class.
Now build the project once to save the class name in resources.
Go to mainpage.xaml - drag and drop two textboxes to design page and name them as textbox1 and textbox2.
Go to the properties of textbox2 - click on the square box beside text property and select create data binding -
Binding type- ElementName, ElementName - textbox1, path - text,
Convertor - add value converter - select UpperCaseConvertor and click on ok and ok again.

Now in the output you can see that the text entered in textbox1 will be converted into uppercase and displayed in the textbox2.

xaml code

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <local:UpperCaseConverter x:Key="UpperCaseConverter"/>
    </Page.Resources>
    <Grid Background="Black">
        <TextBox x:Name="textbox1" Width="200" HorizontalAlignment="Left" Margin="124,136,0,0" Text="Hello"  VerticalAlignment="Top"/>
        <TextBox x:Name="textbox2" Width="200" HorizontalAlignment="Left" Margin="124,215,0,0" 
        Text="{Binding Text, Converter={StaticResource UpperCaseConverter}, ElementName=textbox1, Mode=OneWay }" VerticalAlignment="Top"/>
    </Grid>

</Page>

Mode=OneWay for continuous datasource assignment
Mode=OneTime for one time datasource assignment when datasource is created.