Data Binding

The goal of this article is to demonstrate how to populate a RadOutlookBar with business objects. Basically the control can be data bound to a collection of objects through its ItemsSource property and dynamically create RadOutlookBarItems.

The ItemsSource property allows RadOutlookBar to be bound to any collection that implements the IEnumerable interface. By default the content of the generated RadOutlookBarItems will be set to the value returned by the ToString() method of the business object.

In order to bind a RadOutlookBar to a collection of business objects you can perform the following steps:

Define a RadOutlookBar in XAML.

    <telerik:RadOutlookBar x:Name="radOutlookBar"/>

Create a business object

    public class MenuItem
    {
        public string Header { get; set; }
        public string Content { get; set; }
        public string ImageSourcePath { get; set; }
    }

    Public Class MenuItem
        Public Property Header() As String
            Get
                Return m_Header
            End Get
            Set(value As String)
                m_Header = Value
            End Set
        End Property
        Private m_Header As String
        Public Property Content() As String
            Get
                Return m_Content
            End Get
            Set(value As String)
                m_Content = Value
            End Set
        End Property
        Private m_Content As String
        Public Property ImageSourcePath() As String
            Get
                Return m_ImageSourcePath
            End Get
            Set(value As String)
                m_ImageSourcePath = Value
            End Set
        End Property
        Private m_ImageSourcePath As String
    End Class

Create a view model class which will contains only a collection business objects

    public class MailMenuViewModel : ViewModelBase
    {
        public ObservableCollection<MenuItem> MenuItems { get; set; }

        private MenuItem selectedItem;
        public MenuItem SelectedItem
        {
            get { return this.selectedItem; }
            set
            {
                if (this.selectedItem != value)
                {
                    this.selectedItem = value;
                    this.OnPropertyChanged("SelectedItem");
                }
            }
        }

        public MailMenuViewModel()
        {
            this.MenuItems = new ObservableCollection<MenuItem>();
            this.MenuItems.Add(new MenuItem() { Content = "Mails content", Header = "Mail", ImageSourcePath = "/images/mailBig.png" });
            this.MenuItems.Add(new MenuItem() { Content = "Contacts content", Header = "Contacts", ImageSourcePath = "/images/contactsBig.png" });
            this.MenuItems.Add(new MenuItem() { Content = "Calendar content", Header = "Calendar", ImageSourcePath = "/images/calendarBig.png" });

            this.selectedItem = this.MenuItems[0];
        }
    }

    Public Class MailMenuViewModel
        Inherits ViewModelBase
        Public Property MenuItems() As ObservableCollection(Of MenuItem)
            Get
                Return m_MenuItems
            End Get
            Set(value As ObservableCollection(Of MenuItem))
                m_MenuItems = Value
            End Set
        End Property
        Private m_MenuItems As ObservableCollection(Of MenuItem)

        Private m_selectedItem As MenuItem
        Public Property SelectedItem() As MenuItem
            Get
                Return Me.m_selectedItem
            End Get
            Set(value As MenuItem)
                If Me.m_selectedItem <> value Then
                    Me.m_selectedItem = value
                    Me.OnPropertyChanged("SelectedItem")
                End If
            End Set
        End Property

        Public Sub New()
            Me.MenuItems = New ObservableCollection(Of MenuItem)()
    Me.MenuItems.Add(New MenuItem() With { _
    Key .Content = "Mails content", _
    Key .Header = "Mail", _
    Key .ImageSourcePath = "/images/mailBig.png" _
            })
    Me.MenuItems.Add(New MenuItem() With { _
    Key .Content = "Contacts content", _
    Key .Header = "Contacts", _
    Key .ImageSourcePath = "/images/contactsBig.png" _
            })
    Me.MenuItems.Add(New MenuItem() With { _
    Key .Content = "Calendar content", _
    Key .Header = "Calendar", _
    Key .ImageSourcePath = "/images/calendarBig.png" _
            })

            Me.m_selectedItem = Me.MenuItems(0)
        End Sub
    End Class

Set the DataContext of the RadOutlookBar to a new instance of the created view model

    public MainWindow()
    {
        InitializeComponent();
        this.radOutlookBar.DataContext = new MailMenuViewModel();
    }

    Public Sub New()
        InitializeComponent()
        Me.radOutlookBar.DataContext = New MailMenuViewModel()
    End Sub

Then bind the ItemsSource property to the collection of the view model
```
    <telerik:RadOutlookBar  ItemsSource="{Binding MenuItems}"/>
```
You can see the end result bellow:

outlook databinding result 0

Using Custom Templates

The RadOutlookBar has few properties of type DataTemplate that can be used in order to control its items appearance. Each property accepts a DataTemplate as a value that determines the visual appearance of the RadOutlookBarItems and the RadOutlookBar itself. The properties that can be used are the following:

ItemTemplate
ItemMinimizedTemplate
ItemDropDownTemplate
TitleTemplate
MinimizedButtonContentTemplate
ContentTemplate

There are also template selectors for all of the listed templates except for the MinimizedButtonContentTemplate.

To customize the project that we developed so far you can do the following:

Create an ItemTemplate - this is the DataTemplate that describes the visual structure of a data obejct of each RadOutlookBarItem
```
    <DataTemplate x:Key="outlookBarItemTemplate">
        <TextBlock Text="{Binding Header}" />
    </DataTemplate>
```

Create an ItemMinimizedTemplate - this is the DataTemplate that describes each RadOutlookBarItem that is placed in the minimized area of the RadOutlookBar

    <DataTemplate x:Key="outlookBarItemMinimizedTemplate">
        <TextBlock Text="{Binding Header}" VerticalAlignment="Center" />
    </DataTemplate>

Create an ItemDropDownContentTemplate - this is the DataTemplate applied to the items in the drop down which contains the minimized items that cannot fit in the minimized area
```
    <DataTemplate x:Key="outlookBarItemDropDownTemplate">
    <TextBlock Text="{Binding Header}" />
    </DataTemplate>
```

Create a TitleTemplate - this is the DataTemplate that describes the title of the RadOutlookBar

    <DataTemplate x:Key="outlookBarTitleTemplate">
        <TextBlock Text="{Binding Header}" 
                   FontSize="16" 
                   FontWeight="Bold" />
    </DataTemplate>

Create a MinimizedButtonContentTemplate - this is the DataTemplate that describes the button which is displayed when you minimize the RadOutlookBar

    <DataTemplate x:Key="outlookBarMinimizedBtnTemplate">
        <TextBlock Text="{Binding Header}" FontStyle="Italic" 
                   TextDecorations="Underline" 
                   FontWeight="Bold"/>
    </DataTemplate>

Create a ContentTemplate - this is the DataTemplate that describes the content of the selected item

    <DataTemplate x:Key="outlookBarContentTemplate">
        <Grid Background="Bisque" Margin="10">
            <TextBlock Text="{Binding Content}" 
                       FontStyle="Italic" 
                       Margin="10" />
        </Grid>
    </DataTemplate>

After you define your templates you can set the appropriate properties of the RadOutlookBar

     <telerik:RadOutlookBar SelectedItem="{Binding SelectedItem, Mode=TwoWay}"
                           ItemsSource="{Binding MenuItems}"                               
                           ItemTemplate="{StaticResource outlookBarItemTemplate}"
                           ItemMinimizedTemplate="{StaticResource outlookBarItemMinimizedTemplate}"
                           ItemDropDownContentTemplate="{StaticResource outlookBarItemDropDownTemplate}"
                           TitleTemplate="{StaticResource outlookBarTitleTemplate}"
                           ContentTemplate="{StaticResource outlookBarContentTemplate}"
                           MinimizedButtonContentTemplate="{StaticResource outlookBarMinimizedBtnContentTemplate}"
                           MinimizedButtonContent="{Binding SelectedItem}" />

You can download a runnable project of the demonstrated example from our online SDK repository here, after navigating OutlookBar/DataBinding

You can see the end result on the screenshots below

outlook databinding result 1

Data Binding

Using Custom Templates

See Also

Give article feedback