Intersoft ClientUI Documentation
How-to: Bind Data to UXTickBar
Intersoft ClientUI 8 > ClientUI Controls > Control Library > Advanced Input Controls Overview > UXTickBar > How-to: Bind Data to UXTickBar

This example shows how to bind data to UXTickBar.

Example

Description

UXTickBar is an items control that derives from ISItemsControl class, which means that UXTickBar can contain and display a collection of objects. You can display a collection of UIElement through the Items property, or a collection of data entity through the ItemsSource property. When UXTickBar is bound to a collection of data entity, the tickbar item will not be generated automatically. The tickbar item will be considered as tickbar item with custom content. For more information about items control, see Items Control Overview.

The following code example shows how to bind a list of roman numerals data to UXTickBar.

Code

Model
Copy Code 
using System.ComponentModel;

namespace ClientUI.Samples.Models
{
    public class Numeral : INotifyPropertyChanged
    {
        private string _numeralText;

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

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

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

View Model
Copy Code 
using System.Collections.ObjectModel;
using System.ComponentModel;
using ClientUI.Samples.Models;

namespace ClientUI.Samples.ViewModels
{
    public class NumeralViewModel : INotifyPropertyChanged
    {
        public NumeralViewModel()
        {
            this.Data = new ObservableCollection();
            this.Data.Add(new Numeral() { NumeralText = "I" });
            this.Data.Add(new Numeral() { NumeralText = "II" });
            this.Data.Add(new Numeral() { NumeralText = "III" });
            this.Data.Add(new Numeral() { NumeralText = "IV" });
            this.Data.Add(new Numeral() { NumeralText = "V" });
            this.Data.Add(new Numeral() { NumeralText = "VI" });
            this.Data.Add(new Numeral() { NumeralText = "VII" });
            this.Data.Add(new Numeral() { NumeralText = "VIII" });
            this.Data.Add(new Numeral() { NumeralText = "IX" });
            this.Data.Add(new Numeral() { NumeralText = "X" });
        }

        private ObservableCollection _data;

        public ObservableCollection Data
        {
            get { return this._data; }
            set
            {
                if (this._data != value)
                {
                    this._data = value;
                    this.OnPropertyChanged("Data");
                }
            }
        }

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

            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

View
Copy Code 
            
<UserControl x:Class="ClientUI.Samples.MainPage"
    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"
    xmlns:Intersoft="http://intersoft.clientui.com/schemas"    
    xmlns:vm="clr-namespace:ClientUI.Samples.ViewModels"
    mc:Ignorable="d"
    d:DesignHeight="400" d:DesignWidth="800">

    <Grid x:Name="LayoutRoot">
        <Grid.DataContext>
            <vm:NumeralViewModel></vm:NumeralViewModel>
        </Grid.DataContext>

        <Intersoft:UXTickBar Minimum="1" ItemsSource="{Binding Data}" DisplayMemberPath="NumeralText"/>
    </Grid>
 
</UserControl>

The following figure shows the UXTickBar bound to a list of roman numeral data.

See Also
UXTickBar Class

Concepts

Data Binding Overview
Items Control Overview
MVVM Pattern Overview

Other Resources

Locating the Samples in Local Installation
Walkthroughs and How-to Topics