How to: Bind Data to Telerik® UI for WPF
This topic demonstrates how to bind Telerik RadControls for WPF such as a RadComboBox or RadGridView to a collection of objects.
Binding Data to Telerik UI for WPF
Suppose, you have a WPF application and you have created the SofiaCarRental model.
When the main window is loaded, a LINQ query is executed to load all Category objects. This result is bound to a RadComboBox control. When a specific Category is selected, the related collection of Car objects is bound to a RadGridView control. Additionally, the MVVM pattern is demonstrated in this example.
Creating the Model
The first step is to implement the first part of the MVVM patter, i.e. the Model. Add a new interface named IMainModel. The interface will expose just one method for load all categories from the database.
using System.Collections.Generic;
namespace WpfApplication
{
public interface IMainModel
{
IEnumerable<Category> LoadCategories();
}
}
Public Interface IMainModel
Function LoadCategories() As IEnumerable(Of Category)
End Interface
Add new class named MainModel. The MainModel class implements the IMainModel interface. The implementation is simple. What you need is to create a new instance of the OpenAccessContext in the MainModel's constructor. Then, in the LoadCategories method, you just return all categories from the database.
using System.Collections.Generic;
using System.Linq;
namespace WpfApplication
{
public class MainModel : IMainModel
{
private FluentModel dbContext = new FluentModel();
public MainModel()
{
dbContext = new FluentModel();
}
public IEnumerable<Category> LoadCategories()
{
return dbContext.Categories.ToList();
}
}
}
Public Class MainModel
Implements IMainModel
Private dbContext As New FluentModel()
Public Sub New()
dbContext = New FluentModel()
End Sub
Public Function LoadCategories() As IEnumerable(Of Category) Implements IMainModel.LoadCategories
Return dbContext.Categories.ToList()
End Function
End Class
Creating the ViewModel
Next, you need to implement the ViewModel. Create a new class named MainViewModel. Several things should be pointed out for the MainViewModel. First, it exposes two properties of type ObservableCollection<T> - Categories and RelatedCars. The Categories property will be bound to a RadComboBox control. Also, the RadComboBox.SelectedItem will be bound to the SelectedCategory property. When the SelectedItem (the SelectedCategory) get changed, then the RelatedCars collection will be populated will all related cars.
using System.Collections.ObjectModel;
namespace WpfApplication
{
public class MainViewModel
{
private Category selectedCategory;
public MainViewModel() :
this(new MainModel())
{
}
public MainViewModel(IMainModel mainModel)
{
this.Categories = new ObservableCollection<Category>();
this.RelatedCars = new ObservableCollection<Car>();
foreach (Category c in mainModel.LoadCategories())
{
this.Categories.Add(c);
}
}
public ObservableCollection<Category> Categories
{
get;
set;
}
public ObservableCollection<Car> RelatedCars
{
get;
set;
}
public Category SelectedCategory
{
get
{
return this.selectedCategory;
}
set
{
if (this.SelectedCategory == value)
return;
this.selectedCategory = value;
this.LoadRelatedCars();
}
}
private void LoadRelatedCars()
{
this.RelatedCars.Clear();
if (this.SelectedCategory == null)
{
return;
}
foreach (Car car in this.SelectedCategory.Cars)
{
this.RelatedCars.Add(car);
}
}
}
}
Imports System.Collections.ObjectModel
Public Class MainViewModel
Private _selectedCategory As Category
Public Sub New()
Me.New(New MainModel())
End Sub
Public Sub New(ByVal mainModel As IMainModel)
Me.Categories = New ObservableCollection(Of Category)()
Me.RelatedCars = New ObservableCollection(Of Car)()
For Each c As Category In mainModel.LoadCategories()
Me.Categories.Add(c)
Next c
End Sub
Public Property Categories() As ObservableCollection(Of Category)
Public Property RelatedCars() As ObservableCollection(Of Car)
Public Property SelectedCategory() As Category
Get
Return Me._selectedCategory
End Get
Set(ByVal value As Category)
If Me.SelectedCategory Is value Then
Return
End If
Me._selectedCategory = value
Me.LoadRelatedCars()
End Set
End Property
Private Sub LoadRelatedCars()
Me.RelatedCars.Clear()
If Me.SelectedCategory Is Nothing Then
Return
End If
For Each _car As Car In Me.SelectedCategory.Cars
Me.RelatedCars.Add(_car)
Next _car
End Sub
End Class
Creating the View
The final piece is the View. The following is the XAML that defines the main window in WPF. The ItemsSource property of a RadComboBox control is bound to the ObservableCollection<Categories> data source that is defined in the MainViewModel. When a category is selected, the related cars are bound to a RadGridView control. Note that Telerik RadControls for WPF are used.
<Window xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
x:Class="WpfApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="350"
Width="525">
<Grid>
<Grid>
<telerik:RadComboBox DisplayMemberPath="CategoryName"
ItemsSource="{Binding Categories}"
SelectedItem="{Binding SelectedCategory}"
IsSynchronizedWithCurrentItem="true"
Height="23"
Margin="122,12,134,0"
VerticalAlignment="Top" />
<telerik:RadGridView ItemsSource="{Binding Path=RelatedCars}"
Margin="34,46,34,12" />
</Grid>
</Grid>
</Window>
Setting the DataContext of the MainWindow
The final step is to set the DataContext property in the constructor of the MainWindow.
using System.Windows;
namespace WpfApplication
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainViewModel();
}
}
}
Class MainWindow
Public Sub New()
InitializeComponent()
Me.DataContext = New MainViewModel()
End Sub
End Class
When you start the application, the end result should be similar to:
Next Steps
For a complete walkthrough, check out the Quickstart - WPF section.