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.