Home Products Downloads Purchase Support Forum About Blog

WPF DataGrid - data binding to SQL Server Database

by viblend 21. December 2010 19:23

One of the most common data binding scenarios is to bind a DataGrid to a SQL Server Database and to load records from a specified data table. In this post, we will explain you how to set up basic data binding in VIBlend WPF DataGrid to the Customer table of the AdventureWorksLT Database.

So the first step would be to create a new WPF Application Project and then create a new instance of the DataGrid via drag and drop from the toolbox or create it programmatically. The DataGrid fields that will represent data source fields are created in XAML markup. Below you will see that we have very simple XAML for our WPF application which adds a DataGrid to the window

       <viblendDataGrid:DataGrid ItemsSource="{Binding Customer}" Name="dataGrid1" Margin="10">
                <viblendDataGrid:BoundField Text="First Name" DataField="FirstName" Width="70"/>
                <viblendDataGrid:BoundField Text="Last Name" DataField="LastName" Width="70"/>
                <viblendDataGrid:BoundField Text="Company Name" DataField="CompanyName" Width="150"/>
                <viblendDataGrid:BoundField Text="Phone" DataField="Phone" Width="100"/>
                <viblendDataGrid:BoundField Text="Email Address" DataField="EmailAddress" Width="100"/>

 Next, create a new AdventureWorksLTDataSet. In order to create it, do the following: Select Data->Add New DataSource->DataBase->DataSet. Add a connection to the AdventureWorksLT Database and Click the 'Next' button. Then expand the 'Tables' tree node, select Customer and click the 'Finish' button.

Note: The AdventureWorksLT Database is installed with the installation of the SQL Server. However, you can also download and install it from 
Once the Data Source is configured, create new instances of the AdventureWorksLTDataSet data set. and CustomerTableAdapter , then fill the Customer table with data. Finally, bind the VIBlend DataGrid for WPF to the Customer table.


   public partial class MainWindow : Window
        AdventureWorksLTDataSet dataSet = new AdventureWorksLTDataSet();
        AdventureWorksLTDataSetTableAdapters.CustomerTableAdapter adapter = new AdventureWorksLTDataSetTableAdapters.CustomerTableAdapter();
        public MainWindow()
            this.dataGrid1.DataContext = this;

        public WpfApplication2.AdventureWorksLTDataSet.CustomerDataTable Customer
                return this.dataSet.Customer;


   Partial Public Class MainWindow
       Inherits Window
        Private dataSet As New AdventureWorksLTDataSet()
        Private adapter As New AdventureWorksLTDataSetTableAdapters.CustomerTableAdapter()

        Public Sub New()
            Me.dataGrid1.DataContext = Me
        End Sub

        Public ReadOnly Property Customer() As WpfApplication2.AdventureWorksLTDataSet.CustomerDataTable
                Return Me.dataSet.Customer
            End Get
        End Property
   End Class


How to bind a WPF Pivot Grid to MS Access Database

by viblend 11. December 2010 19:58

In this post we will demonstrate you how to bind the VIBlend WPF DataGrid to "Invoices" view in the Nwind.mdb database, which is shipped with the installation. The control will be used to analyze sales per country and shippers companies.

At first you need to create a new instance of the NwindDataSet and InvoicesTableAdapter. Then you need to fill the table with data and set the DataContext property.


NwindDataSet dataSet = new NwindDataSet();
InvoicesTableAdapter adapter = new InvoicesTableAdapter();
this.DataContext = dataSet.Invoices;


Dim dataSet As New NwindDataSet()
Dim adapter As New InvoicesTableAdapter()
Me.DataContext = dataSet.Invoices

The DataGrid fields that will represent data source fields are created in XAML markup. In order to format the currency data, you should specify the StringFormat property in the binding expression.

 <Window x:Class="DataBinding.MainWindow"
        Title="MainWindow" Height="350" Width="525" xmlns:viblendDataGrid="clr-namespace:VIBlend.WPF.Controls;assembly=VIBlend.WPF.DataGrid">
            <DataTemplate x:Key="CellTemplate">
                <TextBlock HorizontalAlignment="Right" Text="{Binding StringFormat=C2}"/>
        <viblendDataGrid:DataGrid ItemsSource="{Binding}" Name="dataGrid1" Margin="10">
                <viblendDataGrid:BoundField Text="Shippers Company" DataField="Shippers_CompanyName"/>
                <viblendDataGrid:BoundField Text="Country" DataField="Country"/>
                <viblendDataGrid:BoundField Text="ExtendedPrice" DataField="ExtendedPrice"/>
                <viblendDataGrid:BoundField Width="100" Text="Country" DataField="Country"/>
                <viblendDataGrid:BoundField Text="Shippers Company" DataField="Shippers_CompanyName"/>
                <viblendDataGrid:BoundValueField CellDataTemplate="{StaticResource CellTemplate}" Text="Sum" DataField="ExtendedPrice" Function="Sum"/>
                <viblendDataGrid:BoundValueField CellDataTemplate="{StaticResource CellTemplate}" Text="Average Price" DataField="ExtendedPrice" Function="Average"/>

Here is an image of the result:

VIBlend Controls for WPF v3.0 - Released

by viblend 5. December 2010 19:14

We are happy to announce the immediate availability of VIBlend Controls for WPF v3.0 - UI Controls for high performance, WPF user interfaces.  VIBlend Controls for WPF includes a shared API with VIBlend Controls for Silverlight and comes with fast data binding that can easily handle hundreds of thousands records.

What’s new in VIBlend Controls for WPF v3.0?

New Controls:

- TabControl, GroupBox, ColorPicker, DropDownButton, SplitButton, RadioButton, CheckBox, Button, ToggleButton, RepeatButton, ScrollViewer, LinkLabel.


- All themes get a major facelift for greater consistency and appeal across skin elements such as headers, rows, buttons, scrollbars, selected, default, highlighted, disabled states, etc.

- DataGrid - performance optimizations, support for data binding to a DataTable, cells and headers styling, added scrolling animations, localization support, clipboard operations - Cut(CTRL + X), Copy(CTRL + C) and Paste(CTRL + V), better cells highlight functionality with ability to highlight all cells in a row or column.

New Free Themes:

- Silver, Office2007 Blue, Office2007  Black and Office2007  Silver

  If you want to check out the latest release, it is now available for download.

Scrolling Animation in VIBlend Silverlight DataGrid

by viblend 28. November 2010 10:20

The latest version of VIBlend Controls for Silverlight features significant improvements to the DataGrid’s scrolling capabilities.  DataGrid now offers fast animated smooth scrolling with inertia for impressive UI performance.  In this blog post, we will introduce you how to use the properties that you need to know, in order to set up the DataGrid’s scrolling behavior. The ScrollAnimationMode property allows you to enable or disable the animated scrolling. The DataGrid’s default animation mode is scrolling with intertia,  In order to disable the scrolling, you need to set the ScrollAnimationMode property to ScrollAnimationMode.No_Animation.


dataGrid.ScrollAnimationMode = DataGrid.ScrollAnimationModes.NO_ANIMATION;


dataGrid.ScrollAnimationMode = DataGrid.ScrollAnimationModes.NO_ANIMATION

Use the following code snippet to enable the smooth scrolling mode:


dataGrid.ScrollAnimationMode = DataGrid.ScrollAnimationModes.SMOOTH_SCROLL;


dataGrid.ScrollAnimationMode = DataGrid.ScrollAnimationModes.SMOOTH_SCROLL

VIBlend DataGrid control also supports a beautiful opacity animation while you scroll its content. You can enable this animation by using the ScrollOpacityAnimationEnabled property. The code snippet below enables the scrolling opacity animation:


dataGrid.ScrollOpacityAnimationEnabled = true;


dataGrid.ScrollOpacityAnimationEnabled = True

The ScrollAnimationTime property allows you to change the duration of the scrolling animation. Here is demonstrated how to the set the duration to 1 second:


dataGrid.ScrollAnimationTime = new TimeSpan(0, 0, 1);


dataGrid.ScrollAnimationTime = New TimeSpan(0, 0, 1)

By default, when the user drags the thumb on a scrollbar, the content view continuously updates. In deferred scrolling, the content is updated only when the user releases the thumb. You can enable the deferred scrolling mode by using the DeferredScrollingEnabled property.

For example:


dataGrid.DeferredScrollingEnabled = true;


dataGrid.DeferredScrollingEnabled = True

Code reuse in Silverlight, WPF and WinForms DataGrid

by viblend 6. November 2010 02:43

One of our main goals while developing our DataGrid controls for Silverlight, WPF and WinForms was to keep our programming model as similar as possible. The benefit of having a similar programming model is that it enables easy code reuse between multiple platforms and shortens your learning curve.

Going through an Example

Let's consider the sample application shown in Figure 1. The application presents a form with a WinForms DataGrid which is filled with data in unbound mode.

Figure 1

The sample data is shown below:


        string[] firstNames = new string[]
            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylène"
        string[] lastNames = new string[]
            "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Björn", "Nodier"
        string[] productNames = new string[]
            "Black Tea", "Green Tea", "Doubleshot Espresso", "Caffè Espresso", "Caffè Latte", "White Chocolate Mocha", "Caramel Latte", "Caffè Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"


        Dim firstNames() As String = { "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylène" }
        Dim lastNames() As String = { "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Björn", "Nodier" }
        Dim productNames() As String = { "Black Tea", "Green Tea", "Doubleshot Espresso", "Caffè Espresso", "Caffè Latte", "White Chocolate Mocha", "Caramel Latte", "Caffè Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist" }

Here is the code that loads the data into the DataGrid control:


        private void LoadData(vDataGridView dataGrid)
           HierarchyItem firstName = dataGrid.ColumnsHierarchy.Items.Add("First Name");
           HierarchyItem lastName = dataGrid.ColumnsHierarchy.Items.Add("Last Name");
           HierarchyItem productName = dataGrid.ColumnsHierarchy.Items.Add("Product");
           HierarchyItem date = dataGrid.ColumnsHierarchy.Items.Add("Date");
           Random random = new Random();

           for (int i = 0; i < 100; i++)
               HierarchyItem row = dataGrid.RowsHierarchy.Items.Add(i.ToString());
               dataGrid.CellsArea.SetCellValue(row, firstName, firstNames[random.Next(0, firstNames.Length - 1)]);
               dataGrid.CellsArea.SetCellValue(row, lastName, lastNames[random.Next(0, lastNames.Length - 1)]);
               dataGrid.CellsArea.SetCellValue(row, productName, productNames[random.Next(0, productNames.Length - 1)]);
               dataGrid.CellsArea.SetCellValue(row, date, DateTime.Now.AddDays(i));



        Private Sub LoadData(ByVal dataGrid As vDataGridView)
           Dim firstName As HierarchyItem = dataGrid.ColumnsHierarchy.Items.Add("First Name")
           Dim lastName As HierarchyItem = dataGrid.ColumnsHierarchy.Items.Add("Last Name")
           Dim productName As HierarchyItem = dataGrid.ColumnsHierarchy.Items.Add("Product")
           Dim [date] As HierarchyItem = dataGrid.ColumnsHierarchy.Items.Add("Date")
           Dim random As New Random()

           For i As Integer = 0 To 99
               Dim row As HierarchyItem = dataGrid.RowsHierarchy.Items.Add(i.ToString())
               dataGrid.CellsArea.SetCellValue(row, firstName, firstNames(random.Next(0, firstNames.Length - 1)))
               dataGrid.CellsArea.SetCellValue(row, lastName, lastNames(random.Next(0, lastNames.Length - 1)))
               dataGrid.CellsArea.SetCellValue(row, productName, productNames(random.Next(0, productNames.Length - 1)))
               dataGrid.CellsArea.SetCellValue(row, [date], DateTime.Now.AddDays(i))
           Next i

In the sample code, we have successfully created Rows and Columns in unbound mode and filled the WinForms DataGrid control with data. You will be able to use the same approach for both Silverlight and WPF applications.

A typical Silverlight application is built from a tree of objects where UserControl is the root of the tree. In turn, the UserControl element contains a number of child elements laid out in a variety of ways. The following markup creates a new instance of the VIBlend Silverlight DataGrid:

<UserControl x:Class="SilverlightApplication38.MainPage"
    d:DesignHeight="300" d:DesignWidth="400" xmlns:viblendDataGrid="clr-namespace:VIBlend.Silverlight.Controls;assembly=VIBlend.Silverlight.DataGrid">
    <Grid x:Name="LayoutRoot" Background="White">
        <viblendDataGrid:DataGrid Height="250" Name="dataGrid1" Width="350" />

It is now time to reuse the code from our Windows Forms application and here is the result:

Figure 2

In order to port the code from the WinForms application to Silverlight and WPF, we need to change only the parameter type of the LoadData method from vDataGridView to DataGrid.

Here is the markup of our WPF application.

<Window x:Class="WpfApplication1.MainWindow"
        Title="MainWindow" Height="350" Width="525" xmlns:viblend="clr-namespace:VIBlend.WPF.Controls;assembly=VIBlend.WPF.DataGrid">
        <viblend:DataGrid Height="250" Name="dataGrid1" Width="450" />

In figure 3 is shown the sample application with our WPF DataGrid.

Figure 3

In summary, with a little effort you can easily create desktop applications with the VIBlend WinForms DataGrid or WPF DataGrid and convert them to Web applications running the Silverlight DataGrid.

VIBlend Silverlight Controls v3.5 - Released

by viblend 1. November 2010 03:14

We are proud to announce the availability of VIBlend Controls for Silverlight ver. 3.5.0 - the next generation of user interface controls for Silverlight from VIBlend. Our main efforts for this release were focused on improving the DataGrid’s rendering and performance.

Highlights of the new features and improvements in the new version are:

  • DataGrid performance optimizations
  • New themes for all VIBlend Controls for Silverlight
  • New controls - TabControl, Toolbar and BannerRotator
  • Design Time improvements 

To help you create themes and skins for your applications, we added a new ‘CustomTheme’ project to our installation package. This project includes C# and VB .NET samples and xaml style definitions for our controls.

  See our Silverlight Controls Live Demo and Download a free trial today.

VIBlend WinForms Controls v5.0 - Released

by viblend 13. October 2010 21:39
We are pleased to announce the availability of the VIBlend Controls for WinForms ver. 5.0.0. the next generation of user interface controls for Windows Forms from VIBlend. The new release is expanding our commitment to business intelligence and data visualization by adding a Pivot Design panel. The Pivot Design panel integrates with VIBlend DataGrid for Windows Forms and provides an intuitive and easy to use drag and drop interface for defining pivot table views. You can choose the pivot rows, pivot colums, data fields and data aggregation functions.

Key benefits of the new release are:

- 2 new themes for all VIBlend WinForms Controls
- Pivot Design panel
- DataGrid Localization Provider
- Improved Ribbon Bar performance and rendering
- Quick Start projects now have a full support for VS 2010 which will decrease development time

If you want to check out the latest release, it is now available for download.

What’s coming in VIBlend WinForms Controls 5.0?

by viblend 6. October 2010 07:38

One of the key features that you can expect in the new release is the Pivot Design Panel.  The Pivot Design panel integrates with VIBlend DataGrid for Windows Forms. It provides an intuitive and easy to use drag and drop interface for defining pivot table views. You can choose the pivot rows, pivot colums, data fields and data aggregation functions.  This solution is ideal for building a wide range of in-house OLAP and BI applications.

Another improvement will be the DataGrid’s Localization Provider that enables you to localize the ContextMenu and FilteringWindow strings.

For more information regarding the new release, feel free to contact us at

How to bind the VIBlend DataGrid for Silverlight and WPF to Indexed properties?

by viblend 3. September 2010 19:48

In order to bind the VIBlend DataGrid to indexed properties, you need to do the following:

1. Create DataTemplates that are bound to indexed properties.

        <DataTemplate x:Key="LastNameCellTemplate">
                <TextBlock Text="{Binding [LastName], Mode=OneWay}"/>

        <DataTemplate x:Key="FirstNameCellTemplate">
                <TextBlock Text="{Binding [FirstName], Mode=OneWay}"/>

2. Create a new DataGrid instance. Set the CellDataTemplate property of the DataGrid’s BoundFields to point to the DataTemplates.

        <viblend:DataGrid x:Name="dataGrid" Width="400" Height="280" AutoGenerateColumns="True">
                <viblend:BoundField Text="FirstName" Width="150" CellDataTemplate="{StaticResource FirstNameCellTemplate}"/>
                <viblend:BoundField Text="LastName" Width="150" CellDataTemplate="{StaticResource LastNameCellTemplate}"/>

3.  Create a new class that will represent a single record of the DataGrid.


public class Person : INotifyPropertyChanged
    public Person()

    private Dictionary<string, object> data = new Dictionary<string, object>();

    public object this[string key]
            if (!data.ContainsKey(key))
                data[key] = null;
            return data[key];
            data[key] = value;
            if (this.PropertyChanged != null)
                PropertyChanged(this, new PropertyChangedEventArgs(""));

    public IEnumerable<string> Keys
            return data.Keys;

    public event PropertyChangedEventHandler PropertyChanged;


Public Class Person
    Implements INotifyPropertyChanged
    Public Sub New()
    End Sub

    Private data As Dictionary(Of String, Object) = New Dictionary(Of String, Object)()

    Default Public Property Item(ByVal key As String) As Object
            If (Not data.ContainsKey(key)) Then
                data(key) = Nothing
            End If
            Return data(key)
        End Get
        Set(ByVal value As Object)
            data(key) = value
            RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(""))
        End Set
    End Property

    Public ReadOnly Property Keys() As IEnumerable(Of String)
            Return data.Keys
        End Get
    End Property

    Public Event PropertyChanged As PropertyChangedEventHandler
End Class

4.  Create a new generic List of Person objects and set the ItemsSource property of the DataGrid, in order to bind it to the list.


       List<Person> listOfPersons = new List<Person>();
       for (int i = 0; i < 10; i++)
           Person person = new Person();
           person["FirstName"] = "FirstName" + i;
           person["LastName"] = "LastName" + i;
       this.dataGrid.ItemsSource = listOfPersons;


      Dim listOfPersons As List(Of Person) = New List(Of Person)()
      For i As Integer = 0 To 9
         Dim person As New Person()
         person("FirstName") = "FirstName" & i
         person("LastName") = "LastName" & i
      Next i
      Me.dataGrid.ItemsSource = listOfPersons

Pivot Grid - Traditional vs Compact style layout

by viblend 18. April 2010 05:36

VIBlend DataGridView for WinForms offers multiple unique features that cannot be found in other Windows Forms data grid controls. These include multi-level hierarchies on rows and columns, rows grouping, pivot tables, and built-in OLAP capabilities. One of the main drawbacks of the traditional OLAP style rows layout is that it takes a lot of screen space. 


This could be improved by using the compact style layout. In this mode the rows of the pivot table are rendered in a tree-like structure.


Switching from default to compact style rendering is very easy. It requires setting the value of RowsHierarchy.CompactStyleRendering property to true:

grid.RowsHierarchy.CompactStyleRenderingEnabled = true;

VB .Net
grid.RowsHierarchy.CompactStyleRenderingEnabled = True

You can switch between traditional and compact style rendering at runtime. The feature is also availalbe in VIBlend DataGrid for Silverlight.

About the author

Some text that describes me

Tag cloud

Recent comments

Comment RSS
Copyright © 2011 VIBlend  
Terms of Use | Privacy Policy
WinForms Controls Purchase Online About Us
DataGrid Navigation Pane Technical Support Blog
ScrollBar TreeView
ListBox ProgressBar Downloads Register
ComboBox Buttons
TabControl Editors Documentation Client Login

VIBlend Blog is powered by BlogEngine.NET