This walkthrough shows how to bind the Value property of UXProgressBar to the Text property of UXTextBox. The binding is perform using FindName mode of ClientUI Binding Framework.

In this walkthrough, you perform the following tasks:

• Create a new ClientUI Application project using using Intersoft ClientUI Application project template
• Create a new UXTextBox and new UXProgressBar
• Bind the Value property of the UXProgressBar to the Text property of UXTextBox using ClientUI Binding Framework.

Prerequisites

You need the following components to complete this walkthrough:

• Visual Studio 2010
• Silverlight 4 Tools for Visual Studio 2010
• Intersoft ClientUI

Creating a new ClientUI Application Project

The first step is to create a new ClientUI Application project using Intersoft ClientUI Application project template in Visual Studio.

To create the ClientUI Application project

1. Start Visual Studio 2010.
2. Create a new ClientUI Application project using Intersoft ClientUI Application project template. To learn more, see Walkthrough: Create New Intersoft ClientUI Application Template.
3. In project reference, add System.Xml.Linq.dll. This assembly is required to perform LINQ query to xml data.

Creating new UXTexBox and UXProgressBar

This section shows how to create UXTexBox and UXProgressBar that will be used in the binding scenario.

To create UXTexBox and UXProgressBar

1. Open MainPage.xaml.
2. Add StackPanel to the LayoutRoot Grid. Set VerticalAlignment to Center, HorizontalAlignment to Center and Width to 200.
   

   XAML	Copy Code
   <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Width="200"> </StackPanel>

3. Add UXTextBox inside the StackPanel. Set Text to 10 and Margin to 0,0,0,10.
   

   XAML	Copy Code
   <Grid x:Name="LayoutRoot"> <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Width="200"> <Intersoft:UXTextBox Name="uXTextBox1" Text="10" Margin="0,0,0,10" /> </StackPanel> </Grid>

   
   
4. Add UXProgressBar to the StackPanel, set Height to 20 and Maximum to 100.
   

   XAML	Copy Code
   <Grid x:Name="LayoutRoot"> <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Width="200"> <Intersoft:UXTextBox Name="uXTextBox1" Text="10" Margin="0,0,0,10" /> <Intersoft:UXProgressBar Height="20" Maximum="100" /> </StackPanel> </Grid>

   
   

Binding to Value property of ProgressBar

This section shows how to bind the Value property of UXProgressBar to the Text property of UXTextBox using FindName mode.

To bind UXProgressBar's Value property to the UXTextBox's Text property value.

1. Create ClientUI Binding Framework. Set the ElementName property to uxTextBox1, SourceProperty property to Text, Mode property to FindName and TargetProperty property to Value,
   

   XAML

   Copy Code

   <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Width="200"> <Intersoft:UXTextBox Name="uXTextBox1" Text="10" Margin="0,0,0,10" /> <Intersoft:UXProgressBar Height="20" Name="uXProgressBar1"> <Intersoft:BindingFramework.Binding> <Intersoft:BindingDescriptor TargetProperty="Value" SourceProperty="Text" Mode="FindName" ElementName="uXTextBox1"/> </Intersoft:BindingFramework.Binding> </Intersoft:UXProgressBar> </StackPanel>

2. Save, build and run the project. Notice that the Value of the UXProgressBar will change based on the UXTextBox's Text value.
   

For more information about ClientUI Binding Framework, see Data Binding Overview.

Complete Code Listing

This section lists the complete code used in this walkthrough.

MainPage.xaml

<Intersoft:UXPage 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
        x:Class="ClientUIApplication1.MainPage" 
        Title="MainPage Page"
        d:DesignWidth="640" d:DesignHeight="480">
        
        <Grid x:Name="LayoutRoot">
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Width="200">
            <Intersoft:UXTextBox Name="uXTextBox1" Text="10" Margin="0,0,0,10" />
            <Intersoft:UXProgressBar Height="20" Name="uXProgressBar1">
                <Intersoft:BindingFramework.Binding>
                    <Intersoft:BindingDescriptor TargetProperty="Value" SourceProperty="Text" Mode="FindName" ElementName="uXTextBox1"/>
                </Intersoft:BindingFramework.Binding>
            </Intersoft:UXProgressBar>
        </StackPanel>
    </Grid>
</Intersoft:UXPage>