Customize Windows Phone 8.1 message dialog

3
votes

I want to customize my message dialog as shown in following figure

enter image description here

How do I perform that I have prepared xaml for this 

   <StackPanel Name="rootStackPanel" Height="Auto"  Background="#363636" VerticalAlignment="Top">
        <StackPanel Margin="10">
            <StackPanel Margin="0,0,0,10" Orientation="Horizontal">
                <TextBlock x:Name="HeadingText" x:FieldModifier="public" Style="{StaticResource ApplicationMessageBoxHeadingStyle}" Text="Alert"  />
                <Image Margin="10,05,0,0" Source="/Assets/Images/alert.png" Width="35"></Image>
            </StackPanel>
            <TextBlock x:FieldModifier="public" x:Name="ContentText" Style="{StaticResource ApplicationMessageBoxErrorStyle}" Text="Pease enter a valid plate number" />
            <Button x:FieldModifier="public"   Name="OkButton" Margin="0,20,0,0" Padding="0"  HorizontalAlignment="Left" Content="Ok"  Style="{StaticResource ApplicationThemeButtonStyle}"/>
        </StackPanel>
    </StackPanel>
2
xamlwindows-phone-8.1

2 Answers

5
votes

The exact look you have there is non-standard, and if you want that exact thing you'll need to write some custom code. If the important part is the icon in the alert title then this is pretty easy with a ContentDialog.

The MessageDialog isn't customizable, but the ContentDialog is. There is a template to add a new ContentDialog to your project with the Add.New Item... menu.

Once you have your ContentDialog files you can customize the template to title its button "OK":

<ContentDialog
    x:Class="MyApp.AlertDialog"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="Alert"
    PrimaryButtonText="OK"  
    PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
    >

And include your alert.png along with the Title in the title template. A more advanced version would allow binding different icons for different purposes.You could also fill a path instead of drawing a png so the icon will scale more easily.

    <ContentDialog.TitleTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding}" Foreground="{ThemeResource PhoneAccentBrush}"/>
                <Image Source="/Assets/Images/alert.png" />
            </StackPanel>
        </DataTemplate>
    </ContentDialog.TitleTemplate>

And then include the rest of the contents in the ContentDialog's Xaml:

<StackPanel>
    <TextBlock x:FieldModifier="public" x:Name="ContentText" Style="{StaticResource ApplicationMessageBoxErrorStyle}" Text="Pease enter a valid plate number" />
</StackPanel>

This will put the OK button in its standardized location at the bottom right. If you want to include it with the text you can stick it in your StackPanel like in your sample code and not set the PrimaryButtonText on the ContentDialog.

0
votes

Create a Usercontrol in the project. Put the entire xaml code in the Usercontrol. Now you can use this Usercontrol as a popup wherever you want to use it.

Popup msgpopup = new Popup( );
msgpopup.child = new CustomisedMessageDialogControl(); //name of ur Usercontrol

And to open this Dialog simply,

msgpopup.IsOpen = true;