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:

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

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

</Grid>

<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>

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

<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.