This example demonstates how to create a nicely formatted, editable DataGrid in Silverlight entirely in XAML.

The grid will bind to a list of books. The schema of data source contains the following DataFields / Properties: BookTitle (string), ISBN (string), Author (string), IsInStock(bool).

We'll make the Title editable using a TextBox in-place editor. We'll use a CheckBox DataTemplate for the IsInStock flag and respectively use a CheckBox CellEditTemplate for in-place edit.

XAML:

<UserControl x:Class="SilverlightApplication1.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="292" d:DesignWidth="820"
    xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=DataGrid">
   
    <UserControl.Resources>
        <!-- DataTemplate for TextBox in-place editor -->
        <DataTemplate x:Name="cellEditTextBoxTemplate">
            <TextBox Text="{Binding BookTitle, Mode=TwoWay}"/>
        </DataTemplate>
       
        <!-- DataTemplate for CheckBox in-place editor -->
        <DataTemplate x:Name="cellEditCheckBoxTemplate">
            <Grid>
                <CheckBox IsChecked="{Binding IsInStock, Mode=TwoWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </DataTemplate>
       
        <!-- DataTemplate for CheckBox column -->
        <DataTemplate x:Name="cellCheckBoxTemplate">
            <Grid>
                <CheckBox IsChecked="{Binding IsInStock}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>
   
    <Grid x:Name="LayoutRoot" Background="White">
        <viblend:DataGrid Name="dataGrid1" Height="250" Width="400">
            <viblend:DataGrid.BoundFields>
                <viblend:BoundField Text="Book Title" DataField="BookTitle" Width="100" CellEditTemplate="{StaticResource cellEditTextBoxTemplate}" CellEditorActivationFlags="MOUSE_CLICK_SELECTED_CELL" CellEditorDeActivationFlags="MOUSE_CLICK" />
                <viblend:BoundField Text="ISBN" DataField="ISBN" Width="80"/>
                <viblend:BoundField Text="Author" DataField="Author" Width="80" SortMode="Automatic" />
                <viblend:BoundField Text="In Stock" DataField="IsInStock" Width="40" SortMode="Automatic" CellDataTemplate="{StaticResource cellCheckBoxTemplate}" CellEditTemplate="{StaticResource cellEditCheckBoxTemplate}" CellEditorActivationFlags="MOUSE_MOVE" CellEditorDeActivationFlags="MOUSE_MOVE"/>
            </viblend:DataGrid.BoundFields>
        </viblend:DataGrid>
    </Grid>
</UserControl>

 C#:

 You can use the following code to quickly generate sample data and test the example:

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            PrepareGridData();

            dataGrid1.ItemsSource = listBooks;
        }

        public class Book
        {
            public Book(string title, string isbn, string author, bool inStock)
            {
                this.BookTitle = title;
                this.ISBN = isbn;
                this.Author = author;
                this.IsInStock = inStock;
            }

            public string BookTitle {get;set;}
            public string ISBN {get;set;}
            public string Author { get; set; }
            public bool IsInStock { get; set; }
        }

        public List<Book> listBooks = new List<Book>();

        private void PrepareGridData()
        {
            Random rand = new Random();
            for (int i = 0; i < 1000; i++)
            {
                int val = rand.Next();
                listBooks.Add(new Book("Title " + i, "ISBN " + i, "Author " + i, val % 2 == 0));
            }
        }
    }
}

 And here is the result:

We are happy to announce the immediate availability of VIBlend Silverlight Controls ver. 1.5

The majority of the changes in this release are concentrated on making the Silverlight Grid more robust and easy to use.

Here is the list of changes:

• Bug Fixes
  
  
  • Fixed CellMouseUp event raising issue
  • Fixed RowsHierarchy SummaryItems visualization issue in compact style rendering
  • Fixed intermittent headers blink issue on cells mouse click
  
  
• New features, improvements and new APIs  
  
  
  • Added new in-place cell editor activation flag: Click on Selected Cell
  • Added Hierarchy.GetChildItemsRecursive method
  • Added HierarchyItem.GetChildItemsRecursive method
  • Added HierarchyItem.Cells property
  • Added HierarchyItem.NonEmptyCells property
  • Added CellsArea.Clear method
  • Added CellsArea.NonEmptyCells property
  • Added CellsArea.Cells property
  • Added ability to format and style HierarchyItems and grid cells entirely in XAML in data bound mode

New in version 1.4 of VIBlend Silverlight Controls is the ability to create a Pivot Table entirely in XAML.

As usual you have to specify which columns (data fields) from the data source will represent the pivot table's rows, columns and values fields.

Below is the full XAML required to declare a pivot table:

<UserControl x:Class="SilverlightApplication1.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="600" d:DesignWidth="800"
    xmlns:viblend="clr-namespace:VIBlend.Silverlight.Controls;assembly=DataGrid">

    <Grid x:Name="LayoutRoot" Background="White">
            <viblend:DataGrid AutoGenerateColumns="True" PivotValuesOnRows="False" Name="dataGrid1"  Height="200" Width="500">
                <viblend:DataGrid.BoundPivotRows>
                    <viblend:BoundField DataField="Country" Text="Country"/>
                    <viblend:BoundField DataField="Region" Text="Region"/>
                    <viblend:BoundField DataField="City" Text="City"/>
                </viblend:DataGrid.BoundPivotRows>
                <viblend:DataGrid.BoundPivotColumns>
                   <viblend:BoundField DataField="ShipperCompany" Text="Shipper Company"/>
                </viblend:DataGrid.BoundPivotColumns>
                <viblend:DataGrid.BoundPivotValues>
                    <viblend:BoundValueField DataField="ExtendedPrice" Text="Count of Sales" Function="Count"/>
                    <viblend:BoundValueField DataField="ExtendedPrice" Text="Amount of Sales" Function="Sum"/>
                    <viblend:BoundValueField DataField="ExtendedPrice" Text="Avg Sale Amount" Function="Average"/>
                </viblend:DataGrid.BoundPivotValues>
            </viblend:DataGrid>
    </Grid>
</UserControl>

After that simply bind to the data source by setting the ItemsSource property of the data grid control:

dataGrid1.ItemsSource = myData;

The result is a great looking pivot table with interactive drill down support.

VIBlend DataGrid for Silverlight uses a built-in OLAP engine to construct the pivot table. You can bind the DataGrid to any data source and easily build in-house Business Intelligence and reporting tools within minutes.