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; } }

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>

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>

Concepts

Data Binding Overview

MVVM Pattern Overview

Advanced MVVM

Content Model Overview

Other Resources

Data Binding How-to Topics

Locating the Samples in Local Installation

Walkthroughs and How-to Topics