Great News! Coding4Fun Toolkit Controls are supported for Windows Phone 8.1- Part 1 (C#-Xaml)

Introduction:

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

• MetroFlow control (Windows 8.1 and WP 8.1)
• Prompts (Toast, User, Message, Input,About, PasswordInput) for WP 8.1
• BrushToBrushConverter now allows use of parameter to set output Opacity.

Note: In Version 2.0.8,support was added for windowsphone store 8.1 and now more controls were ported across in 2.0.9. So that 2.0.9 is second version for wp8.1 store :)

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);

Source code is available here.

Summary:

From this article we have learned "MessagePrompt Control in windowsphone 8.1 application".

FeedBack Note:

Please share your thoughts,what you think about this post,Is this post really helpful for you?I always welcome if you drop comments on this post and it would be impressive.

Follow me always at  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)