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" />
</Grid>


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
panel1.Children.Add(textblock1);
panel1.Children.Add(button1);

// 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
Today
    Last 7 Daysmore...

    Awards & Gifts
     
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India