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 (https://coding4fun.codeplex.com/). 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.

windows_phone_8_custom_popup

 

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"    
        	Margin="10"    
        	Background="{TemplateBinding Background}"    
        	BorderThickness="0"    
        	BorderBrush="{StaticResource PhoneForegroundBrush}">

        	<StackPanel Margin="10">
        		<TextBlock    
        			Text="{TemplateBinding Title}"    
        			Margin="0,-10,-25,10"    
        			FontSize="30"    
        			TextWrapping="Wrap" FontFamily="Segoe WP Light" />
        		<ContentPresenter Content="{TemplateBinding Body}" />
        		<StackPanel    
        			Margin="0,10,0,0"  
        			x:Name="actionButtonArea"  
        			Orientation="Horizontal"  
        			HorizontalAlignment="Center" />
        	</StackPanel>
        </Border>
    </Grid>

</ControlTemplate>

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)
this.top = 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 this.top and sets body in this.middle, etc etc…