VIBlend
Home Products Downloads Purchase Support Forum About Blog

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:

C#

        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"
        };

VB .NET

        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:

C#

        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));
           }

          dataGrid.RowsHierarchy.AutoResize(AutoResizeMode.FIT_ITEM_CONTENT);
          dataGrid.ColumnsHierarchy.AutoResize(AutoResizeMode.FIT_ALL);
       }

VB .NET

        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"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    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" />
    </Grid>
</UserControl>  

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"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" xmlns:viblend="clr-namespace:VIBlend.WPF.Controls;assembly=VIBlend.WPF.DataGrid">
    <Grid>
        <viblend:DataGrid Height="250" Name="dataGrid1" Width="450" />
    </Grid>
</Window>

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.

Comments are closed

About the author

Some text that describes me

Tag cloud

Recent comments

Comment RSS
Copyright © 2011 VIBlend  
ALL RIGHTS RESERVED  
 
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