Intersoft ClientUI Documentation
How-to: Bind Data to Intersoft Client UI Controls
See Also Send Feedback
Intersoft ClientUI 7 > ClientUI Fundamentals > Data Binding Overview > Data Binding How-to Topics > How-to: Bind Data to Intersoft Client UI Controls

Glossary Item Box

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

See Also

©2012. All Rights Reserved.