Hi
I was working on a Silverlight Application lately and I was in the need to open up a Popup window. and I am not talking about the regular .NET Message box. Naturally I Created a Page with some controls created a new instance of it but Saddly there was no Page.Show() method 
.
I know you can use the Popup Control to do a similar job (although I am not sure about the fade in and out) but I just played around and I liked what came out of it, so here is my solution to this problem.
Creating the Control
First you will need to use the Canvas or the Grid control as the Silverlight application root. We are going to use the face that these controls use the Zindex property. For example lets use this as the control:
1: <UserControl x:Class="PopUpWindow.Page"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="400" Height="300">
5: <Grid x:Name="LayoutRoot" Background="White">
6: <Button Content="Click Me" Width="150" Height="70"></Button>
7: </Grid>
8: </UserControl>
Now we will use the fact that in the Grid the last element we add to the grid is the top most one, so we will add the “Popup” message as a border with a button in it. We have to pay attention to two important things:
- Set the Opacity of the border to 0 so it wont show until we want it to.
- Set the Visibility status of the border to “Collapsed” or it will hide the button beneath it and won’t allow us to click it.
1: <UserControl x:Class="PopUpWindow.Page"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: Width="400" Height="300">
5: <Grid x:Name="LayoutRoot" Background="White">
6: <Button Content="Click Me" Width="150" Height="70" Click="Button_Click"></Button>
7: <Border BorderBrush="Black" BorderThickness="2"
8: CornerRadius="4" Background="AntiqueWhite" Visibility="Collapsed"
9: Width="150" Height="150" Opacity="0" x:Name="Popup">
10: <Button Content="Close Popup" Width="80" Height="40"></Button>
11: </Border>
12: </Grid>
13: </UserControl>
The Fade In Animation
This is a simple double animation that will take the opacity from 0 to 100 and will be triggered by the click of the “Click Me” Button:
1: <Storyboard x:Name="ShowPopup">
2: <DoubleAnimation
3: Duration="00:00:01"
4: From="0.00"
5: To="1.00"
6: Storyboard.TargetName="Popup"
7: Storyboard.TargetProperty="Opacity"
8: />
9: </Storyboard>
Now we will have to trigger it with the click event of the “Click Me Button”:
1: private void Button_Click(object sender, RoutedEventArgs e)
2: {
3: Popup.Visibility = Visibility.Visible;
4: ShowPopup.Begin();
5: }
Pretty simple. This will make you “Popup” Fade in.
The Fade Out Animation
This is almost the same as the fade in animation. The storyboard is very similar:
1: <Storyboard x:Name="HidePopup">
2: <DoubleAnimation
3: Duration="00:00:01"
4: From="1.00"
5: To="0.00"
6: Storyboard.TargetName="Popup"
7: Storyboard.TargetProperty="Opacity"/>
8: </Storyboard>
The only thing we have to pay attention to is the fact that we have to wait untill the animation is over to change the Visibility status of the border to “Collapsed” or we will loose the fade out effect. All we have to do is subscribe to the Animation Completed event and do it there:
1: private void Button_Click_1(object sender, RoutedEventArgs e)
2: {
3: HidePopup.Completed += new EventHandler(HidePopup_Completed);
4: HidePopup.Begin();
5: }
6:
7: void HidePopup_Completed(object sender, EventArgs e)
8: {
9: Popup.Visibility = Visibility.Collapsed;
10: HidePopup.Completed -= HidePopup_Completed;
11: }
And that’s it! You have a Popup window in Silverlight, well sort of 
Got a better idea? Let me know
You can download a sample project by Grabbing our feed and using the password at the bottom to log into the Freebies Page
Amit
1 Trackback(s)
Write for Dev102!
We pay for user submitted tutorials and articles that we publish. Anyone can send in a contribution
Learn More
Nigel Sampson Said on Dec 4, 2008 :
Silverlight does have a Popup control, what’s useful about it is that it doesn’t take space in it’s parents layout, so won’t push anything around.