Data Form and Data Grid In Silverlight 3 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.

{codecitation class="brush: csharp; gutter: true;" width="650px"}

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
}




{/codecitation}

Now we will add some sample data to the Datagrid.

{codecitation class="brush: csharp; gutter: true;" width="650px"}

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[at]userdata.com", ContactNo="123456789"},
new UserData{ UserID="alice11", FirstName="Alice", LastName="Rose", EmailID="Alice.Rose[at]userdata.com", ContactNo="123456789"},
new UserData{ UserID="freespirit", FirstName="Aarathi", LastName="Das", EmailID="Aarathi.Das[at]userdata.com", ContactNo="123456789"},
new UserData{ UserID="james32", FirstName="James", LastName="Smart", EmailID="James.Smart[at]userdata.com", ContactNo="123456789"},
new UserData{ UserID="junglebook", FirstName="Michele", LastName="Dell", EmailID="Michele.Dell[at]userdata.com", ContactNo="123456789"},
new UserData{ UserID="alex", FirstName="Alex", LastName="Kurt", EmailID="Alex.Kurt[at]userdata.com", ContactNo="123456789"},
new UserData{ UserID="john22", FirstName="Jonathan", LastName="Scofield", EmailID="Jonathan.Scofield[at]userdata.com", ContactNo="123456789"},
new UserData{ UserID="hiro", FirstName="Hiro", LastName="Nakamura", EmailID="Hiro.Nakamura[at]userdata.com", ContactNo="123456789"},
new UserData{ UserID="bear", FirstName="Clair", LastName="Patrelli", EmailID="Clair.Patrelli[at]userdata.com", ContactNo="123456789"},
new UserData{ UserID="sylar", FirstName="Sylar", LastName="Gabriel", EmailID="Sylar.Gabriel[at]userdata.com", ContactNo="123456789"},
new UserData{ UserID="matt", FirstName="Matt", LastName="Parkman", EmailID="Matt.Parkman[at]userdata.com", ContactNo="123456789"},
new UserData{ UserID="suresh", FirstName="Suresh", LastName="Mohinder", EmailID="Suresh.Mohinder[at]userdata.com", ContactNo="123456789"},
new UserData{ UserID="jack", FirstName="Jack", LastName="Bauer", EmailID="Jack.Bauer[at]userdata.com", ContactNo="123456789"},
new UserData{ UserID="sarah", FirstName="Sara", LastName="Conner", EmailID="Sara.Conner[at]userdata.com", ContactNo="123456789"}
};
return myList;
}

{/codecitation}

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.


{codecitation class="brush: html; gutter: true;" width="650px"}

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


{/codecitation}


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:

{codecitation class="brush: csharp; gutter: true;" width="650px"}

#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();
}



{/codecitation}

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.

About the Author

Diptimaya Patra Description :I am a Master in Computer Application (MCA) from SRM University, Chennai. I am MCTS in ASP.Net Web Development, and MOSS 2007 Administration. I have extreme exposure to Microsoft Technologies in recent times like Silverlight 2, Silverlight 3. I am from Cuttack, Orissa. You can reach me using this mail (diptimaya.patra@gmail.com). Currently I am working as a Software Engineer in UST Global Inc in Trivandrum Center. Occupation :Software Engineer Company : UST Global. Location : India Follow me at twitter : http://twitter.com/dpatra