wpf-7978-controls-and-libraries-layout-management-tab-control-concepts-binding-to-data-overview.md
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.
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.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace DXTabControlExample.Common {
public enum Gender { Female = 0, Male = 1 }
}
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() { }
}
}
<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>
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 = "[email protected]",
Phone = "(555)349-3010", Address = "1198 Theresa Cir", City = "Whitinsville", State = "MA", Zip = "01582",
}),
ViewModelSource.Create(()=> new ContactViewModel() {
FirstName = "Amber", LastName = "Seaman", Gender = Gender.Female, Phone = "(555)698-4285",
Address = "28700 S Main St", City = "Wilsonville", State = "AL", Zip = "35188",
}),
ViewModelSource.Create(()=> new ContactViewModel() {
FirstName = "Annie", LastName = "Vicars", Gender = Gender.Female, Email = "[email protected]",
Phone = "(555)922-1349", Address = "7267 New York Ave", City = "Jersey City", State = "NJ", Zip = "07306",
}),
ViewModelSource.Create(()=> new ContactViewModel() {
FirstName = "Darlene", LastName = "Catto", Gender = Gender.Female, Email = "[email protected]",
Phone = "(555)752-0582", Address = "32125 4th St NW #210", City = "Washington", State = "DC", Zip = "20001",
}),
ViewModelSource.Create(()=> new ContactViewModel() {
FirstName = "Angela", LastName = "Gross", Gender = Gender.Female, Email = "[email protected]",
Phone = "(555)247-1252", Address = "8723 Chicago Ave", City = "Nederland", State = "TX", Zip = "77620",
}),
ViewModelSource.Create(()=> new ContactViewModel() {
FirstName = "Edward", LastName = "Keck", Gender = Gender.Male, Email = "[email protected]",
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 = "[email protected]", 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 = "[email protected]",
Phone = "(555)493-8440", Address = "652 Avonwick Gate", City = "Toronto", State = "ON", Zip = "33125",
}),
ViewModelSource.Create(()=> new ContactViewModel() {
FirstName = "Andrew", LastName = "Carter", Gender = Gender.Male, Email = "[email protected]",
Phone = "(555)578-3946", Address = "7121 Bailey St", City = "Worcester", State = "MA", Zip = "01605",
}),
ViewModelSource.Create(()=> new ContactViewModel() {
FirstName = "George", LastName = "Morrison", Email = "[email protected]", Phone = "(555)468-3668",
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");
}
}
}
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 = "[email protected]", .Phone = "(555)349-3010", .Address = "1198 Theresa Cir", .City = "Whitinsville", .State = "MA", .Zip = "01582"}), ViewModelSource.Create(Function() New ContactViewModel() With {.FirstName = "Amber", .LastName = "Seaman", .Gender = Gender.Female, .Phone = "(555)698-4285", .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 = "[email protected]", .Phone = "(555)922-1349", .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 = "[email protected]", .Phone = "(555)752-0582", .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 = "[email protected]", .Phone = "(555)247-1252", .Address = "8723 Chicago Ave", .City = "Nederland", .State = "TX", .Zip = "77620"}), ViewModelSource.Create(Function() New ContactViewModel() With {.FirstName = "Edward", .LastName = "Keck", .Gender = Gender.Male, .Email = "[email protected]", .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 = "[email protected]", .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 = "[email protected]", .Phone = "(555)493-8440", .Address = "652 Avonwick Gate", .City = "Toronto", .State = "ON", .Zip = "33125"}), ViewModelSource.Create(Function() New ContactViewModel() With {.FirstName = "Andrew", .LastName = "Carter", .Gender = Gender.Male, .Email = "[email protected]", .Phone = "(555)578-3946", .Address = "7121 Bailey St", .City = "Worcester", .State = "MA", .Zip = "01605"}), ViewModelSource.Create(Function() New ContactViewModel() With {.FirstName = "George", .LastName = "Morrison", .Email = "[email protected]", .Phone = "(555)468-3668", .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
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
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