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

Lazy loading in Telerik RadControl Data Bound ListBox for Windows Phone 8

We use the term `lazy loading` to describe the implementation process in which we don’t load the whole data in a ListBox at once. We load a few items at a time and load new items as the user scrolls down. This method is quite useful when we are dealing with a large amount of data and particularly when the data is being fetched from a remote location. The default windows phone controls isn’t the best choice if you want to add lazy loading in your app. It’s a cakewalk if you are using windows phone 8 controls from Telerik. Yes, it costs 99$ but you could get if from DVLUP for 250 points or by enrolling into Nokia’s developer program and using their developer token. We assume that you already have telerik integrated with Visual studio and will directly jump to explaining lazy loading implementation.

Step 1. Create a new Windows Phone 8 project

Open Visual Studio and create a new Windows Phone 8 Silverlight Project. Target it for WP 8 or 8.1

Step 2. Convert the project to a Telerik WP Application

To use Telerik controls in your app you need to first convert it to a Telerik Windows Phone Application. This will add the required references for telerik controls. If Telerik is integrated with your Visual Studio then you could see a Telerik Menu at the top. Go to Telerik > UI for Windows Phone > Convert to Telerik Windows Phone Application.


Choose the following Components from the dialog box that appears. We add the reference for Data and Primitives in our app.

Wait till Visual Studio adds these references to your project.

Step 3. In MainPage.xaml add a reference to Telerik primitive controls

Add the following reference to use telerik primitive controls in MainPage.xaml

xmlns:telerikPrimitives=”clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives”

Step 4. Add the following code to use telerik RadDataBoundListBox

We will be using telerik RadDataBoundListBox to demonstrate lazy loading. Here’s the XAML code which we are using in the sample app.


Note:

  • We have set the DataVirtualizationMode to OnDemandAutomatic
    which means that
  • DataRequested event handler is triggered whenever we scroll down the list, usually to the end of it. Here we add more items to the listbox
  • ItemLoadingTemplate is the one that defines what should be displayed while the list is empty
  • DataVirtualizationItemTemplate defines what should be displayed when the list is fetching more items
  • ItemTemplate is the normal DataTemplate which defines the UI of the list items.

You can bind data to both ItemLoadingTemplate, DataVirtualizationItemTemplate and ItemTemplate as per your wish and you may refer to this article to see how data binding works in Windows Phone.

Step 5. Add the event handler for listbox ManipulationCompleted

In the app’s constructor define the event handler for listbox ManipulationCompleted by using the following code

this.listBox.ManipulationCompleted += this.radDataBoundListBox_ManipulationCompleted;

Below the app’s constructor add the code for this event handler

Step 6. Declare an ObservableCollection to hold the data items

We can’t use a normal List here as will be adding new items to the list afterwards and UI won’t update automatically. So we use an ObservableCollection instead.

The MainPage.xaml.cs file should look similar to this after you have added the code from Steps 5 and 6.

Step 7. Add the code for list box data requested event

This event is triggered when the list tries to fetch more items. In this example we are using a method, add() to add 10 more items to the observable collection every time it is called.

Note:

  • Right now the items are added from a local source so you may not notice the loading progress bar when new items are added so you may add a delay of 2 seconds by uncommenting the code in add()
  • If you are fetching from a remote location, you don’t need to do anything special. Just call the webservice with an offset to get few more items

Step 8. Set the item source for the listbox in page Loaded event handler

We add a page Loaded event handler to set the ItemSource for the listbox. Once the item source has been set, new items will get added to the listbox whenever the ovservable collection is updated with more data items.

That’s it. Try running the app in the emulator and see if it works for you.

Download full project source Lazy-Loading.zip

Implementing a custom Data Template Selector in Windows Phone 8’s ListBox control

In this post I will explain how to implement a custom data template selector and also how to create a DataTemplateSelector abstract class. Basically a DataTemplateSelector will provide a way to choose a DataTemplate based on the data object and the data-bound element. You need a DataTemplateSelector when you have more than one DataTemplate for the same type of objects and you want to supply your own logic to choose a DataTemplate to apply based on the properties of each data object. So, a DataTemplateSelector lets you select a DataTemplate for each item in the list. Let us first see how to implement DataTemplateSelector abstract class and then we will see how to implement your own CustomDataTemplateSelector.

Implementing a DataTemplate abstract class

A DataTemplateSelector can be implemented in a number of ways but here let us use a DataTemplateSelector which derives from ContentControl (I will use ContentControl as a base class). A virtual method SelectTemplate which provides logic to return the appropriate template based on the value of the Priority property.

 

Follow these steps to implement custom data template selector in your app:

Step 1. Add DataTemplate abstract class at the top of MainPage.cs

Just below the namespace declaration in MainPage.cs add the code for DataTemplate abstract class.


 

Step 2. Define a class to hold the items of your list box

We would be binding the items of the listbox with a list of items of a specific class type. So define a class which would hold an item of the listbox. Here we are using a Quote class which has two data members, shortmessage to hold the quotation and type to determine the data template to be used. It will let me choose to add either a quote or an ad.


Step 3. Create a custom data template selector by inheriting the abstract class defined above

To create a custom data template selector, you first need to define a class that inherits from the DataTemplate abstract class defined above. Then an instance of this custom data template selector can be assigned to the template selector property of the element. I will create a QuoteTemplateSelector which will have two data templates in it. Using this data template selector I wished to inserts ads after certain items in my listbox. You can have as many DataTemplates as you wish within this template selector class. The screen shot below shows that within the SelectTemplate method each item is checked and the data template to be used is determined based on the value of `type’ variable of that item.


 

Step 4. Add the local reference to the project in MainPage.xaml

Simply add a reference to make the classes defined in the project available in the XAML part.

xmlns:local=”clr-namespace:Custom_Data_Template”

Step 5. Add the ListBox in MainPage.xaml and define its DataTemplate

Next you need to add a listbox control in the MainPage.xaml of your app and define its data template. Within the data template of the listbox we will define the design of each of the data templates which we declared in the QuoteTemplateSelector class. Remember it had 2 data templates, BQuotes and Ad. So we define both the templates as shown below. The data template ad was supposed to display as but for the sake of convenience we will just display a rectangle in that area. You can add ads or any other item in its place.

Note: Visual Studio may show the XAML to be invalid but when you build and deploy the project, it will run without any glitches.

 


Step 6. Add a few items to the listbox.

Just add a few random items to the listbox and see if it works. I have added a few quote type items and an ad type item to the listbox.


Deploy the app and see how your list looks. Its working for me and you could see that a green rectangle appears after 5 items in the listbox. Get creative and you could use it for various purposes in your app.

 

Download the source code of this project here,

Download full project Custom-Data-Template.zip

How to work with ListBox selected item in Windows phone application

In this post I am going to talk about different techniques of accessing a Listbox Selected item.

When we populate a Listbox with data items we have two options

1. First is that we can use Listbox items directly

2. Second we can make the use of databinding.

 

When we use option 1 the Selected item is usually the Listbox item so we can access it easily and perform the desired manipulations on it.

But when we make use of Second option which is the most widely used option the SelectedItem is the type of the business object (data class) which we use when performing data binding

There are different methods of accessing the ListBox Selected item which will be explained below with the help of an example.

 

In the following example I shall be creating a Listbox of student names along with a button which shall display their marks along with their name in a Texblock given below the List.

The different steps that need to be followed are

 

1. Create a new project Listboxselecteditem.

2. Then open the MainPage.xaml and remove the XAML code for the StackPannel named TitlePanel and replace it with the following code so as to change the page name and application name .

 


 

 

3. Now add the following Xaml code in the Grid named ContentPanel so as to create a list box in the page having the name mylistbox and bind the target Textblock nameblock  with data source name property. It also adds two Textblocks having the name Studentnameblock and marksblock to display the name and marks of selected student.

 



 

4. Now open the page MainPage.xaml.cs.

5. Create a public class called Resultclass having the properties name and marks in the page globally.


 

6. Then add the following code consisting of two global arrays for sample data to be used inside listbox named mylistbox

 

7. After that make a sample list from the data given above with the help of the following code given below.

 


 


 

8. Then call the function makeasamplelist in the constructor of the MainPage.xaml.cs.

 


 

If you face any problems while understanding the above code you can refer to the following blog post to understand the basics of data binding.

http://www.windowsapptutorials.com/windows-phone/data-binding-in-windows-phone-app-one-way-binding/

 

9. Now to add the following code for the Listbox SelectionChanged Event handler in the MainPage.xaml.cs.

This code will execute whenever you make a selection from the Listbox.

 


10. The code for the marks button Click EventHandler is as following. Whenever you click on the Marks button of a any Listbox item this code will execute.

 



.

11. Now run the application. You will see the following List created in your application.

 


 

12. Now Select any Listbox item. Suppose we select the second item that is Fred. When you will Select it the values of Textblocks Studentnameblock and marksblock will change respectively.

 


 

13. When you click on Marks button given in front of the student name the corresponding student name and marks will be shown in the Textblocks given below the Listbox.

When you Click on the Marks button given in front of James the following output will be shown.

 


 

14. If hope this post will be helpful to you. Download the full project zip file from the link given below.

 

Download full project file Listboxselecteditem.zip

 

How to bind ListBox to data in Windows phone application – Introduction

As an application developer, you can create ListBox controls without specifying the contents of each ListBoxItem separately. You can use data binding to bind data to the individual items.

In this post, I will explain with the help of an example how to create a ListBox that populates the ListBoxItem elements by data binding to a data source.

Suppose you want to display a list of students with their marks in a windows phone app. If we specify the contents of each item separately it would take a lot of time. So we make a use of data binding. The steps that need to be followed are

1. Create a new project ListboxBinding.

2. Then open the MainPage.xaml and remove the XAML code for the StackPannel named TitlePanel and replace it with the following code so as to change the page name and application name .

3. Now add the following Xaml code in the Grid named ContentPanel so as to create a list box in the page having the name mylistbox and bind the target Textblocks nameblock and marksblock with data source name and marks respectively.

 


 

4. Now open the page MainPage.xaml.cs.

5. Create a public class called Resultclass having the two properties name and marks.

6. Then add the following code consisting of two global arrays for sample data to be used inside listbox named mylistbox.

 

7. Then we can add the following data into the listbox in two ways.

First method:

First method is to create a Separate list for the Listbox and adding the items into that list. After that set the itemsource property of the Listbox to that of list created.

We can do this with the help of following code.

Second method: In second method instead of making a separate listbox we can directly add the items into the listbox. We can do this with the help of following code.
If you face any problems while understanding the above code you can refer to the following blog post to understand the basics of data binding.

http://www.windowsapptutorials.com/windows-phone/data-binding-in-windows-phone-app-one-way-binding/

8. Now call any one of the following method in the Constructor of the MainPage .Both will give the same list as the Output when you will run the application.

Suppose I call the firstmethod. Then the Constructor of the MainPage will look like


9. Now run the application on Emulator. You will see the following list created on the MainPage .


10. If you want to know more about the Listbox selected item you can refer to the following blog post

How to work with ListBox selected item in Windows phone application

11. I hope this post will be helpful to you. Download the project zip file from the link given below.

Download Full Project file ListboxBinding.zip

Checkout a related post on using ListView in android.

Using ListView in Android