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.

Up Next
    Ebook Download
    View all
    Learn
    View all