Here I’m documenting one of the most useful things I’ve come across during Windows Phone 8 application development.

The default native dialog box for Windows Phone 8 is actually really good especially when you are extending it using Coding4Fun Toolkit ( It allows you to further customize the content inside of the prompt.

In one of my Windows Phone 8 projects, I was asked to create a fully customized dialog box that looks nothing like the native dialog box. I was able to achieve this very easily by extending Coding4Fun Toolkit’s MessagePrompt class and editing the default template.



The result was a really flexible pop up system with the consistent look. It looked awesome and fit well with the artistic theme of the app.

Here is a steps I used to create this.

1. Create a custom ControlTemplate that doesn’t have that border thingy… I can just add the following template to App.xaml.

<ControlTemplate x:Key="MsgPropmtNoBorder" TargetType="c4f:MessagePrompt">
    <Grid VerticalAlignment="Stretch">
        <Rectangle Fill="{StaticResource TransparentBrush}" />

        <Border VerticalAlignment="Top"    
        	Background="{TemplateBinding Background}"    
        	BorderBrush="{StaticResource PhoneForegroundBrush}">

        	<StackPanel Margin="10">
        			Text="{TemplateBinding Title}"    
        			TextWrapping="Wrap" FontFamily="Segoe WP Light" />
        		<ContentPresenter Content="{TemplateBinding Body}" />
        			HorizontalAlignment="Center" />


2. Create a class that extends Coding4Fun.Toolkit.Controls.MessagePrompt. This primarily sets up the “blank” pop up system and provides means to insert elements in it.

using Coding4Fun.Toolkit.Controls;
public class CustomPopup : MessagePrompt
    // Add some member variables here... e.g. bodyGrid to store the top level grid element

    public CustomPopup()
        // Custom popup styling
        this.Template = (ControlTemplate)App.Current.Resources["MsgPropmtNoBorder"]; 
        this.Background = new SolidColorBrush(Colors.Transparent);
        this.VerticalAlignment = System.Windows.VerticalAlignment.Center;
        this.VerticalContentAlignment = System.Windows.VerticalAlignment.Center;

        // Remove the standard circular button
        this.ActionPopUpButtons.RemoveAll(new Predicate<button>(delegate(Button arg) { return true; }));

        // Do any further initialization. e.g. loading some elements into the popup

The above code is the basic constructor. For the app I built, the pop up was divided into three parts, so I created one Grid element with three different grids in them. Then I added methods to put buttons, set titles. set body content, etc…

I used the method I mentioned here to inject xaml based custom controllers into the popup. So something like below in the constructor.

this.bodyGrid = (Grid)XamlControl.CreateControl(@"CUI/PopupGrid.xml", null) = bodyGrid.FindName("PopupGridTop") as Grid;
this.middle = bodyGrid.FindName("PopupGridMiddle") as Grid;
this.bottom = bodyGrid.FindName("PopupPanelBottom") as StackPanel;

Then simply wrote methods that sets the title in and sets body in this.middle, etc etc…