Coding For Fun Toolkit: Demo II

Coding For Fun Toolkit: Demo I

Introduction

Hello friends, here is our next article of our series for "Coding For Fun Toolkit".

In this article we will learn about the two very interesting controls "InputPrompt" and "MessagePrompt".

Both of the controls are very useful when you want to provide some information to the user in your app. You might now be wondering, for this we have the MessageBox control already, so why do we need the Coding4Fun toolkit? Yes it has the similar functionality but with major differences and more features.

From the "InputPrompt" Control you can get input from the user while prompting a small window just like a Message Box.

And from "MessagePrompt" you can provide information just like in a MessageBox but with more functionality in your hand.

Here are the Images for both of the controls.

Step 1

Create a new Windows Phone project from your project template and give it a name.

Now add the "Coding4Fun" toolkit to your project.

To understand how to add the toolkit and more about the Coding4Fun Toolkit visit:

Coding For Fun Toolkit: Demo I

Step 2

Now it's time to add the reference for the toolkit.

In your XAML portion add the following namespace:

xmlns:coding4fun="clr-namespace:Coding4Fun.Toolkit.Controls;assembly=Coding4Fun.Toolkit.Controls"

Step 3

Now add the "Input Prompt" control to your project.

Adding an "Input Prompt" control using XAML:

<coding4fun:InputPrompt x:Name="inputPrompt" />

It has many properties like:

• Title
• Message
• Body
• Value
• InputScope and many more

However adding the "Input Prompt" control using XAML is not usually preferred. It is suggested to add theses types of controls using the C# Code so that we have more controls over it.

Step 4

Remove the XAML code that you have added for the "About Prompt"; that is, remove the following line of code:

<coding4fun:InputPrompt x:Name="inputPrompt" />

Now add a Button Control to your project so that when we will click the Button the "About Prompt" Control will be shown.

Add the following line of code in your XAML file

<Button Content="Input Prompt" x:Name="InputPromptBtn" Click="InputPromptBtn_Click" HorizontalAlignment="Left" Height="99" Margin="81,86,0,0" VerticalAlignment="Top" Width="262"/>

Your MainPage will look like this:



Step 5

Navigate to your code that is in your "MainPage.xaml.cs" file add the following line of code:

using Coding4Fun.Toolkit.Controls;

Navigate to your Input Prompt Button Control Event Method stub and add the following line of code:

private void InputPromptBtn_Click(object sender, RoutedEventArgs e)
        {
            //Creating instance for InputPrompt
            InputPrompt inputPrompt = new InputPrompt();
            //Adding Title For InputPrompt
            inputPrompt.Title = "Input Prompt Dempo";
            //Adding Message for InputPrompt
            inputPrompt.Message = "First Demo Input Prompt Application";
            //Value property will be shown on the
           //Text Box in the Input Prompt
          //helps to inform user what to Enter
         //in The Text Box
            inputPrompt.Value = "Enter your Input Text";
           //InputScope for the Text Box inside the
          // InputPrompt
          //Note: Add the following using directives for
         // InputScope
        //using System.Windows.Input;

inputPrompt.InputScope = new InputScope { Names =
                                     { new
                                InputScopeName()
                                     { NameValue =
                 InputScopeNameValue.NameOrPhoneNumber}
                                     } };

            //Event is Fired after the user Click on the
            //Check Round Button
            inputPrompt.Completed +=
                                    inputPrompt_Completed;


            //Show the InputScope
            inputPrompt.Show();

        }

In the Completed Event Method stub add the following line of code:

void inputPrompt_Completed(object sender, PopUpEventArgs<string, PopUpResult> e)
        {
            //The Code Below will be executed after the
            //user have clicked the Round Check button of
           // InputPrompt
            MessageBox.Show("Input Scope Round Check
                               Button is Clicked");
        }

That's it. Compile and run your application and whenever you click on the Input Prompt Button Control a window will popup like this:



Now when the user presses the Round Check Button the Line of code that we have added will be executed.

Step 6

That was all about the "InputScope" Control, now we will learn the new control, the "MessagePrompt" Control.

Go to your MainPage and add a Button Control to your project named "Message Prompt".

<Button Content="Message Prompt" HorizontalAlignment="Left" Height="103" Margin="81,277,0,0" VerticalAlignment="Top" Width="262" x:Name="msgPrompt" Click="msgPrompt_Click"/>

Your MainPage will then be like this:



Step 6

Navigate to your Message Prompt Button Control Event Method stub and add the following line of code:

So that's it for this article now. We will cover more about the Coding4Fun Toolkit in our future article.

Thank you.

If you have any query then feel free to ask.

I am embedding the Source Code here so that you can go through it.