Intersoft ClientUI Documentation
Walkthrough: Bind to Parent Property in XAML using FindName
See Also Send Feedback
Intersoft ClientUI 7 > ClientUI Fundamentals > Data Binding Overview > Data Binding Walkthroughs > Walkthrough: Bind to Parent Property in XAML using FindName

Glossary Item Box

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:

Prerequisites

You need the following components to complete this walkthrough:

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

XAML Copy Code 
<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>

See Also

©2012. All Rights Reserved.