Passing Data from Child Window to Parent Window In Silverlight 3


Introduction

There were many requirements where we need to pass the value from ChildWindow to our Parent Window in Silverlight. In this article we will see a sample implementation of this requirement to pass the value from the ChildWindow to the Parent Window.

This is the idea what we are going to do. We will select a date from the calendar from the ChildWindow and pass the selected value to the Parent Window and display it.

Creating Silverlight Project

Fire up Visual Studio 2008 and create a new Silverlight 3 Project. Name it as ChildToParent.

Now first things first add a ChildWindow to the Silverlight Project name the ChildWindow as DatePopUpWindow.

Now that we have added everything needed we will design our page in Blend as follows:

I have added one TextBlock to display the Selected Date and one Image; on it’s click the ChildWindow will be fired up.

<TextBlock HorizontalAlignment=”Left” VerticalAlignment=”Top” Text=”Select A Date : “ TextWrapping=”Wrap” Margin=”10,10,0,0″/>

    <TextBlock x:Name=”txtDate” HorizontalAlignment=”Left” VerticalAlignment=”Top” TextWrapping=”Wrap” Margin=”10,30,0,0″/>

    <Image x:Name=”imgCalendar” Height=”32″ HorizontalAlignment=”Left” VerticalAlignment=”Top” Width=”32″ Margin=”108,0,0,0″ Source=”Images/calendar.png” MouseLeftButtonDown=”imgCalendar_MouseLeftButtonDown”/>

Now we will design our Childwindow as follows:

As you see from the above image; I have added a calendar to the ChildWindow.

<controls:Calendar x:Name=”myCalendar” HorizontalAlignment=”Left” d:LayoutOverrides=”Height”/>

<Button x:Name=”CancelButton” Content=”Cancel” Click=”CancelButton_Click” Width=”75″ Height=”23″ HorizontalAlignment=”Right” Margin=”0″ VerticalAlignment=”Center” Grid.Row=”1″ d:LayoutOverrides=”Height” />

<Button x:Name=”OKButton” Content=”OK” Click=”OKButton_Click” Width=”75″ Height=”23″ HorizontalAlignment=”Right” Margin=”0,0,79,0″ VerticalAlignment=”Center” Grid.Row=”1″ d:LayoutOverrides=”Height” />

 

Now go back to the VisualStudio IDE and open DatePopUpWindow.xaml.cs

Here we will add a event handler.

public
event
EventHandler OkClicked;

Add a property that can be accessed from the main window.

private
DateTime _SelectedDate;

 


public
DateTime SelectedDate

{


get { return _SelectedDate; }


set { _SelectedDate = value; }

}

Now in the OkButton_Click event add the following code:

private
void OKButton_Click(object sender, RoutedEventArgs e)

{


if (OkClicked!=null)

{

_SelectedDate = (DateTime)myCalendar.SelectedDate;

OkClicked(this, new
EventArgs());

}


this.DialogResult = true;

}

Now go back to the MainPage.xaml.cs and create an instance of ChildWindow:

DatePopUpWindow calendar;

In the click event of the Image (Calendar) display the ChildWindow and Initiate the Event.

private
void imgCalendar_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

calendar = new
DatePopUpWindow();

calendar.Show();

calendar.OkClicked += new
EventHandler(cw_OkClicked);

}

In the event handler add the following code to access the data from ChildWindow.

void cw_OkClicked(object sender, EventArgs e)

{

txtDate.Text = “You have selected : “ + calendar.SelectedDate.ToShortDateString();

}

That’s it. We are done. Now run your application.

When you click on the Calendar Image the ChildWindow will be displayed.

Select any date and press ok.

Hope you like this simple article.