Home Products Downloads Purchase Support Forum About Blog

Editable Data Grid entirely in XAML

by viblend 16. January 2010 18:08

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.


<UserControl x:Class="SilverlightApplication1.MainPage"
    d:DesignHeight="292" d:DesignWidth="820"
        <!-- DataTemplate for TextBox in-place editor -->
        <DataTemplate x:Name="cellEditTextBoxTemplate">
            <TextBox Text="{Binding BookTitle, Mode=TwoWay}"/>
        <!-- DataTemplate for CheckBox in-place editor -->
        <DataTemplate x:Name="cellEditCheckBoxTemplate">
                <CheckBox IsChecked="{Binding IsInStock, Mode=TwoWay}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <!-- DataTemplate for CheckBox column -->
        <DataTemplate x:Name="cellCheckBoxTemplate">
                <CheckBox IsChecked="{Binding IsInStock}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    <Grid x:Name="LayoutRoot" Background="White">
        <viblend:DataGrid Name="dataGrid1" Height="250" Width="400">
                <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"/>


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

namespace SilverlightApplication1
    public partial class MainPage : UserControl
        public MainPage()


            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:

Editable Silverlight Grid



4/24/2010 11:38:22 AM

I was rather happy that I located this blog. I wished to thank you for this great info! I definitely loved every bit of it and I have saved your blog site to check out the new material you post in the future.


Comments are closed

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