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.

image1.gif

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

image2.gif

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

image3.gif

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:

image4.gif

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.

image5.gif

Select any date and press ok.

image6.gif

Hope you like this simple article.

Up Next
    Ebook Download
    View all
    Learn
    View all