Advertise on Dev102 Advertise on Dev102 Advertise on Dev102 Advertise on Dev102
Write Article for Dev102

Write for Dev102!

We pay for user submitted tutorials and articles that we publish. Anyone can send in a contribution

Learn More

Creating a Silverlight Fade In and Out Popup Window

By Amit

November 24, 2008

Silverlight, WPF, Web Dev

8 Comments

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:

  1. Set the Opacity of the border to 0 so it wont show until we want it to.
  2. 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

Tags :

8 Responses to “Creating a Silverlight Fade In and Out Popup Window”


  1. Nigel Sampson

    Said on December 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.

  2. Tim

    Said on May 5, 2010 :

    I am using this example to create fade in pop-up boxes but I can not figure out a way to control where on the page the pop-up box appears. Do you know how to set this?

  3. vinod

    Said on May 19, 2010 :

    Hi,
    I tryed with your given xaml code and Popup control, I am using Blend 4 here i what i see with your code that doesn’t show fade in/out effect either with the both. can find out any solution to this let me know, I want this Popup animation on Datagrid rows

  4. vinod

    Said on May 19, 2010 :

    When using works well at showpopup but not fading at HidePopup,I assigned to mouseenter and mouseleave events, how can make movement from left to right position.

  5. Lance

    Said on May 21, 2010 :

    I’m having this error

    The property ‘Target’ does not exist on the type ‘DoubleAnimation’ in the XML namespace

  6. Thesting

    Said on November 4, 2010 :

    Lance u should use TargetName and not Target

  7. Karthikeyan

    Said on February 15, 2011 :

    Thanks a lot, i spent a 2 days for that, but i got it that much simple coz of your post.. really thaks

1 Trackback(s)

  1. Jul 1, 2009: Collection of Best Most Interesting Silverlight Tutorials | guidesigner.net

Post a Comment