Binding to Data Overview

• Jun 07, 2019
• 8 minutes to read

DXTabControl can display data from a bound data source. The DXTabControl can be bound to any object that implements the IEnumerable interface or its descendant (e.g. IList, ICollection). To bind DXTabControl to a data source, use its DXTabControl.ItemsSource property.

When a DXTabControl is bound to a data source, its DXTabControl.Items collection is filled with data items. The tab control applies the DXTabControl.ItemTemplate template to each element within the collection.

Use the DXTabControl.GetTabItem method to obtain a tab item by its index.

Example: How to bind DXTabControl to data

The following example demonstrates how to bind a tab control to data.

In this example, a tab control is bound to an IList collection which contains data items. The visual presentation of tab items and headers is specified via the DXTabControl.ItemTemplate and DXTabControl.ItemHeaderTemplate templates respectively. The datasource is assigned to the DXTabControl.ItemsSource property to bind the control to data.

Gender.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace DXTabControlExample.Common {
    public enum Gender { Female = 0, Male = 1 }
}

ContactViewModel.cs

using DevExpress.Mvvm.DataAnnotations;
using DXTabControlExample.Common;

namespace DXTabControlExample.ViewModel {
    [POCOViewModel]
    public class ContactViewModel {
        public virtual int Id { get; set; }
        public virtual Gender Gender { get; set; }
        public virtual string FirstName { get; set; }
        public virtual string LastName { get; set; }
        public virtual string CreditCardNumber { get; set; }
        public virtual string Email { get; set; }
        public virtual string Phone { get; set; }
        public virtual string Address { get; set; }
        public virtual string City { get; set; }
        public virtual string State { get; set; }
        public virtual string Zip { get; set; }
        public virtual byte[] Photo { get; set; }

        public ContactViewModel() { }
    }
}

MainView.xaml

<UserControl x:Class="DXTabControlExample.View.MainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
    xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
    xmlns:vm="clr-namespace:DXTabControlExample.ViewModel"
    DataContext="{dxmvvm:ViewModelSource Type=vm:MainViewModel}"
    mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.Resources>
            <Style TargetType="GroupBox">
                <Setter Property="Margin" Value="4 2"/>
                <Setter Property="HeaderTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <TextBlock Text="{Binding}" FontWeight="Medium"/>
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <Style x:Key="TabItemStyle" TargetType="dx:DXTabItem">
                <Setter Property="Header" Value="{Binding FirstName}"/>
                <Setter Property="Content" Value="{Binding}"/>
            </Style>
            <DataTemplate x:Key="TabItemHeaderTemplate">
                <TextBlock Text="{Binding}" FontWeight="Medium"/>
            </DataTemplate>
            <DataTemplate x:Key="TabItemContentTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <StackPanel>
                        <GroupBox Header="Employee">
                            <StackPanel Orientation="Horizontal" Grid.Column="0">
                                <TextBlock Text="{Binding FirstName}" Margin="2 0" />
                                <TextBlock Text="{Binding LastName}" Margin="2 0"/>
                            </StackPanel>
                        </GroupBox>
                        <GroupBox Header="Contact Information">
                            <Grid Grid.Column="0">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="Email: " Grid.Column="0" Grid.Row="0"/>
                                <TextBlock Text="Phone: " Grid.Column="0" Grid.Row="1"/>
                                <TextBlock Text="Zip: " Grid.Column="0" Grid.Row="2"/>
                                <TextBlock Text="{Binding Email}" Grid.Column="1" Grid.Row="0"/>
                                <TextBlock Text="{Binding Phone}" Grid.Column="1" Grid.Row="1"/>
                                <TextBlock Text="{Binding Zip}" Grid.Column="1" Grid.Row="2"/>
                            </Grid>
                        </GroupBox>
                    </StackPanel>
                    <GroupBox Header="Photo" Grid.Column="1" >
                        <Image Margin="5" Source="{Binding Photo}"/>
                    </GroupBox>
                </Grid>
            </DataTemplate>
        </Grid.Resources>
        <dx:DXTabControl 
            ItemsSource="{Binding Contacts}" 
            ItemContainerStyle="{StaticResource TabItemStyle}"
            ItemHeaderTemplate="{StaticResource TabItemHeaderTemplate}"
            ItemTemplate="{StaticResource TabItemContentTemplate}">
            <dx:DXTabControl.View>
                <dx:TabControlStretchView        
                    HideButtonShowMode="InAllTabs" 
                    SingleTabItemHideMode="HideAndShowNewItem"/> 
            </dx:DXTabControl.View>
        </dx:DXTabControl>
    </Grid>
</UserControl>

MainViewModel.cs

using DevExpress.Mvvm;
using DevExpress.Mvvm.POCO;
using DXTabControlExample.Common;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;

namespace DXTabControlExample.ViewModel {
    public class MainViewModel {
        public virtual ObservableCollection<ContactViewModel> Contacts { get; set; }
        public MainViewModel() {
            Contacts = new ObservableCollection<ContactViewModel>() {
                ViewModelSource.Create(()=> new ContactViewModel() {
                    FirstName = "Carolyn", LastName = "Baker", Gender = Gender.Female, Email = "[e-mail]", 
                    Phone = "[phone]", Address = "1198 Theresa Cir", City = "Whitinsville", State = "MA", Zip = "01582",
                }),
                ViewModelSource.Create(()=> new ContactViewModel() {
                    FirstName = "Amber", LastName = "Seaman", Gender = Gender.Female, Phone = "[phone]",
                    Address = "28700 S Main St", City = "Wilsonville", State = "AL", Zip = "35188",
                }),
                ViewModelSource.Create(()=> new ContactViewModel() {
                    FirstName = "Annie", LastName = "Vicars", Gender = Gender.Female, Email = "[e-mail]", 
                    Phone = "[phone]", Address = "7267 New York Ave", City = "Jersey City", State = "NJ", Zip = "07306",
                }),
                ViewModelSource.Create(()=> new ContactViewModel() {
                    FirstName = "Darlene", LastName = "Catto", Gender = Gender.Female, Email = "[e-mail]", 
                    Phone = "[phone]", Address = "32125 4th St NW #210", City = "Washington", State = "DC", Zip = "20001",
                }),
                ViewModelSource.Create(()=> new ContactViewModel() {
                    FirstName = "Angela", LastName = "Gross", Gender = Gender.Female, Email = "[e-mail]", 
                    Phone = "[phone]", Address = "8723 Chicago Ave", City = "Nederland", State = "TX", Zip = "77620",
                }),
                ViewModelSource.Create(()=> new ContactViewModel() {
                    FirstName = "Edward", LastName = "Keck", Gender = Gender.Male, Email = "[e-mail]", 
                    Phone = "410-7042", Address = "38202 Greens Rd", City = "Humble", State = "TX", Zip = "77397",
                }),
                ViewModelSource.Create(()=> new ContactViewModel() {
                    FirstName = "Angela", LastName = "Walker", Gender = Gender.Female, Email = "[e-mail]", Phone = "555",
                    Address = "8913 Lakeshore Dr", City = "Jacksons Gap", State = "AL", Zip = "36863",
                }),
                ViewModelSource.Create(()=> new ContactViewModel() {
                    FirstName = "Alice", LastName = "Martin", Gender = Gender.Female, Email = "[e-mail]", 
                    Phone = "[phone]", Address = "652 Avonwick Gate", City = "Toronto", State = "ON", Zip = "33125",
                }),
                ViewModelSource.Create(()=> new ContactViewModel() {
                    FirstName = "Andrew", LastName = "Carter", Gender = Gender.Male, Email = "[e-mail]", 
                    Phone = "[phone]", Address = "7121 Bailey St", City = "Worcester", State = "MA", Zip = "01605",
                }),
                ViewModelSource.Create(()=> new ContactViewModel() {
                    FirstName = "George", LastName = "Morrison", Email = "[e-mail]", Phone = "[phone]",
                    Address = "7716 Country Woods Cir", City = "Kissimmee", State = "FL", Zip = "34747",
                }),
            };
            InitializePhotos(Contacts);
        }

        void InitializePhotos(IList<ContactViewModel> contacts) {
            foreach (ContactViewModel contact in contacts)
                contact.Photo = GetPhoto(contact);
        }

        byte[] GetPhoto(string name) {
            return File.ReadAllBytes(@"Images\" + name);
        }

        byte[] GetPhoto(ContactViewModel contact) {
            return GetPhoto(contact.FirstName + contact.LastName + ".jpg");
        }
    }
}

MainViewModel.vb

Imports DevExpress.Mvvm
Imports DevExpress.Mvvm.POCO
Imports DXTabControlExample.Common
Imports System.Collections.Generic
Imports System.Collections.ObjectModel
Imports System.IO

Namespace DXTabControlExample.ViewModel
    Public Class MainViewModel
        Public Overridable Property Contacts() As ObservableCollection(Of ContactViewModel)
        Public Sub New()
            Contacts = New ObservableCollection(Of ContactViewModel)() From {ViewModelSource.Create(Function() New ContactViewModel() With {.FirstName = "Carolyn", .LastName = "Baker", .Gender = Gender.Female, .Email = "[e-mail]", .Phone = "[phone]", .Address = "1198 Theresa Cir", .City = "Whitinsville", .State = "MA", .Zip = "01582"}), ViewModelSource.Create(Function() New ContactViewModel() With {.FirstName = "Amber", .LastName = "Seaman", .Gender = Gender.Female, .Phone = "[phone]", .Address = "28700 S Main St", .City = "Wilsonville", .State = "AL", .Zip = "35188"}), ViewModelSource.Create(Function() New ContactViewModel() With {.FirstName = "Annie", .LastName = "Vicars", .Gender = Gender.Female, .Email = "[e-mail]", .Phone = "[phone]", .Address = "7267 New York Ave", .City = "Jersey City", .State = "NJ", .Zip = "07306"}), ViewModelSource.Create(Function() New ContactViewModel() With {.FirstName = "Darlene", .LastName = "Catto", .Gender = Gender.Female, .Email = "[e-mail]", .Phone = "[phone]", .Address = "32125 4th St NW #210", .City = "Washington", .State = "DC", .Zip = "20001"}), ViewModelSource.Create(Function() New ContactViewModel() With {.FirstName = "Angela", .LastName = "Gross", .Gender = Gender.Female, .Email = "[e-mail]", .Phone = "[phone]", .Address = "8723 Chicago Ave", .City = "Nederland", .State = "TX", .Zip = "77620"}), ViewModelSource.Create(Function() New ContactViewModel() With {.FirstName = "Edward", .LastName = "Keck", .Gender = Gender.Male, .Email = "[e-mail]", .Phone = "410-7042", .Address = "38202 Greens Rd", .City = "Humble", .State = "TX", .Zip = "77397"}), ViewModelSource.Create(Function() New ContactViewModel() With {.FirstName = "Angela", .LastName = "Walker", .Gender = Gender.Female, .Email = "[e-mail]", .Phone = "555", .Address = "8913 Lakeshore Dr", .City = "Jacksons Gap", .State = "AL", .Zip = "36863"}), ViewModelSource.Create(Function() New ContactViewModel() With {.FirstName = "Alice", .LastName = "Martin", .Gender = Gender.Female, .Email = "[e-mail]", .Phone = "[phone]", .Address = "652 Avonwick Gate", .City = "Toronto", .State = "ON", .Zip = "33125"}), ViewModelSource.Create(Function() New ContactViewModel() With {.FirstName = "Andrew", .LastName = "Carter", .Gender = Gender.Male, .Email = "[e-mail]", .Phone = "[phone]", .Address = "7121 Bailey St", .City = "Worcester", .State = "MA", .Zip = "01605"}), ViewModelSource.Create(Function() New ContactViewModel() With {.FirstName = "George", .LastName = "Morrison", .Email = "[e-mail]", .Phone = "[phone]", .Address = "7716 Country Woods Cir", .City = "Kissimmee", .State = "FL", .Zip = "34747"})}
            InitializePhotos(Contacts)
        End Sub

        Private Sub InitializePhotos(ByVal contacts As IList(Of ContactViewModel))
            For Each contact As ContactViewModel In contacts
                contact.Photo = GetPhoto(contact)
            Next contact
        End Sub

        Private Function GetPhoto(ByVal name As String) As Byte()
            Return File.ReadAllBytes("Images\" & name)
        End Function

        Private Function GetPhoto(ByVal contact As ContactViewModel) As Byte()
            Return GetPhoto(contact.FirstName & contact.LastName & ".jpg")
        End Function
    End Class
End Namespace

ContactViewModel.vb

Imports DevExpress.Mvvm.DataAnnotations
Imports DXTabControlExample.Common

Namespace DXTabControlExample.ViewModel
    <POCOViewModel> _
    Public Class ContactViewModel
        Public Overridable Property Id() As Integer
        Public Overridable Property Gender() As Gender
        Public Overridable Property FirstName() As String
        Public Overridable Property LastName() As String
        Public Overridable Property CreditCardNumber() As String
        Public Overridable Property Email() As String
        Public Overridable Property Phone() As String
        Public Overridable Property Address() As String
        Public Overridable Property City() As String
        Public Overridable Property State() As String
        Public Overridable Property Zip() As String
        Public Overridable Property Photo() As Byte()

        Public Sub New()
        End Sub
    End Class
End Namespace

Gender.vb

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text

Namespace DXTabControlExample.Common
    Public Enum Gender
        Female = 0
        Male = 1
    End Enum
End Namespace