Silverlight 4.0 Tutorial (10 of N): Working with the PathListBox

You can find a list of the previous tutorial posts here

Continuing our RegistrationBooth Application, In this post we will make a change to the way we display the list of attendees. Currently we display them in a standard ListBox, we will replace this with a PathListBox, the PathListBox is a new customized control that comes with Blend SDK.

From its name this control is a list box however its elements are placed on whatever path you draw so instead of having our attendees placed vertically in the ListBox we will have our attendees placed along the path we will draw, let’s start by deleting the existing ListBox.

First thing is to draw the path on which we will display the attendees, we will draw a big arc and place it in the left corner, drag an arc shape from the assets window

Drawing an arc

Drop it on the left column and set the StartAngle to 0 and the EndAngle to 180 to make the arc like a half ellipse

2

To convert this into a PathListBox, right click on the arc and select Path->Make Layout Path

Make Layout Path

A PathListBox will be added to the page, rename it to lstAttendees

the attendees PathListBox

We will bind the ItemsSource property of the PathListBox to our attendees DomainDataSource control

Binding the ItemsSource property

Next we will change the ItemTemplate property, we already have a DataTemplate defined for the attendees in the local resources, so we will bind to this template

Bindin the ItemTemplate

We will also set the Capacity property to 4, this property determines the number of items shown on the Path.

Set the Start property to 20%, this property determines the distance from the start of the Layout Path to place the first item.

Set the Span property to 80%, this property determines the percentage of the Layout Path that participates in layout.

 LayoutPath Properties

Let’s run the application and see what we have till now, you will see 4 attendees placed over the layout path we created.

The list of attendees placed over the arc

To see the rest of the attendees we need to add scrolling to the PathListBox, this will require some coding but Luckily for us the Expression Blend team has already done this in the PathListBoxUtils library which is a collection of behaviors, controls and extensions for the PathListBox, you can download it from the Expression Blend Codeplex site

First we will add two buttons one above the PathListBox we will name it BackButton and one below the PathListBox we will name it ForwardButton. we need to wire these two buttons to move backward/forward through the PathListBox items. to do this we will use a behavior that comes with the PathListBoxUtils library.

Drag the PathListBoxScrollBehavior and drop it over our PathListBox

PathListBoxScrollBehavior

From the properties of the PathListBoxScrollBehavior add an EventTrigger for the DecrementCommand, set the SourceObject to the BackButton and set the EventName to Click.

PathListBoxScrollBehavior DecrementCommand

Add an EventTrigger for the IncrementCommand, set the SourceObject to the ForwardButton and set the EventName to Click.

PathListBoxScrollBehavior IncrementCommand

Add an EventTrigger for the ScrollSelectedCommand, set the EventName to SelectionChanged.

PathListBoxScrollBehavior ScrollSelectedCommand

We will associate an easing function with this behavior so that the scrolling looks more fancy.

Easing function

Run the application and click the forward button to see the scrolling in action

PathListBox scrolling

You can download the source code from here.

See you in the next post.

Comments

Post a Comment

Popular posts from this blog

Documentum DQL Query Custom Data Extension For SQL Server Reporting Services

When it comes to Reporting SQL Reporting Services is my favorite choice. SQL Reporting Services has a plenty of data source types but unfortunately Documentum is not one of them, whenever we have to develop some reports based on the data in Documentum we first develop a web service that contains the necessary DQL queries and returns the result in a Data Set, then we create an XML data source that consumes this web service and use it in our reports. Fortunately SQL Reporting Services allows you to extend its data access capabilities by developing a custom data extension (CDE)that retrieves data from your custom data source. I developed a Custom Data Extension for Documentum that allows you to specify a Documentum Repository as a data source and provide your DQL query that will populate your report, I used the Reporting Services SDK Sample (FsiDataExtension) and this Article as starting points You can download the extension from here To install the extension: you have to install the ex
Read more

Portable Class Library Projects and MVVM Light

Image
With Portable Class Library Projects you can create a single library that can target different platforms (e.g. Windows Phone, .Net, Windows Store Apps). For most of the modern apps it’s kind of mandatory to use the MVVM pattern, a famous MVVM library is Laurent Bugnion MVVM Light library. In this post we will walk through the steps needed to create a Portable Class Library that uses the MVVM Light library and targets the Windows Phone 8 and .Net for Windows Store Apps frameworks. I will be using Visual Studio 2012 with Update 3. - Let’s create a new Portable Class Library project and name it MyApp.Core, the solution name will be MyApp - We will target the Windows Phone 8 and .Net for Windows Store Apps - We will create two applications, the first is a Windows Store Blank Application named MyApp.Win8 and the second is a Windows Phone 8 named MyApp.WP8 - We will add a reference to the Portable Class Library Project MyApp.Core to the Windows Store Project and the
Read more

Using taco to create Ionic projects for the Windows platform

Image
Recently Microsoft released Tools for Apache Cordova Command Line Interface (TACO CLI), by using TACO, you can quickly start building awesome Apache Cordova apps really and leave all the plumbing of the different platforms dependencies, plugins, etc. to the tools to take care of. For example the following few commands create a cordova project based on the ionic base template, add the android platform to the project, install the platform requirements, build the app, and run it in the emulator: $ taco create sampleApp --template https://github.com/driftyco/ionic-app-base $ cd sampleApp $ taco platform add android $ taco install-reqs android $ taco build android $ taco emulate android Check the TACO home page of for installation instructions and more information http://taco.tools/ . I ran into a problem when i created a new project based on the ionic base template and tried to run it on a windows 8.1 emulator, to reproduce the issue use the following taco commands to cr
Read more