Coding4Fun Toolkit Controls Are Supported For Windows Phone 8.1 - Part 1

Introduction

Recently, I found from Twitter the "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 the Coding4Fun toolkit v2.0.9 for Windows Platform dev has been released and the packages are available for download from Nuget.

In Windows Phone 8.0 we got many additional controls from Coding4Fun. The Coding4Fun Toolkit has multiple controls and useful items for XAML based applications. And the current version v2.0.9 includes the following controls.

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

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

For more information, please visit this link. However from the preceding available controls, this article will teach you about "How to use MessagePrompt control in Windows Phone Store 8.1?".

Requirements:

• This sample is targeted for the Windows Phone Store 8.1 OS, so ensure you've downloaded and installed the Windows Phone 8.1 SDK. For more information, see Get the SDK.
  
  
• I assume you're going to test your app on the Windows Phone emulator. If you want to test your app on a phone, you need to use some additional steps. For more info, see Register your Windows Phone device for development.
  
  
• This article 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 a new project. Type Blank App (for example: 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, enter the following command.

Install-Package Coding4Fun.Toolkit.Controls,



This will add the Coding4Fun.Toolkit.Controls.dll to the "References" of the current project as in the following.



1.2 How to use MessagePrompt control in Windows Phone Store 8.1

In this article I will explain the MessagePrompt control from the Coding4fun Toolkit. Fortunately now the MessagePrompt control is available for WP8.1. As the name implies it is a kind of extended popup that displays a message. MessagePrompt can display various content like Title, composite Body content, custom buttons, and so on. Let's make the following UI in the MainPage.xaml page to use the MessagePrompt control in different ways.

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

Press F5 to run the project and your screen will be shown like this:



Generally the MessagePrompt is designed to be used in code. The sample code should look as in:

Simple MessagePrompt:

private void SimplePopUp_Click(object sender, RoutedEventArgs e)
{
    var ObjMessagePrompt = new MessagePrompt
    {
        Title = "Simple MessagePrompt",
        Body = "Now Coding4Fun MessagePrompt is \n supported for windowsphone 8.1",
        IsAppBarVisible = true,//for showing rounded ok button
        IsCancelVisible = false//to hide rounded cancel button
    };

    ObjMessagePrompt.Show();
}

Here is an example showing how to use the MessagePrompt control. You can use the 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 elements 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:

<UserControl
    x:Class="Coding4Fun_WindowsPhoneStore.UcMsgBody"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Coding4Fun_WindowsPhoneStore"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">

    <Grid>
        <Border Background="YellowGreen" Height="100">
            <TextBlock Text="Generate Body Text with Xaml" TextWrapping="Wrap" Margin="2" VerticalAlignment="Center"/>
        </Border>
    </Grid>
</UserControl>

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

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

Custom MessagePrompt with C#

We can also add our custom buttons for the "Ok" and "Cancel" buttons like this.

MessagePrompt ObjMessagePrompt;
private void CustomPopupCode_Click(object sender, RoutedEventArgs e)
{
    ObjMessagePrompt = new MessagePrompt();
    ObjMessagePrompt.Title = "C#";
    ObjMessagePrompt.VerticalAlignment = VerticalAlignment.Center;//Align message prompt to center.
    ObjMessagePrompt.Message = "Custom MessagePrompt with 'Cancel' and 'Ok' button";
    ObjMessagePrompt.Background = new SolidColorBrush(Colors.Gray);
    ObjMessagePrompt.ActionPopUpButtons.Clear();//Clearing all defualt messageprompt buttons.

    Button customCancelButton = new Button() { Content = "Cancel" };
    customCancelButton.Click += new RoutedEventHandler(customButton_Click);
    ObjMessagePrompt.ActionPopUpButtons.Add(customCancelButton);

    Button customOkButton = new Button() { Content = "Ok" };
    customOkButton.Click += new RoutedEventHandler(customButton_Click);
    ObjMessagePrompt.ActionPopUpButtons.Add(customOkButton);

    //Making Space between cancel and ok buttons
    ObjMessagePrompt.ActionPopUpButtons[0].Margin = new Thickness(20, 0, 0, 0);
    ObjMessagePrompt.ActionPopUpButtons[1].Margin = new Thickness(50, 0, 0, 0);
    ObjMessagePrompt.Show();
}
void customButton_Click(object sender, RoutedEventArgs e)
{
    ObjMessagePrompt.Hide();//To close MessagePrompt
}

Here you may note the following useful points:  

1. For the MessagePrompt alignments, to align center:
   

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

2. To remove MessagePrompt as the default "Ok" symbol:
   

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

3. To add a custom button:
   

   ObjMessagePrompt.ActionPopUpButtons.Add(customOkButton);

Summary

From this article we have learned about the "MessagePrompt Control in Windows Phone 8.1 application".

This article is also available at my original blog.