Introduction:

Yesterday i found from twitter as 'Coding4Fun Toolkit is Supported for Windows Phone 8.1'.And i want to be say thanks to Hermit Dave for sharing this info on twitter. Now Coding4Fun toolkit v2.0.9 for Windows Platform dev has been released and packages are available for download from Nuget.

In WindowsPhone 8.0 we got lot of additional controls from Coding4Fun,The Coding4Fun Toolkit has multiple controls and useful items for XAML based applications.And current version v2.0.9  includes following controls. 

For more information, please visit this link.However from above available controls,This article will teach you about 'How to use MessagePrompt control in WindowsPhone store 8.1 ?'. 

Requirements:

  • This sample is targeted for windowsphone store 8.1 OS,So make sure you’ve downloaded and installed the Windows Phone 8.1 SDK. For more information, see Get the SDK.
  • I assumes that you’re going to test your app on the Windows Phone emulator. If you want to test your app on a phone, you have to take some additional steps. For more info, see Register your Windows Phone device for development.
  • This post assumes you’re using Microsoft Visual Studio Express 2013 for Windows.

Description:

First of all, Open Microsoft Visual Studio Express 2013 for Windows and then create new project type Blank App(Ex:Coding4Fun_WindowsPhoneStore)

 

1.1 Installation of Coding4Fun Toolkit:

Install the Coding4Fun Toolkit nuget package into the solution by starting the Package Manager PowerShell by following:

Tools->Library Package Manager->Package Manager console

Once the powershell command prompt is running, type the following command

 

Install-Package Coding4Fun.Toolkit.Controls, 

This will add Coding4Fun.Toolkit.Controls.dll in 'References' of the current project like below.

1.2 How to use MessagePrompt control in WindowsPhone store 8.1 ?:

In this article I am going to explain about the MessagePrompt control from the Coding4fun Toolkit.Fortunately now MessagePrompt control is available for WP8.1. As its name says it is a kind of extended popup  that displays a message. MessagePrompt can display different  content like Title, composite Body content, custom buttons, etc .

Let's make following UI in MainPage.xaml page to use MessagePrompt control in different ways.

 

  1. <Grid Background="White">  
  2.         <StackPanel Margin="5">  
  3.             <TextBlock Text="WP8.1:Coding4Fun MessagePrompt" FontSize="24" Foreground="#FF248ECB"/>  
  4.             <Button Margin="0,30,0,0" HorizontalAlignment="Stretch" Content="Simple MessagePrompt" Click="SimplePopUp_Click" Background="#FF68D18A"></Button>  
  5.             <Button HorizontalAlignment="Stretch" Content="Custom MessagePrompt With Xaml" Click="CustomPopupXaml_Click" Background="#FF68D18A"></Button>  
  6.             <Button HorizontalAlignment="Stretch" Content="Custom MessagePrompt With C# Code" Click="CustomPopupCode_Click" Background="#FF68D18A"></Button>  
  7.         </StackPanel>  
  8.     </Grid>  

 

Press F5 to run the project and your screen will be appeared like this,

Generally the MessagePrompt is designed to be used in code. The sample code should looks like:

Simple MessagePrompt:


  1. private void SimplePopUp_Click(object sender, RoutedEventArgs e)  
  2.         {  
  3.             var ObjMessagePrompt = new MessagePrompt  
  4.             {  
  5.                 Title = "Simple MessagePrompt",  
  6.                 Body = "Now Coding4Fun MessagePrompt is \n supported for windowsphone 8.1",  
  7.                 IsAppBarVisible = true,//for showing rounded ok button  
  8.                 IsCancelVisible = false//to hide rounded cancel button  
  9.             };  
  10.   
  11.             ObjMessagePrompt.Show();  
  12.         }  

 

Here is an example shows how to use MessagePrompt control. You can use IsCancelVisible  property to Show/Hide the MessagePrompt `s  cancel button. 

Custom MessagePrompt Body with Xaml :

Generally the MessagePrompt is designed to be used in code but sometimes users want to put some composite elements into the popup body so in this case it is easy to define these element in XAML. Here is one possible solution with a UserControl. Just create a new UserControl named UcMsgBody.xaml and add the following code into it:

 

  1. <UserControl  
  2.     x:Class="Coding4Fun_WindowsPhoneStore.UcMsgBody"  
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5.     xmlns:local="using:Coding4Fun_WindowsPhoneStore"  
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  8.     mc:Ignorable="d"  
  9.     d:DesignHeight="300"  
  10.     d:DesignWidth="400">  
  11.   
  12.     <Grid>  
  13.         <Border Background="YellowGreen" Height="100">  
  14.             <TextBlock Text="Generate Body Text with Xaml" TextWrapping="Wrap" Margin="2" VerticalAlignment="Center"/>  
  15.         </Border>  
  16.     </Grid>  
  17. </UserControl>  

 

After that go back to MainPage.xaml.cs and add the following code:

 

  1. private void CustomPopupXaml_Click(object sender, RoutedEventArgs e)  
  2.         {  
  3.             MessagePrompt ObjMessagePrompt = new MessagePrompt();  
  4.             ObjMessagePrompt.VerticalAlignment = VerticalAlignment.Center;//Align message prompt to center.  
  5.             ObjMessagePrompt.Title = "Xaml";  
  6.             ObjMessagePrompt.Body = new UcMsgBody();  
  7.             ObjMessagePrompt.Show();  
  8.         }  

 

Custom MessagePrompt with C#:

We can also add our custom buttons for 'Ok' & 'Cancel' buttons like this.

 

  1.         MessagePrompt ObjMessagePrompt;  
  2.         private void CustomPopupCode_Click(object sender, RoutedEventArgs e)  
  3.         {  
  4.             ObjMessagePrompt = new MessagePrompt();  
  5.             ObjMessagePrompt.Title = "C#";  
  6.             ObjMessagePrompt.VerticalAlignment = VerticalAlignment.Center;//Align message prompt to center.  
  7.             ObjMessagePrompt.Message = "Custom MessagePrompt with 'Cancel' and 'Ok' button";  
  8.             ObjMessagePrompt.Background = new SolidColorBrush(Colors.Gray);  
  9.             ObjMessagePrompt.ActionPopUpButtons.Clear();//Clearing all defualt messageprompt buttons.  
  10.   
  11.             Button customCancelButton = new Button() { Content = "Cancel" };  
  12.             customCancelButton.Click += new RoutedEventHandler(customButton_Click);  
  13.             ObjMessagePrompt.ActionPopUpButtons.Add(customCancelButton);  
  14.   
  15.             Button customOkButton = new Button() { Content = "Ok" };  
  16.             customOkButton.Click += new RoutedEventHandler(customButton_Click);  
  17.             ObjMessagePrompt.ActionPopUpButtons.Add(customOkButton);  
  18.   
  19.             //Making Space between cancel and ok buttons  
  20.             ObjMessagePrompt.ActionPopUpButtons[0].Margin = new Thickness(20, 0, 0, 0);  
  21.             ObjMessagePrompt.ActionPopUpButtons[1].Margin = new Thickness(50, 0, 0, 0);  
  22.             ObjMessagePrompt.Show();  
  23.         }  
  24.         void customButton_Click(object sender, RoutedEventArgs e)  
  25.         {  
  26.             ObjMessagePrompt.Hide();//To close MessagePrompt  
  27.         }  

Here you may note some useful points:

1)MessagePrompt alignments:

To align center:

ObjMessagePrompt.VerticalAlignment = VerticalAlignment.Center;//Align message prompt to center.

2)To Remove MessagePrompt Default 'Ok' Symbol:

ObjMessagePrompt.ActionPopUpButtons.Clear();//Clearing all defualt messageprompt buttons.

3)To add custom button:

ObjMessagePrompt.ActionPopUpButtons.Add(customOkButton);

You may read more about this at MyBlog

Help me with feedback:

Thank you for reading my article. Drop all your questions/comments in QA tab give me your feedback with  star rating (1 Star - Very Poor, 5 Star - Very Nice).