data-binding.md

title	page_title	description	slug	tags	published	position
Data Binding	Data Binding	This article demonstrates how to bind the RadTabbedWindow control to a collection of business objects.	radtabbedwindow-data-binding	getting,started	true	2

Data Binding

This article demonstrates how to bind the RadTabbedWindow control to a collection of business objects.

For the purposes of this example the control is bound to a collection of Tab objects. Please note that the class inherits from ViewModelBase which is the Telerik implementation of the INotifyPropertyChanged interface.

[C#] Example 1: The Tab class

{{region cs-radtabbedwindow-data-binding_1}} public class Tab : ViewModelBase { private string header; private string content;

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

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

{{endregion}}

The next step is to create an ObservableCollection of Tab objects in your viewmodel.

[C#] Example 2: Create an ObservableCollection in the viewmodel

{{region cs-gridview-configuring-the-databindings_2}}
public class TabbedWindowViewModel : ViewModelBase { private ObservableCollection tabs;

    public ObservableCollection<Tab> Tabs
    {
        get
        {
            if (this.tabs == null)
            {
                this.tabs = new ObservableCollection<Tab>();
                this.tabs.Add(new Tab() { Header = "Progress", Content = "Progress Content" });
                this.tabs.Add(new Tab() { Header = "Microsoft", Content = "Microsoft Content" });
                this.tabs.Add(new Tab() { Header = "Google", Content = "Google Content" });
            }

            return this.tabs;
        }
    }
}

{{endregion}}

All that's left is to bind this collection to the RadTabbedWindow control. You also need to define the DisplayMemberPath and ContentTemplate properties so that the tabs appear as expected.

[XAML] Example 3: Bind the ItemsSource property

{{region xaml-gridview-configuring-the-databindings_3}} <telerik:RadTabbedWindow x:Class="DataBinding.TabbedWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:DataBinding" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" DisplayMemberPath="Header"
ItemsSource="{Binding Tabs}"> telerik:RadTabbedWindow.DataContext <local:TabbedWindowViewModel /> </telerik:RadTabbedWindow.DataContext> telerik:RadTabbedWindow.ContentTemplate </telerik:RadTabbedWindow.ContentTemplate> </telerik:RadTabbedWindow> {{endregion}}

important As of R2 2019 SP1 the control's Items property (populated when setting the control's ItemsSource) is of type IList. Prior to this version of the controls, it was of type ObservableCollection.

important Please note that you need to replace the DataBinding namespace with your namespace.

Upon running the application, your RadTabbedWindow will now be populated with tabs as shown on Figure 1.

{% figure 1, "DataBound RadTabbedWindow", "tabbedwindow-getting-started-2.png" %}

See Also

• [Key Properties]({%slug radtabbedwindow-key-properties%})
• [Events]({%slug radtabbedwindow-events%})
• [Styles and Templates]({%slug radtabbedwindow-styles-and-templates%})