Tutorials » Silverlight tutorials »

How to show a popup layer within a Silverlight web page?

In this chapter, you will learn how to display a non-annoying popup layer in a web page using Silverlight.

Add a button to your xaml page as shown below:

<Grid x:Name="LayoutRoot" Background="White" >
<Button Width="100" Height="50" x:Name="showPopup"
Click="showPopup_Click" Content="Show Popup" />

Add the following code to your code behind file (page.xaml.cs)

Popup p = new Popup();
private void showPopup_Click(object sender, RoutedEventArgs e)
// Create a panel control to host other controls
StackPanel panel1 = new StackPanel();
panel1.Background = new SolidColorBrush(Colors.Gray);

// Create a button
Button button1 = new Button();
button1.Content = "Close";
button1.Margin = new Thickness(5.0);
button1.Click += new RoutedEventHandler(button1_Click);

// Create a text label
TextBlock textblock1 = new TextBlock();
textblock1.Text = "The popup control";
textblock1.Margin = new Thickness(5.0);

// Add text label and button to the panel

// Now, make the panel a child of the popup so that
// the panel will be shown within the Popup when displayed.
p.Child = panel1;

// Set the position.
p.VerticalOffset = 25;
p.HorizontalOffset = 25;

// Show the popup.
p.IsOpen = true;

void button1_Click(object sender, RoutedEventArgs e)
// Close the popup.
p.IsOpen = false;

Now run the application. You can see the page with a button. When you click on the button, a popup layer will appear with a text label and a button in it. When you click on the button in the popup, it will close the popup.

Next Chapter: Display Tooltip for Silverlight controls
Previous Chapter: How to call Javascript functions from Silverlight code ?
More Chapters: Silverlight Tutorials
More Tutorials: Tutorial Index

Top Contributors
    Last 7 Daysmore...

    Awards & Gifts

    Online Members

    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India