In this example, you'll create the popup's content in a separate user control and use an instance of that control as the content of the popup. Note that the application you'll create will look just like the application created in the Popup for Windows Phone Quick Start but the content of the popup is handled differently.
Complete the following steps:
1. Right-click the project name in the Solution Explorer and select Add | New Item.
2. In the Add New Item dialog box, choose Windows Phone User Control, name the control "C1PopupUserControl", and click Add.
3. Edit the UserControl's markup so it appears similar to the following:
•XAML
<UserControl x:Class="C1Popup.C1PopupUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot">
<StackPanel Background="DarkSlateBlue">
<TextBlock Text="Select an option:" Margin="15" />
<RadioButton x:Name="radio1" Content="Option 1" />
<RadioButton x:Name="radio2" Content="Option 2" />
<RadioButton x:Name="radio3" Content="Option 3" />
<Button Content="Close Popup" Width="200" x:Name="btnClose" />
</StackPanel>
</Grid>
</UserControl>
This is the content that will be used in the C1Popup control. Note that it is the same content used in the Popup for Windows Phone Quick Start.
4. Return to the MainPage.xaml source view. Add markup to the main GridContentPanel so it appears like the following:
•XAML
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<StackPanel VerticalAlignment="Center">
<Button Content="Open Popup" Height="72" HorizontalAlignment="Center" Margin="10,10,0,0" Name="btnOpen" VerticalAlignment="Top" Width="200" Click="btnOpen_Click" />
</StackPanel>
</Grid>
5. Select View | Code to switch to Code View and add the btnOpen_Click event handler so the code looks like the following:
•C#
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
}
private void btnOpen_Click(object sender, RoutedEventArgs e)
{
C1Popup popup = new C1Popup();
C1PopupUserControl control = new C1PopupUserControl();
popup.Content = control;
popup.IsOpen = true;
control.btnClose.Click += (s, args) =>
{
popup.IsOpen = false;
};
}
}
This markup will initialize the popup wen the button on the main page is selected.
What You've Accomplished
In this topic you created a UserControl to house the C1Popup control's content. Note that you'd need to set the Content property to the control.