Create Customized Pop-up Window in Windows Phone Application Using XAML and C#

Introduction

Here in this article we will show a pop-up whenever a button is pressed.

Procedure

Step 1: Create a new “Silverlight Windows Phone Application” in Visual Studio and name it as you choose (I here named it "PopUpWP").

Now a new Windows Phone Application Page (MainPage.xaml) will be generated.

Step 2: Navigate to the MainPage.xaml of the XAML section in your code and add the following code:

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <!-- Setting a Rectangle having transparent background which set the
   Visibility of popup -->
   <Rectangle Name="popupRect" Fill="#80000000" Visibility="Collapsed"/>
   <!—Here in the above Code we are just filling the rectangle With the transparent BackGround -->
   <!—Creating A Border -->
   <Border Name="popupBorder" Background="{StaticResource PhoneChromeBrush}" BorderBrush="Red" BorderThickness="2"
   HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Collapsed">
   <!-- Creating A grid Inside the Border and Rectangle -->
</Grid>
<!-- Setting Width and Height of The Grid -->
<Grid.RowDefinitions>
   <RowDefinition Height="Auto"/>
   <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
   <ColumnDefinition Width="250" />
   <ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<!-- Generating the Control which are the Two Radio Button here in this Example inside a Stackpanel -->
<RadioButton Content="(Option 1)" Tag="Option 1"/>
<RadioButton Content="(Option 2)" Tag="Option 2"/>
<Button Name="okButton" Grid.Row="1" Grid.Column="0" Content="Ok" Click="okButton_Click"/>
<Button Name="cancelButton" Grid.Row="1" Grid.Column="1" Content="Cancel" Click="cancelButton_Click"/>
<!-- Setting a Button Control In the Main Grid -->
<Button Name="popupButton" Content="Pop Me Up!" Margin="120,491,0,0" Height="75" HorizontalAlignment="Left" VerticalAlignment="Top" Width="190" Click="popupButton_Click"/>

The MainPage will look like this:

Step 3: Now navigate to the cs file in your project which is MainPage.xaml.cs.

There are three events already generated for you from your XAML file, they are:

private void okButton_Click(object sender, RoutedEventArgs e)
{
   //Event for Ok Button viz Inside the Pop up Window
}
private void cancelButton_Click(object sender, RoutedEventArgs e)
{
   //Event for Cancel Button Which is Inside the Pop up Window
}
private void popupButton_Click(object sender, RoutedEventArgs e)
{
   //Event For "Pop Me Up!" Button Control to Show the Pop up Window
}

Step 4: Add the following code to these Event Handlers:

private void okButton_Click(object sender, RoutedEventArgs e)
{
   MessageBox.Show("Ok Button is Pressed!!!");
   popupRect.Visibility = Visibility.Collapsed;
   popupBorder.Visibility = Visibility.Collapsed;
   //As we can see that the above code is as same as we use in the
   // case of cancel button event
   //to get rid of again writing the same code it would be better if
   // we just use
   //cancelButton_Click(s,e);
   //in place of above two line of code
}
private void cancelButton_Click(object sender, RoutedEventArgs e)
{
   popupRect.Visibility = Visibility.Collapsed;
   popupBorder.Visibility = Visibility.Collapsed;
}
private void popupButton_Click(object sender, RoutedEventArgs e)
{
   popupRect.Visibility = Visibility.Visible;
   popupBorder.Visibility = Visibility.Visible;
}

Here the only thing we are doing is that we are just changing the visibility property of the controls.

That's all for this article. I am embedding the source file so that you can go through it.

Thank You.