Data Form and Data Grid In Silverlight 3 Application


Introduction

In this article we will see how Data Form is helpful in editing a set of data.

Crating Silverlight Project

Fire up Visual Studio 2008 and create a Silverlight Application. Name it as DataFormInSL3.

 

Open the solution in Blend 3 and design the application. Here is the idea what we need: A Datagrid which will display data and when the user clicks on any row the DataForm will be displayed for editing.

This is how I designed the Application:

Now we will add a Child Window which will carry our Data Form.

The Child Window with a Data Form will be as follows: (I have changed the Background Brush of the DataForm)

Now the design part is done, go ahead and open the solution in Visual Studio 2008.

Create a class which will contain several Properties. Name the class as UserData.cs.

The following code is how the class is structures.

 

public
class
UserData: INotifyPropertyChanged

{

#region INotifyPropertyChanged Members


public
event
PropertyChangedEventHandler PropertyChanged;

 


private
void RaisePropertyChanged(string propertyName)

{


if (this.PropertyChanged != null)

{


this.PropertyChanged(this, new
PropertyChangedEventArgs(propertyName));

}

}

#endregion

 

#region UserID


private
string _UserID;


public
string UserID

{


get

{


return _UserID;

}


set

{

_UserID = value;

RaisePropertyChanged(“UserID”);

}

}

#endregion

 

#region FirstName


private
string _FirstName;


public
string FirstName

{


get

{


return _FirstName;

}


set

{

_FirstName = value;

RaisePropertyChanged(“FirstName”);

}

}

#endregion

 

#region LastName


private
string _LastName;


public
string LastName

{


get

{


return _LastName;

}


set

{

_LastName = value;

RaisePropertyChanged(“LastName”);

}

}

#endregion

 

#region EmailID


private
string _EmailID;


public
string EmailID

{


get

{


return _EmailID;

}


set

{

_EmailID = value;

RaisePropertyChanged(“EmailID”);

}

}

#endregion

 

#region ContactNo


private
string _ContactNo;


public
string ContactNo

{


get

{


return _ContactNo;

}


set

{

_ContactNo = value;

RaisePropertyChanged(“ContactNo”);

}

}

#endregion

}

Now we will add some sample data to the Datagrid.

public MainPage()

{

InitializeComponent();


List<UserData> myList = CreateSampleData();

 

MyDataGrid.ItemsSource = myList;

}

 


private
static
List<UserData> CreateSampleData()

{


List<UserData> myList = new
List<UserData>

{


new
UserData{ UserID=“john45”, FirstName=“John”, LastName=“Campbell”, EmailID=“John.Campbell@userdata.com”, ContactNo=“123456789”},


new
UserData{ UserID=“alice11”, FirstName=“Alice”, LastName=“Rose”, EmailID=“Alice.Rose@userdata.com”, ContactNo=“123456789”},


new
UserData{ UserID=“freespirit”, FirstName=“Aarathi”, LastName=“Das”, EmailID=“Aarathi.Das@userdata.com”, ContactNo=“123456789”},


new
UserData{ UserID=“james32”, FirstName=“James”, LastName=“Smart”, EmailID=“James.Smart@userdata.com”, ContactNo=“123456789”},


new
UserData{ UserID=“junglebook”, FirstName=“Michele”, LastName=“Dell”, EmailID=“Michele.Dell@userdata.com”, ContactNo=“123456789”},


new
UserData{ UserID=“alex”, FirstName=“Alex”, LastName=“Kurt”, EmailID=“Alex.Kurt@userdata.com”, ContactNo=“123456789”},


new
UserData{ UserID=“john22”, FirstName=“Jonathan”, LastName=“Scofield”, EmailID=“Jonathan.Scofield@userdata.com”, ContactNo=“123456789”},


new
UserData{ UserID=“hiro”, FirstName=“Hiro”, LastName=“Nakamura”, EmailID=“Hiro.Nakamura@userdata.com”, ContactNo=“123456789”},


new
UserData{ UserID=“bear”, FirstName=“Clair”, LastName=“Patrelli”, EmailID=“Clair.Patrelli@userdata.com”, ContactNo=“123456789”},


new
UserData{ UserID=“sylar”, FirstName=“Sylar”, LastName=“Gabriel”, EmailID=“Sylar.Gabriel@userdata.com”, ContactNo=“123456789”},


new
UserData{ UserID=“matt”, FirstName=“Matt”, LastName=“Parkman”, EmailID=“Matt.Parkman@userdata.com”, ContactNo=“123456789”},


new
UserData{ UserID=“suresh”, FirstName=“Suresh”, LastName=“Mohinder”, EmailID=“Suresh.Mohinder@userdata.com”, ContactNo=“123456789”},


new
UserData{ UserID=“jack”, FirstName=“Jack”, LastName=“Bauer”, EmailID=“Jack.Bauer@userdata.com”, ContactNo=“123456789”},


new
UserData{ UserID=“sarah”, FirstName=“Sara”, LastName=“Conner”, EmailID=“Sara.Conner@userdata.com”, ContactNo=“123456789”}

};


return myList;

}

Now we don’t need to edit the data in DataGrid; so make the DataGrid read only. See the following xaml code for the DataGrid.

<data:DataGrid x:Name=”MyDataGrid” Margin=”0″ Width=”Auto” IsReadOnly=”True” Height=”200″ HorizontalAlignment=”Center” VerticalAlignment=”Center”/>

If you run the application now then you will see the DataGrid with populated data:

Now we will add an event handler GotFocus for the DataGrid. When you select a row in the DataGrid the DataForm has to be displayed.

Now before entering any code into the GotFocus event handler, let’s change the DataForm.

Here I am creating a property called SelectedUser and I have changed the default constructor to Parameterized Constructor with parameter as a list of string. Follow the code belo:

#region Selected User


public
UserData SelectedUser

{


get

{


return MyDataForm.CurrentItem as
UserData;

}


set

{

MyDataForm.CurrentItem = value;

}

}

#endregion

 


public MyChildWindow( List<string> userid)

{

InitializeComponent();

}

Now in MainPage.xaml.cs in the GotFocus event handler add the following code:

private
void MyDataGrid_GotFocus(object sender, RoutedEventArgs e)

{


var cw = new
MyChildWindow();

cw.SelectedUser = MyDataGrid.SelectedItem as
UserData;

cw.Show();

}

 

Now if you run the application and click on any Row of the DataGrid you will see the details in the DataForm and there you will be able to change it. As we have implemented INotifyPropertyChanged interface the changed value will be reflected immediately in the DataGrid.

That’s it you have successfully used DataForm to display a set of Data from the DataGrid.

Enjoy Coding.

Advertisements