The City of knowledge
How to show a popup layer within a Silverlight web page?
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.
| Print article | This entry was posted by moustafa farhat on 23/12/2009 at 5:07 pm, and is filed under main, silver light. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |

about 7 months ago
Thanks for this. If button1 was excluded, how could you wire it up so that if you clicked outside of the popup it would close? But if you clicked the popup itself or any child controls it would stay open.