Post
Ask Question

Coding For Fun Toolkit: Demo I

Introduction

Hello, friends. After a very long time, here again comes my series of articles. This article decribes the new exciting Toolkit for Windows Phone 8 of the "Coding4 FunToolkit", that provides many more exciting controls to include in our Windows Phone app and make our app look more cool and more user friendly with less effort.

It provides Controls like:

  • About Prompt
  • Input Prompt
  • Message Prompt
  • Password Input Prompt
  • Color Slider and Picker
  • Round Button
  • Round Toggle Button
  • Progress Overlay
  • Toast Prompt
  • Memory Counter
  • Color Hexagon Picker and many more.

This article explains a few of them and in our next article we will discuss the rest of them.

So here we go.

Step 1

Create a new Windows Phone project from your project template and provide it a name as you choose (like I have given "Coding4FunDemo1").

Now open the "Solution Explorer" window and right-click on your project. A list will be opened; click on the "Manage NuGet Packages.." option.

Manage NuGet Packages

After clicking on the "Manage NuGet Packages.." option a new Nuget window will be poped up. Now search for "Coding4Fun Toolkit" in the search box and it will then show you the list of toolkits available for your search term "Coding4Fun Toolkit". Find the "Coding4Fun Toolkit-Complete" and click on the install button.

Coding4Fun Toolkit-Complete

Now "Coding4Fun Toolkit" will be added to your project.

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 "About Prompt" control in your project.

Adding the "About Prompt" control through XAML:

  1. <coding4fun:AboutPrompt x:Name="aboutPrompt" /> 

It has many properties like:

  • Title
  • Body
  • Footer
  • Water Mark
  • Version Number and so on

However adding the "About Prompt" control through XAML is not usually prefered. It is suggested to add theses type of controls through the C# Code.

Step 4

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

  1. <coding4fun:AboutPrompt x:Name="aboutPrompt" /> 

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

Add the following line of code in your XAML file:

  1. <Button Content="About Prompt" x:Name="aboutPromptBtn" Click="aboutPromptBtn_Click" HorizontalAlignment="Left" Height="82" Margin="78,69,0,0" VerticalAlignment="Top" Width="314"/> 

Your MainPage will look like this:



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 About Button Control Event Method stub and add the following line of code:

  1. private void aboutPromptBtn_Click(object sender, RoutedEventArgs e)  
  2. {  
  3.     //creating Instance for AboutPrompt Control  
  4.     AboutPrompt prompt = new AboutPrompt();  
  5.   
  6.     //Adding title  
  7.     prompt.Title = "Coding4Fun Toolkit";  
  8.     //Adding a TextBlock Control in the Body of  
  9.    // AboutPrompt Control  
  10.   
  11.     prompt.Body = new TextBlock {Text="Hello   
  12.                      Welcome to C-sharp Corner",  
  13.            TextWrapping=TextWrapping.Wrap };  
  14.     //Adding Footer  
  15.     prompt.Footer = "Coding4Fun Toolkit Article";  
  16.     //Adding Version Number  
  17.     prompt.VersionNumber="v 1.0";  
  18.   
  19.     //Adding a Completed Event that is Whenever a   
  20.    // user click  
  21.   //on the 'Ok' Button given in About Prompt it   
  22.  // will fire  
  23.  prompt.Completed += prompt_Completed;  
  24.   
  25.  prompt.Show();  
  26.   
  27. } 

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

  1. void prompt_Completed(object sender,  
  2.     PopUpEventArgs<object, PopUpResult> e)  
  3. {  
  4.    //The Code Below will be executed after the   
  5.   //user have clicked the 'OK' button of  
  6.  // AboutPrompt  
  7.     MessageBox.Show("About Prompt Demonstrated");  
  8. } 

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



Now when the user presses the Check Button, or you can say the Ok Button, then the line of code that we added will be executed. Here we have added a Message Box. So after pressing the Check/OK Button the MessageBox will be shown.



You can however add whatever you want to execute in the Completed event.

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

Thank You .

If you have any query, feel free to ask.

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


Similar Articles