Tonight I was looking at the Silverlight Toolkit Samples and found the ChildWindow control. This interested me because the first Silverlight tutorial I ever took was ScottGu's on building an application that can search for Digg articles, found here. When you click on an article in the listbox then a modal popup comes up containing more information. He achieved this modal popup functionality by creating a grey rectangle with some opacity that stretched across the screen horizontally and vertically. On top of that was a rounded border control with the content in there that would show up over the rectangle.
I used the concept from ScottGu's tutorial to create a page on my personal website that has a ListBox of some websites that I've created. When you click on one, the modal popup comes up showing more details of the work I did for that website. The ChildWindow control seemed a bit more polished to me so I decided to give it a go.
The first thing you need to do is make sure your project contains a reference to System.Windows.Controls. Interestingly, my application was a Silverlight Navigation project and already contained references to System.Windows.Controls and System.Windows.Controls.Navigation, which made me realize that the navigation functionality that I had been using must be a part of the Silverlight Toolkit! The next thing you'll want to do is add a control to your project for the modal popup. The cool thing here is that there is already a "Silverlight Child Window" control that you can add:
Here's what I did with my child window control, notice how I don't need to worry about the formatting of the window or the modal functionality, all I need to do is add my content that will go inside the modal popup.
<controls:ChildWindow x:Class="TothSolutions.SL.Controls.WorkPopup"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
Width="600" Height="300"
Title="WorkPopup">
<Grid x:Name="LayoutRoot" Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image Source="{Binding ThumbNailBig}" Width="250" Margin="0,0,20,0" VerticalAlignment="Center" Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" />
<TextBlock Text="{Binding Title}" FontSize="20" Foreground="#000" FontWeight="Bold" Grid.Column="1" Grid.Row="0" />
<HyperlinkButton Content="{Binding HrefLink}" TargetName="_new" NavigateUri="{Binding HrefLink}" FontSize="12" Margin="0,0,0,5" Grid.Column="1" Grid.Row="1" IsTabStop="False" />
<TextBlock Text="{Binding FullDescription}" FontSize="12" Foreground="#000;" TextWrapping="Wrap" Grid.Column="1" Grid.Row="2" />
<Button x:Name="CancelButton" Content="Close" Click="CancelButton_Click" Width="75" Height="23" HorizontalAlignment="Center" Margin="0,12,0,0" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" />
</Grid>
</controls:ChildWindow>
In the code-behind of the ChildWindow I wait until the control is loaded and then set the title of the modal popup based on the DataContext, which we'll pass in from the parent page. The title as well as a close button will show up at the top of the modal popup without us having to do anything more... Note: you could set the title in the constructor if it's a static value, e.g. this.Title = "My super cool modal popup!";
public partial class WorkPopup : ChildWindow
{
public WorkPopup()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(WorkPopup_Loaded);
}
void WorkPopup_Loaded(object sender, RoutedEventArgs e)
{
Site site = DataContext as Site;
this.Title = site.Title;
}
private void CancelButton_Click(object sender, RoutedEventArgs e)
{
this.DialogResult = false;
}
}
Lastly, on the parent page when the user clicks one of the items in my listbox, I create an instance of my ChildWindow, grab the business object for that row, set that business object as the DataContext of my ChildWindow, and lastly show the ChildWindow.
private void SiteList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (SiteList.SelectedItem != null)
{
Site site = SiteList.SelectedItem as Site;
WorkPopup popup = new WorkPopup();
popup.DataContext = site;
popup.Show();
}
}
And that's it, easy peezie... Happy coding!!
