Intersoft ClientUI Documentation
How-to: Specify Binding Source
See Also Send Feedback
Intersoft ClientUI 7 > ClientUI Fundamentals > Data Binding Overview > Data Binding How-to Topics > How-to: Specify Binding Source

Glossary Item Box

In data binding, the binding source object refers to the object you obtain your data from. This topic describes the different ways of specifying the binding source.

Example

Description

If you are binding several properties to a common source, you want to use the DataContext property, which provides a convenient way to establish a scope within which all data-bound properties inherit a common source. To learn more about binding using DataContext property, see How-to: Bind Data to Intersoft ClientUI Controls.

Alternatively, if you want to specify the source on your individual bindings explicitly, you have the following options. These take precedence over the inherited data context.

  • Source
    You use this property to set the source to an instance of an object. If you do not need the functionality of establishing a scope in which several properties inherit the same data context, you can use the Source property instead of the DataContext property.
  • RelativeSource
    This is useful when you want to specify the source relative to where your binding target is. Some common scenarios where you may use this property is when you want to bind one property of your element to another property of the same element or if you are defining a binding in a style or a template.
  • ElementName
    You specify a string that represents the element you want to bind to. This is useful when you want to bind to the property of another element on your application. For example, if you want to set a value of UXTextBox using a Slider, or if you want to bind the Content of your control to the SelectedValue property of your UXListBox control. To learn more how to do this see How to: Bind to a Collection and Display Information Based on Selection.

In the following example, you instantiate the Contact object with a predefined Name and Image properties.

Code

Model Copy Code 
using System.ComponentModel;

namespace ClientUI.Samples.Models
{
    public class Contact: INotifyPropertyChanged
    {
        private string _name;
        private string _image;

        public string Name
        {
            get { return this._name; }
            set
            {
                if (this._name != value)
                {
                    this._name = value;
                    this.OnPropertyChanged("Name");
                }
            }
        }

        public string Image
        {
            get { return this._image; }
            set
            {
                if (this._image != value)
                {
                    this._image = value;
                    this.OnPropertyChanged("Image");
                }
            }
        }

        protected void OnPropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}
View Copy Code 
<UserControl
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"    
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"      
    xmlns:vm="clr-namespace:ClientUI.Samples.ViewModels"
    mc:Ignorable="d"
        x:Class="ClientUI.Samples.MainPage" Width="800" Height="600">
    <UserControl.Resources>
        <m:Contact x:Key="DataSource" Name="Vynna Lawrance" Image="Vynna.jpg"/>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Intersoft:GlassLabel HorizontalAlignment="Center" VerticalAlignment="Center" ContentType="ContentAndImage" 
                              ImageWidth="48" ImageHeight="48" ImageMargin="4" FontSize="16"
                              Content="{Binding Name, Source={StaticResource DataSource}}" ImageSource="{Binding Image, Source={StaticResource DataSource}}"/>
    </Grid>
</UserControl>

See Also

©2012. All Rights Reserved.