Silverlight Tips provides simple and useful tutorials and tips with real life examples, live demos and sample codes to download.
About authors:
Damon Serji
Damon Serji,
Silverlight developer working at Metia in London.
Gavin Wignall
Gavin Wignall,
Interactive Design Lead, working in design for over 10 years, the last 3 being in Silverlight.
Allan Muller
Allan Muller,
Developer, working on various types of Silverlight and WCF projects.
Recent comments
Get Microsoft Silverlight

Silverlight Child Window is a great new feature which enables you to use advantage of a fully enhanced popup window. Child Window can be customized just like a normal xaml file to display or request information from the user. In this post I will explain briefly how receive and save information entered by user from a Child Window (ChildWindowForm.xaml in our example) and then display them in the parent window (MainPage.xam).

I am going to create an example in which user enters his/her name and surname in a Child Window and once submitted different details, along with the entered name and surname, are displayed in the main page.

I have uploaded the working example of this post to CodePlex and you can download it from here to test it for yourself.

1. add a new Child Window
in Visual Studio = right click on your Silverlight project, then, Add > New Item > Silverlight Child Window. The Child Window will have an OK and a Cancel button by default when it is created. Add two TextBox controls to the page for users to enter their name and surname.

2. Create an EventHandler in Child Window
code to create a new EventHandler:

public event EventHandler SubmitClicked;

3. Create public properties to save the values
it is possible to access the value of the TextBox controls we added in the Child Window directly from the MainPage.xaml.cs, however, this is a terrible practice as it will reduces your code stability in the future. Therefore create two public properties of type string to save the value of both TextBox controls. You will notice in my project I save the value of the TextBox in a private string variable and then save that variable to my public – this is just a better practice for coding so don’t get confused.

public string NameText
{
    get { return _nameText; }
    set
    {
        _nameText = value;
    }
}
public string SurnameText
{
    get { return _surnameText; }
    set
    {
        _surnameText = value;
    }
}


4. Fire the event once submit button is clicked in Child Window
there should already be a method for when the OK (Submit) button is pressed, it is called OKButton_Click. Inside that we need to fire the event which we created earlier, so that our event gets fired when the code reaches this method i.e. when we press OK in Child Window.

private void OKButton_Click(object sender, RoutedEventArgs e)
{
    if (SubmitClicked != null)
    {
        _nameText = Name.Text;
        _surnameText = Surname.Text;
        SubmitClicked(this, new EventArgs());
    }
    this.DialogResult = true;
}


5. In MainPage.xaml create a new instance of the Child Window

in order to display your Child Window first create a private variable your Child Window type - what ever you called your Child Window file will be the type of your variable i.e. ChildWindowForm.xaml:

private ChildWindowForm childWindowForm;

now create a new instance of it:

childWindowForm = new ChildWindowForm();


6. How to show Child Window
you need to display the actual Child Window which you created and have the instance in your MainPage. To do that, use the instance you just created and call the build-in method for any Child Window called “Show”:

childWindowForm.Show();


7. In MainPage.xaml hook up the submit event in Child Window
now we have an event which will get fired up from the Child Window when we click the submit button (OK button). All we have to do is to wire that event up so that we can do something when it is fired:

childWindowForm.SubmitClicked += new
EventHandler(childWindowForm_SubmitClicked);


8. Access the properties of the Child Window

private void childWindowForm_SubmitClicked(object sender, EventArgs e)
{
    Name.Text = childWindowForm.NameText;
    Surname.Text = childWindowForm.SurnameText;
}



I have skipped explaining some features that you will see in the example I created for this project (download from here) to concentrate more on the subject of this post. However if you have any questions about this post or the example please do feel free to post your comments and I will try to help as much as I can.

Posted by Damon Serji on 24. September 2009 21:27 under: Intermediate
 with 8 Comments

Comments

Paul:

Very good article!
Can you explain how can I do the opposite solution? How can I pass some value fro MainPage.xaml to ChildWindow? thanks!!!

Posted 10/9/2009 4:11:07 PM

Damon:

Hi Paul and welcome to Silverlight Tips.

One way is you can pass your values to the ChildWindow when you call the childWindowForm.Show(); method from your main page. In this case you have to change the Show() method in your child window to be able to receive values you want. i.e.

Your chidWindow page:
private void Show(string getStringValue, int getNumber)
{
...
}

and then from your MainPage:
childWindowForm.Show("Silverlight Tips", 5);

Other way, is to have a static property on your MainPage, and since it is static you will be able to access it from everywhere within your project. This was is good if you for instance have only one value and want to keep using it.

Please let me know if you have any questions..

Posted 10/11/2009 6:54:50 AM

Bhuvna:

I have data in a array variable from parent window and I need to display those data in a child window. How can I do it?

Posted 10/18/2009 10:21:42 AM

Bhavana:


How can I display the values (in an array variable) from parent window to child window?

Posted 10/18/2009 3:48:49 PM

Damon:

Hi Bhavana and welcome to Silverlight Tips.

As I mentioned in my above comment, you can send the variable (array variable) to your child window from the method you call your child i.e.

childWindowForm.Show(yourArrayVariable);

private void Show(string[] getyourArrayVariable)
{
...
}

try above method and if you still had problems let me know.

Posted 10/24/2009 10:02:19 PM

gkopparam:

Hi,
how do we handle a response for an async call made in the child window.
i initiate an async call in the child window and close the child
window, now in the completed event of that async call can i update the parent window with information?

Posted 1/18/2010 5:51:30 PM

Pingback from dkphp.com

Close previous window from current window | PHP Developer Resource

Posted 5/23/2012 3:34:46 PM

Pingback from coderincomplete.com

Code(r) (In)Complete  » Blog Archive   » Passing Value from ChildWindow back to Parent

Posted 8/26/2013 10:14:56 PM

Add comment


(Will show your Gravatar icon)

biuquote
  • Comment
  • Preview