Coding4Fun Toolkit for WP7 Overview and Getting Started

published on: 1/21/2011 | Views: N/A | Tags: C4FToolkit

by WindowsPhoneGeek

This post is an overview of the new  Coding4Fun Windows Phone Toolkit. It offers developers additional controls and helper classes for Windows Phone 7 application development, designed to match the rich user experience of the Windows Phone 7.  The official Coding4Fun tools were released yesterday by the Microsoft Coding4fun team, as always the full source code and a sample test project are also available (the whole toolkit is completely FREE). Some of the "geeks" involved in this cool project are: Jeff Wilcox, Thomas Claudius Huber, Kevin Marshall, Stephanie Hertrich and others.

This is the first in a series of articles that run through the new components from the Coding4Fun  toolkit.  In the last few months we covered all controls from the Silverlight for Windows Phone 7 Toolkit in a collection of  "21 Toolkit in Depth articles", so it is time for a new one.

Coding4Fun Toolkit Included Components

The initial set includes the following:

Controls:

• About Prompt
• Input Prompt
• Progress Overlay (+ ProgressBar)
• Round Button
• Round Toggle Button
• Memory Counter
• TimeSpan Picker
• AboutPersonItem

 

 

 

 

 

 

Abstract Classes:

• PopUp class for things like an Input Prompt that can be GPU accelerated unlike the built in Popup control.

Converters:

• Boolean to Visibility
• String To Visibility
• Themed Image Converter
• Inversed Theme Image Converter
• Visibility to Boolean

Binding Helpers:

• Textbox update
  Example: <TextBox Text="{Binding FooBar, Mode=TwoWay}" local:TextBoxBinding.UpdateSourceOnChange="True" />

Data Helpers:

• PhoneHelper for getting data out of the WMAppManifest file
  Example:  PhoneHelper.GetAppAttribute("Title")

Future Control ideas

• Slider Control
• Color Picker Control
• Indeterminate Progress Control with less CPU than the progress bar

 

Getting Started

NOTE: These controls are available for download including the source code but it is not included in the default download package (at least for now only some dlls are in), however you can download the full source code and the sample project from the Source Code section under  Change Set 61253.

To begin with using the toolkit, first add some references to Coding4Fun.Phone.Controls.Toolkit.dll,Coding4Fun.Phone.Controls.dll, Coding4Fun.Phone.Site.Controls.dll. It depends on your need whish of these assemblies you will use.

You have to include the following namespace for most of the controls (other than TimeSpan):

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

For TimeSpan the following namespace is needed:

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

Here are some examples of how to use these controls in a Windows Phone 7 application.

About Prompt

 

 

 

 

 

 

 

 

 

private void About_Click(object sender, RoutedEventArgs e)
{
    var about = new AboutPrompt();
    about.Completed += about_Completed;
    about.Show();
}

AboutPersonItem

 

 

 

 

 

 

 

<Controls:AboutPersonItem
                    WebSiteUrl="www.twitter.com/clintrutkas" 
                    AuthorName="Clint Rutkas"
                    EmailAddress="foo@bar.com"
                    Role="me" />

Buttons

<Controls:RoundButton 
                    HorizontalAlignment="Center"
                    Click="RoundButton_Click"
                    ImagePath="/Coding4Fun.Phone.TestApplication;component/Media/icons/{0}/appbar.check.rest.png" />
                <Controls:RoundButton 
                    HorizontalAlignment="Center"
                    Content="With Text"
                    Click="RoundButton_Click"
                    ImagePath="/Coding4Fun.Phone.TestApplication;component/Media/icons/{0}/appbar.check.rest.png" />

                <TextBlock>Round Toggle Button</TextBlock>
                <Controls:RoundToggleButton 
                    HorizontalAlignment="Center"
                    ImagePath="/Coding4Fun.Phone.TestApplication;component/Media/icons/{0}/appbar.check.rest.png" />
                <Controls:RoundToggleButton 
                    HorizontalAlignment="Center"
                    Content="With Text"
                    ImagePath="/Coding4Fun.Phone.TestApplication;component/Media/icons/{0}/appbar.check.rest.png" />

Input Prompt

This is a kind of popup control that prompt user to enter input.

 

 

 

 

 

 

 

 

private void Input_Click(object sender, RoutedEventArgs e)
{
    var input = new InputPrompt();
    input.Completed += input_Completed;
    input.Title = "Basic Input";
    input.Message = "I'm a basic input prompt";
    input.Show();
}

Memory Counter

 

 

 

 

 

 

<Controls:MemoryCounter />

Overlays

This is an overlay control which basically exposes two properties:Content, HasGesturesDisabled. Its ControlTemplate consists of PerformanceProgressBar element and Contentcontrol.

 

 

 

 

 

 

 

<Controls:ProgressOverlay Name="progressOverlay" >
    <Controls:ProgressOverlay.Content>
        <TextBlock>Loading</TextBlock>
    </Controls:ProgressOverlay.Content>
</Controls:ProgressOverlay>

Progress bar

This is the well knows Jeff Wilcox progress bar with a small adjustment.

 

 

 

 

 

 

 

  <Controls:PerformanceProgressBar  Name="ToggleProgressBar" />

TimeSpan Picker

You need to include the following namespace:

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

This control is based an the Silverlight Toolkit and modified so that it has Max and Step properties which can be used in order to set a timespan interval. This control can display data in varies ways and you can control this using the ValueStringFormat property like for example: ValueStringFormat="{}{0:hh} - {0:mm} - {0:ss}".

 

 

 

 

 

 

<c4fToolkit:TimeSpanPicker  
                    Max="{Binding TimeSpan2Hour}" 
                    Step="{Binding TimeSpan10Min}"/>

That was all about Coding4Fun Windows Phone Toolkit  in short. In the next few posts I will describe each one of the controls in depth.

I hope that the article was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Coding4Fun Toolkit for WP7 Overview and Getting Started'

Title Your Name

Comment