This example demonstrates how to perform data binding to Intersoft ClientUI Controls

Example

Description

Data binding provides a simple and consistent way for applications to present and interact with data. Elements can be bound to data from a variety of data sources in the form of common language runtime (CLR) objects and XML. To learn more about data binding see Data Binding overviews.

The following example shows how to bind Image and Content of a GlassLabel to a value using data binding.

The binding source is property of the MainPageViewModel class since it uses MVVM pattern. To learn more about MVVM pattern, see MVVM Pattern overviews.

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 Model	Copy Code
using ClientUI.Samples.Models; using System.ComponentModel; namespace ClientUI.Samples.ViewModels { public class MainPageViewModel: INotifyPropertyChanged { public MainPageViewModel() { this.Contact = new Contact() { Image = "contact1.jpg", Name = "Vynna Lawrence" }; } private Contact _contact; public Contact Contact { get { return this._contact; } set { if (this._contact != value) { this._contact = value; this.OnPropertyChanged("Contact"); } } } protected void OnPropertyChanged(string propertyName) { PropertyChangedEventHandler handler = PropertyChanged; if (handler != null) { handler(this, new PropertyChangedEventArgs(propertyName)); } } public event PropertyChangedEventHandler PropertyChanged; } }

View Model

Copy Code

using ClientUI.Samples.Models;
using System.ComponentModel;

namespace ClientUI.Samples.ViewModels
{
    public class MainPageViewModel: INotifyPropertyChanged
    {
        public MainPageViewModel()
        {
            this.Contact = new Contact() { Image = "contact1.jpg", Name = "Vynna Lawrence" };
        }

        private Contact _contact;

        public Contact Contact
        {
            get { return this._contact; }
            set
            {
                if (this._contact != value)
                {
                    this._contact = value;
                    this.OnPropertyChanged("Contact");
                }
            }
        }

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChangedEventHandler handler = PropertyChanged;

            if (handler != null)
            {
                handler(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.DataContext> <vm:MainPageViewModel/> </UserControl.DataContext> <Grid x:Name="LayoutRoot" Background="White"> <Intersoft:GlassLabel HorizontalAlignment="Center" VerticalAlignment="Center" ContentType="ContentAndImage" ImageWidth="48" ImageHeight="48" ImageMargin="4" FontSize="16" Content="{Binding Contact.Name}" ImageSource="{Binding Contact.Image}"/> </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.DataContext>
        <vm:MainPageViewModel/>
    </UserControl.DataContext>
    <Grid x:Name="LayoutRoot" Background="White">
        <Intersoft:GlassLabel HorizontalAlignment="Center" VerticalAlignment="Center" ContentType="ContentAndImage" 
                              ImageWidth="48" ImageHeight="48" ImageMargin="4" FontSize="16"
                              Content="{Binding Contact.Name}" ImageSource="{Binding Contact.Image}"/>
    </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