Post
Ask Question

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:

  1. 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:

  1. <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:

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

  1. <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:

Coding For Fun Toolkit

Step 5

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

  1. using Coding4Fun.Toolkit.Controls; 

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

  1. private void InputPromptBtn_Click(object sender, RoutedEventArgs e)  
  2.         {  
  3.             //Creating instance for InputPrompt  
  4.             InputPrompt inputPrompt = new InputPrompt();  
  5.             //Adding Title For InputPrompt  
  6.             inputPrompt.Title = "Input Prompt Dempo";  
  7.             //Adding Message for InputPrompt  
  8.             inputPrompt.Message = "First Demo Input Prompt Application";  
  9.             //Value property will be shown on the  
  10.            //Text Box in the Input Prompt  
  11.           //helps to inform user what to Enter  
  12.          //in The Text Box  
  13.             inputPrompt.Value = "Enter your Input Text";  
  14.            //InputScope for the Text Box inside the  
  15.           // InputPrompt  
  16.           //Note: Add the following using directives for  
  17.          // InputScope  
  18.         //using System.Windows.Input;  
  19.               
  20. inputPrompt.InputScope = new InputScope { Names =   
  21.                                      { new  
  22.                                 InputScopeName()   
  23.                                      { NameValue =   
  24.                  InputScopeNameValue.NameOrPhoneNumber}  
  25.                                      } };  
  26.   
  27.             //Event is Fired after the user Click on the  
  28.             //Check Round Button  
  29.             inputPrompt.Completed +=   
  30.                                     inputPrompt_Completed;  
  31.   
  32.               
  33.             //Show the InputScope   
  34.             inputPrompt.Show();  
  35.   
  36.         } 

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

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

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

Coding For Fun Toolkit1

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

  1. <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:

Coding For Fun Toolkit2

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.


Similar Articles