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

Navigation in Windows Phone 8 and 8.1

In this post we will discuss how to navigate between different pages in Windows Phone 8.1 and Windows Phone 8 apps.

Silverlight

To navigate to another page in a WP Silverlight app, using the following code.
To pass information between pages, save an object in a state like so,

On the navigated page in the constructor, use the following code to retrieve the object.
To view the pages in the back stack, use the following code.

To remove the previous page from the stack, which is useful after a user has logged in & you don’t want them going back to the login page. Use the following method.
It’s best to use the above method in the OnNavigatedTo method in the page code behind.

WinRT

To navigate to another page in a WP WinRT app, using the following code.

To pass information, pass the object as a parameter.
In the navigated page code behind, in the OnNavigatedTo method use the following code to retrieve the object.

To go back, use this simple method,
To remove the previous page from the stack, which is useful after a user has logged in & you don’t want them going back to the login page. Use the following method.

It’s best to use the above method in the OnNavigatedTo method in the page code behind.

Download Navigation in Silverlight

Download Navigation in WinRT

Cancelling an Async Task

Sometimes you may need to cancel a running asynchronous task, this following tutorial will show you how. Here’s how your task will work without an async cancellation.

Step 1: Create a new Windows Phone 8/8.1 Project

Start Visual Studio and create a new Windows Phone 8/8.1 project.

Step 2: In the MainPage.xaml paste the following code

Step 3: In the MainPage.xaml.cs above the constructor declare our CancellationTokenSource

 

CancellationTokenSource.Token property of cancellationToken is passed into our asynchronous task as an argument, while doing work the task can check the token to see if cancellation has been requested.

 

Step 4: Thereafter paste the following methods below the constructor


When the restart button is clicked, we cancel the current CancellationTokenSource which will stop the running task, we then instantiate a new CancellationTokenSource & start a new task. Here’s how it works,

Download the project source code and use it as a reference.

Download AsyncCancel.zip

Making an App Catalog with ListBox for Windows Phone 8

All apps should include an about page as a way to engage with your users. If you’re part of DVLUP this is a basic requirement of most challenges. The about page should describe your app, you the author & include your contact details in case your users want to provide any feedback. Also it can be used to showcase your other apps. I earlier wrote an tutorial on using app catalog using Telerik Controls.

Making an App Catalog with Telerik RadControl Data Bound ListBox for Windows Phone 8

As the controls are not free, you all may not have access to it. In this tip I am providing you the source code of the project without using Telerik Controls. You can refer the previous post for the steps.

AppCatalog

Making an App Catalog with Telerik RadControl Data Bound ListBox for Windows Phone 8

All apps should include an about page as a way to engage with your users. If you’re part of DVLUP this is a basic requirement of most challenges. The about page should describe your app, you the author & include your contact details in case your users want to provide any feedback. Also it can be used to showcase your other apps, I’m going to show you a fun way of doing this.

Step 1: Create a new Telerik Windows Phone 8 Project.

The wizard will automatically add the required references & create an about page for you.

Step 2: In the About.xaml add the following namespaces to your page

At the top of About.xaml add the following references.

 

Step 3: Add the following code to your XAML for the RadDataBoundListBox

I’ve left the RadDataBoundListBox properties pretty much standard, I did however add a tap event handler, which occurs whenever an item in the RadDataBoundListBox is tapped.

ItemAddedAnimation – Is the animation that occurs when an item is added to the RadDataBoundListBox.

PanAndZoomImage – Is a Telerik image control, it features a busy indicator which the standard image control doesn’t (I’ll cover this control later on).

RadBusyIndicator is a Telerik control that indicates that the app is busy doing ‘something’ (I’ll cover this control later on).

StackVirtualizationStrategyDefinition – Is the way items are visualized in the RadDataBoundListBox, in this case its orientation is set to horizontal.

Step 4: Declare our Lists to hold our information

We’re using Lists as they’re easier to work with than Arrays.

 

Step 5: Add to our List of Objects & set the ItemsSource for the RadDataBoundListBox

In the for loop we’re creating a new Catalog object & adding it to the list, finally we set the RadDataBoundListBox ItemsSource to the List of Objects.

Step 6: Add the code for the tap event handler

First we get the index of the selected item in the RadDataBoundListBox, we then create a new WebBrowserTask. We set the Uri of the WebBrowserTask to app link from the List of Objects. Finally we call the WebBrowserTask, which will open up the link to our app.

That’s about it, this can be done dynamically where you host the information online so your app catalog is kept current.

Download AppCatalog.zip