eclipse4SL : “DataGrid” Tutorial


Duration


20 minutes


Description


This tutorial demonstrates how to populate a DataGrid with dynamic data. When you press the Load Button, the DataGrid will be filled in, and eventually filtered if a filter has been specified. A pdf version of this tutorial is attached at the end of this post and accessible here.


clip_image002 clip_image004


Prerequisites


After installing eclipse4SL, you should have activated the Silverlight perspective by selecting one of them from the menu Window > Open Perspective > Other….  (for a detailed procedure, read the Hello World Tutorial).



Creating the Silverlight User Interface


We’ll start by selecting the File->New menu item within Eclipse and use the eclipse4SL Silverlight Project menu to create a “Silverlight Web Project” , named DataGridTutorial.


clip_image008


Open the Page.xaml control, remove the Grid component.


Drag and drop the StackPanel container from the Palette, and add 4 components inside by drag and drop too :



  • a TextBock which Text value is “Filter :”

  • a TextBox which Text value is empty

  • a Button which Content value is “Load”

  • and our DataGrid which Width and Height are 380 and 230 respectively


<UserControl x:Class=“DataGridTutorial.Page”


    xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation”


    xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml”


    Width=“400” Height=“300”


    xmlns:Controls=“clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data”>



       <StackPanel>


             <TextBlock Text=“Filter :”></TextBlock>


             <TextBox Text=“” />


             <Button Content=“Load”></Button>


             <Controls:DataGrid Width=“380” Height=“230”></Controls:DataGrid>


       </StackPanel>



</UserControl>

 


Notice that as you have dropped a DataGrid on to the XAML code, a reference to the assembly containing the component is automatically added to the Silverlight project (System.Windows.Controls.Data). The following XAML rendering is displayed :


clip_image010


To obtain the arrangement and look & feel proposed at the beginning of the document, use a Canvas, and specific positions for the different components. Replace the StackPanel and its contents by the following XAML :


<UserControl x:Class=“DataGridTutorial.Page”


       xmlns:my=“clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data”


       xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation”


       xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml” Width=“400”


       Height=“300”>


       <Canvas x:Name=“LayoutRoot” Background=“Azure”>


             <TextBlock Text=“Filter :”


                    Canvas.Left=“10” Canvas.Top=“15” Width=“100”></TextBlock>


             <TextBox Text=“”


                 Canvas.Left=“60” Canvas.Top=“10” Width=“100”></TextBox>


             <Button Content=“Load”


                    Canvas.Left=“180” Canvas.Top=“11” Width=“50”></Button>


             <my:DataGrid


                    Canvas.Left=“10” Canvas.Top=“50” Width=“380” Height=“230”


                    RowBackground=“Aquamarine”



               AlternatingRowBackground=“White”></my:DataGrid>


       </Canvas>


</UserControl>

 


clip_image012


Let’s run the project, by creating a Run Configuration for our project as described in the HelloWorld Tutorial.


clip_image014





Adding behavior to the User Interface


Now, let’s assign names to the Filter and our DataGrid so that we can access them from our C# code behind. Add the property x:Name=”country” to the TextBox and x:Name=“grid” to our DataGrid. Moreover, we’ll add the AutoGenerateColumns property to the DataGrid so that it automatically adapts to the data source it is connected to.


<UserControl x:Class=“DataGridTutorial.Page”


       xmlns:my=“clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data”


       xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation”


       xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml” Width=“400”


       Height=“300”>


       <Canvas x:Name=“LayoutRoot” Background=“Azure”>


             <TextBlock Text=“Filter :”


                    Canvas.Left=“10” Canvas.Top=“15” Width=“100”></TextBlock>


             <TextBox Text=“” x:Name=“country”


                 Canvas.Left=“60” Canvas.Top=“10” Width=“100”></TextBox>


             <Button Content=“Load”


                    Canvas.Left=“180” Canvas.Top=“11” Width=“50”></Button>


             <my:DataGrid x:Name=“grid” AutoGenerateColumns=“True”


                    Canvas.Left=“10” Canvas.Top=“50” Width=“380” Height=“230”


                    RowBackground=“Aquamarine”


                    AlternatingRowBackground=“White”></my:DataGrid>


       </Canvas>


</UserControl>

 


Finally, we’ll add an event handler to the Click event on the button. Position your cursor right after the Content of the Button, and press CTRL – SpaceBar for Code Content Assist.


clip_image016


Select the Click event. After a second, a wizard is displayed that let you specify the name of the C# code behind associated with the button Click action.


clip_image018


Name it Button_Click and confirm. You are automatically directed to the code behind file Page.xaml.cs.


Let’s affect a static list to our DataGrid by setting its ItemsSource.


Copy and paste the following code :


using …;


namespace DataGridTutorial

{


    public partial class Page : UserControl


    {


        /**


         * Event handler of <code>Button.Click</code>.


         */


        private void Button_Click(object sender, RoutedEventArgs arg1) {


             grid.ItemsSource = new string[] { “Eclipse Tools for Silverlight”,


                                               “is an open source project”,


                                               “delivered by SOYATEC”,


                                               “and funded by Microsoft” };        


}



        public Page()


        {


            InitializeComponent();


        }


    }


}

 


Run the application again, and press the Load Button.


clip_image020


Loading and filtering multi-dimensional data


The following code defines a Customer class composed of a Name, Company and a Country. After initializing an Array of Customers, we will filter it with the Filter if it has been specified.


Notice that we use the Linq technology to filter the contents (Silverlight 2 embeds the Linq to Object and Linq to XML frameworks). Replace the contents of Page.xaml.cs by the following code :


    public partial class Page : UserControl


    {


         // Internal Class


         public class Customer


         {


                     public string ContactName { get; set; }


                     public string Company { get; set; }


                     public string Country { get; set; }

                     public Customer()  { }


         } 

        // Initialize list of customers to display in the Grid


        Customer[] customers = new Customer[] {


new Customer { ContactName = “Stève Sfartz”, Company = “Microsoft”, Country = “France” },


new Customer { ContactName = “Vijay Rajagopalan”, Company = “Microsoft”, Country = “United States” },


new Customer { ContactName = “Yves Yang”, Company = “Soyatec”, Country = “France” }


        };

        public Page()


        {


            InitializeComponent();


        }


        private void Button_Click(object sender, RoutedEventArgs e)


        {


            // Retreive Filter set in the Silverlight UI


            string filter = country.Text.Trim();



   // Display filtered results in Grid if the filter is not empty


            if (String.IsNullOrEmpty(filter)) {


                 grid.ItemsSource = customers;


   }


   else {


                   // Filter


                   var selection = from c in customers where c.Country == filter select c;


                   // Display in Grid


                   grid.ItemsSource = selection.ToArray<Customer>();


   }


}


    }

 



Run the project and click the Load Button.


clip_image022


Enter France as a Filter and Click on the Load Button again


clip_image024




Author


Steve SFARTZ works for Microsoft France as an Architect Evangelist, with expertise in Enterprise Architecture, Interoperability, SOA & Cloud Computing.


You’ll find further guidance about Silverlight & Java interoperability on A Cup of Silverlight.
If you can read french, you may check one of my other blogs : Think Big mais pas trop…, SOA & Interop @Microsoft France, Cloud Computing @ Microsoft France.

E4SL05 – DataGrid Tutorial – 200810141157.pdf

Comments (0)