Use the coding4fun Toolkit

Coding4fun is an open-source class library that is very popular with WP developers. It is very easy for developers to get started with coding4fun. Download the coding4fun toolkit from codeplex. After the download is complete, extract the file to a folder with four DLL files. The list is as follows:

Create a Windows Phone 7 project and right-click "Reference" to add DLL reference:

Progressoverlay Animation

After adding the DLL reference, we can start. When my RSS is being downloaded, we need a progressoverlay animation or "loading screen ".

Add the following namespace to any page of the control you want:

1. Xmlns: Controls = "CLR-namespace: coding4fun. Phone. controls;
2. Assembly = coding4fun. Phone. Controls"

 

1. <Controls: progressoverlay name = "progressoverlay">
2. <Controls: progressoverlay. content>
3. <Textblock> loading </textblock>
4. </Controls: progressoverlay. content>
5. </Controls: progressoverlay>

Now we have a very beautiful loading screen. Of course, if you use mvvm or other similar models in progressoverlay, you need to add the visibility attribute. when the data is loaded, you need to disable it.

Dialog Box

Now I need a dialog box with a pretty interface and powerful functions. For example, if they click my Twitter, personal homepage, or e-mail to send the corresponding task.

Just a few lines of code:

1. VaR P = new aboutprompt ();
2. P. versionnumber = "2.0 ";
3. P. Show ("Michael
4. Crump "," @ mbcrump ",
5. "[Email protected]", @ http://michaelcrump.net /);

 

A beautiful and concise "about" dialog box can be implemented with just a few lines of code.

Input box

Coding4fun also comes with a cute input prompt box to capture information from the user.

 

The implementation code is also very simple:

1. Inputprompt input = new
2. Inputprompt ();
3. Input. Completed + = (S, e) =>
4. {
5. MessageBox. Show (E. Result. tostring ());
6. };
7. Input. Title = "inputbox ";
8. Input. Message = "What
9. Does a \ "Developer large \" T-shirt mean? ";
10. Input. Show ();

 

Phonehelper class

I like the phonehelper class very much because it makes it easy for you to get data from the wmappmanifest. xml file, for example, getting the version of the current application from wmappmanifest. xml.

You only need the following code:

1. Phonehelper. getappattribute ("version ");

 

Of course, you need to add the following namespace reference:

1. Using coding4fun. Phone. Controls. Data;

 

Without a powerful converter, you may not be able to easily display some cool controls. The booleantovisibility converter can convert the boolean type to the visibility type value.

For example, a textbox is displayed when checkbox is checked.

 

The Code is as follows:

1. <Phone: phoneapplicationpage. Resources>
2. <Converters: booleantovisibilityconverter X: Key = "booleantovisibilityconverter"/>
3. </Phone: phoneapplicationpage. Resources>
4. <Checkbox X: Name = "checkbox"/>
5. <Textblock text = "display text" visibility = "{binding elementname = checkbox, Path = ischecked, converter = {staticresource booleantovisibilityconverter}"/>

Roundbutton

 

The coding4fun toolkit provides the roundbutton and roundtogglebutton controls. roundtogglebutton is a UI component derived from the checkbox control and exposes some additional dependency attributes, as it is called. This is an extended round switch button with support for Automatic reverse image. The roundbutton control is a circular extension button that provides automatic reverse image support.

 

Before using the roundbutton and roundtogglebutton controls, we need to addCoding4fun. Phone. Controls. dllReferences

Step 1: add the prefix declaration of "c4f" to ensure that your page declares the namespace of "c4ftoolkit.

Xmlns: c4f = "CLR-namespace: coding4fun. Phone. controls; Assembly = coding4fun. Phone. Controls"

<C4f: roundbutton/>

<C4f: roundtogglebutton/>

The roundtogglebutton control inherits all attributes and events from the checkbox. The roundbutton control inherits all attributes and events from the button control.

ContentAttribute

This attribute is used by the parent user to set roundtogglebutton/roundbutton.

ImagesourceAttribute

Imagesource is a dependency attribute of the imagesource type. It is used to set or obtain images of the roundtogglebutton/roundbutton control.

OrientationAttribute

Orientation is a dependency attribute of the orientation type. It is used to set or obtain the direction of the roundtogglebutton/roundbutton control.

Examples

In the following example, I will use two icons

 

Note: The icons automatically change according to the theme changes of light.

Example1:RoundbuttonExample

This example shows how to set common attributes of the roundbutton control and add the following XAML code.

<Stackpanel orientation = "horizontal">

<C4f: roundbutton fontsize = "18" content = "OK" borderbrush = "cornflowerblue"/>

<C4f: roundbutton fontsize = "48" content = "48" background = "cornflowerblue"/>

<C4f: roundbutton foreground = "cornflowerblue" fontsize = "36" content = "36"/>

<C4f: roundbutton imagesource = "images/appbar.delete.rest.png" content = "delete"/>

</Stackpanel>

The following are the results in Dark and Light themes.

 

Example2:Roundbutton orientation and imagesourceAttribute usage

<C4f: roundbutton orientation = "horizontal" imagesource = "images/appbar.feature.search.rest.png" content = "horizontal text"/>

 

Example3. roundtogglebuttonControl example

This example demonstrates how to setRoundtogglebuttonControl common attributes, add the following XAML code

<Stackpanel orientation = "horizontal">

<C4f: roundtogglebutton fontsize = "18" content = "OK" borderbrush = "cornflowerblue"/> <c4f: roundtogglebutton fontsize = "48" content = "48" background = "cornflowerblue"/> <c4f: roundtogglebutton foreground = "cornflowerblue" fontsize = "36" content = "36"/>

<C4f: roundtogglebutton imagesource = "images/appbar.delete.rest.png" content = "delete"/>

</Stackpanel>

Example4:Roundtogglebutton orientation and imagesourceAttribute usage

<C4f: roundtogglebutton orientation = "horizontal" imagesource = "images/appbar.feature.search.rest.png" content = "horizontal text"/>

 

Example5:Roundbutton and RoundtogglebuttonDisable controls

<C4f: roundbuttonX: Name = "BTN"Isenabled = "false"Orientation = "horizontal"Imagesource = "images/appbar.delete.rest.png"

Content = "disabled button"/>
 

 

Use the coding4fun Toolkit