Syncfusion SfColorPicker in Windows Phone 8

Syncfusion provides enterprise-class developer tools for free under their community license. This is going to be an introduction into their controls.

Other post in the series on Syncfusion controls for Windows Phone 8.1 are

Syncfusion Busy Indicator in Windows Phone 8.1
Syncfusion TextBoxExt Windows Phone 8.1
To get access to these controls please sign up at http://www.syncfusion.com/products/windows-phone

The color picker control exposes color selection through a touch friendly interface. All settings including the RGB values can be manipulated purely using touch.

Step 1: Create a new Windows Phone project

Create a new Windows Phone 8.1 project using the Blank App(XAML) template.

Step 2: Add Reference to the Syncfusion dll

Right click on the name of the project in solution explorer and choose Add>Reference. From the dialog box that appears choose Syncfusion 8.1 controls for WP XAML and add it to your project. These references will enable you to use Syncfusion controls in your app.

Step 3: Add the namespace to your xaml page

Step 4: Add the following code to your xaml page

We added a TextBlock (txtTitle), two Color Picker controls (sfColorPickerPage & sfColorPickerText) one for changing the page background colour & one for changing TextBlock foreground colour and lastly another TextBlock (txtStatus) for displaying which Color Picker is active on the screen.

Step 5: Add the following code to your page code behind

Note: with the ConvertStringToColor method, make sure to use the Windows.UI namespace.

Download the full project’s source code for reference.
Download Syncfusion SfColorPicker

Syncfusion TextBoxExt Windows Phone 8.1

Syncfusion provides enterprise-class developer tools for free under their community license. This is going to be an introduction into their controls.

To get access to these controls please sign up at http://www.syncfusion.com/products/windows-phone

Other posts in this series.

Syncfusion Busy Indicator in Windows Phone 8.1

TextBoxExt is an extended version of TextBox control.

Step 1: Create a new Windows Phone project

Create a new Windows Phone 8.1 project using the Blank App (XAML) template.

 

Step 2: Add Reference to the Syncfusion dll

Right click on the name of the project in solution explorer and choose Add>Reference. From the dialog box that appears choose Syncfusion 8.1 controls for WP XAML and add it to your project. These references will enable you to use Syncfusion controls in your app.

Step 3: Add the namespace to your xaml page

 

Step 4: Add the control

Since this control inherits a lot of its behaviour from the standard TextBox control, I’ll only be discussing one of its main features which is the Watermark property.
Watermark – The control will prompt the user with some information, when it is not in focus and contains an empty string.

By default the Watermark property is a simple string, but by utilizing the WatermarkTemplate property we can further customize it.

Step 5: Add the following code to your xaml page.

 We created a DataTemplate called WaterMarkTemplate. In the DataTemplate we defined a StackPanel with a horizontal orientation & a height of 40. We add an Image & TextBox control to our StackPanel, the source for our image is the standard search icon (C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.1\Icons\Light).

Step 6: Add  code to enable watermark

Add the following code to your SfTextBoxExt control to enable the Watermark

Download Syncfusion SfTextBoxExt tut

Syncfusion Busy Indicator in Windows Phone 8.1

Syncfusion provides enterprise-class developer tools for free under their community license. This is going to be an introduction into their controls.

 

To get access to these controls please sign up at http://www.syncfusion.com/products/windows-phone

 

The Busy Indicator control as the name suggests, indicates to your users that your app is busy doing something. There are 30 different animations to choose from.

Step 1: Create a new Windows Phone project

Create a new Windows Phone 8.1 project using the Blank App(XAML) template.

Step 2: Add Reference to the Syncfusion dll

Right click on the name of the project in solution explorer and choose Add>Reference. From the dialog box that appears choose Syncfusion 8.1 controls for WP XAML and add it to your project. These references will enable you to use Syncfusion controls in your app. Refer to our post on

How to integrate a Toolkit or Third party SDK with windows phone app using NuGet Package Manager

 

 

Step 3: Add the namespace to your xaml page

Add the following namespace in your page.

Step 4: Add the control

Next place the syncfusion control in your page.

  • The IsBusy property in the control is used to determine whether an animation needs to be executed or not.
  • The AnimationTypes property for the control allows the user to set one of the animations from the built-in animations as the busy indicator.
  • The Header is displayed below the animation. The Header property can be used to get or set the content which indicates the information related to loading.

     

This control is bindable, download the project for an example of this.

All this can be done programmatically by using the following code,

Download SfBusyIndicator