Dataform and Datagrid in Silverlight 3 Application


Introduction

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

Creating Silverlight Project

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

DataForm1.gif

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:

DataForm2.gif

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

DataForm3.gif

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

DataForm4.gif


DataForm5.gif

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.

DataForm6.gif

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

DataForm7.gif

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 below:

#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.

DataForm8.gif

DataForm9.gif

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

Enjoy Coding.

Up Next
    Ebook Download
    View all
    Learn
    View all