Data Binding in Silverlight is very different from Asp.net. In addition to that, there are some namespaces that are omitted in Silverlight. In this article share the names of the namespaces that are omitted and the reason why they were omitted and I will do a very simple non-database binding to a grid and in the next article I will write about Silverlight i will show you how to bind data from SQl in a Datagrid or any other control that will be suitable for that article.
In this Article I am going to Explain on how data binding in Silverlight works and i will show you a simple Binding.
Using the code
We are going to user C# as our language and you will need Expression Blend follow my examples in this article. You can obtain a trial version here
In this article I will not be binding the controls with the data from Database. My example is a very simple example, like a hello world type of Example. In this article I am going to bind the grid with a simple string array that i will split. To follow my example you need Expression Blend. Open a New Project as depicted in the Following diagram below
And if it’s the First time you open Expression Blend you will not have a Project, but if you have used it before, the Reference to the previous project will be available. After you click an option for a new project you will be taken to this dialog box.
Choose the First option that will create a website for you. And give it a name as I did, mine is “MyDataBinding”. The Next Step is to go to the toolbar, if you can notice; here the toolbar is a little bit different from the normal visual studio. On the left hand side of your screen you will see a button with a double arrow as depicted below
Click on it and you will see a list of Controls displayed a little bit different from what visual studio does as depicted below
In ASP.NET we have a gridview, but here we call it a Datagrid. Now Drag the Datagrid and a Button back to your work space and arrange them until your page looks like this
Now the Button my have a click event, In Silverlight we call it “Click” not “onClick” as we do in asp.net. Your xaml should look like this
<Grid x:Name="LayoutRoot" Background="White">
<data:DataGrid x:Name="Datagrid1" Margin="41,83,83,171"/>
<Button Height="24" x:Name="btnsearch" HorizontalAlignment="Left" Margin="41,42,0,0" VerticalAlignment="Top" Width="81" Content="Search" Click="btnsearch_Click"/>
As you can see the button has a Click event handler that gets automatically generated. Let’s see how you can do that. Click on your Button and you will see the properties of the button, if you don’t go to the window menu and select the property window and it will appear as depicted below
On the far right of your screen you will see the lightning sign as pointed out in the yellow arrow, click it and you will be take to this screen
Double click inside the black textbox like space near the click event option and you will be taken to the code behind of the xaml as depicted below and write the Following code
The Diagram itself explains the code, when you run this project nothing will happen, but when you click the Button the Following will be the returned in the grid
In my Next article I will demonstrate data binding with Data that will be coming from SQL.
Thank you for visiting DotNetFunda.Com