Unleashing Path List Box: Expression Blend (WPF, Windows Store)

Introduction

Hi there, very warm welcome again. I have heard most developers are tired of legacy listboxes and now they need a new and innovative listbox. Expression Blend has something new for you. That is a Path List Box. Expression Blend helps developers and designers to design a really cool UI. A Path ListBox is one of the features introduced in Expression Blend 4. Using the Path List Box you can list the items of a listbox in a certain path, whether that path is an ellipse or a rectangle or any custom path drawn with the Pen tool.

So are you ready for the demo?

Prerequisites

The prerequisites for this tutorial are as follows:

• Visual Studio 2013 with Blend for Visual Studio
• .NET 4.5.1

Let's try it.

We will follow this tutorial in Expression Blend, let's quickly create a new WPF project with the language as C# and .NET 4.5.1.

When you have done that, you will have the designer in front of you, it means you are ready to rock.

The tabs we will use in this tutorial are:

• Data Tab
• Objects and Timeline
• Assets Tab
• Toolbox

I am done with my new project and now let's make a path list box.



Now let's add an ellipse into the designer. To add an ellipse just type an ellipse in the assets search box and an ellipse will appear. Use that Ellipse control and drag that to the designer. You would see your designer similar to this.



Let's build an idea and try to make a round list that moves on the very ellipse. For that you need to play with the ellipse and change its property.

Whenever you want to make a path, rectangle, ellipse or any drawing to a listbox path you need to make a Layout Path out of it.

We would do the same and convert every ellipse into a layout path. Follow the screen below to see how to do that.



Right-click on the Path, click on the "Make layout Path" and you are done with it. You will see some changes in the Objects and Timeline tab.



A path list box has been added to the Objects and Timeline tab and it is of the same path as the ellipse is. Now we need to add some items to this listbox. Expression Blend allows the user to create dummy data and introduce that data into your listbox. We wil do that for adding items to our Path Listbox. To make dummy data you need a DATA tab. The procedure for creating a data source is already covered in my article "Playing with data in Expression Blend".

In case you are not familiar with how to create a data source do follow the tutorial "Playing with data in Expression Blend.".

I would just move to the data tab and quickly create a new data source and add an image and a name to that data source.



As you see in the image that I am done with a sample data source, now I just need to bind that data with my Path List box.



To add that dummy data into your Path Listbox just drag the collection from the Data Tab and drop it to the PathListBox Object in Objects and Timeline.

If you drop that collection to the designer, it won't work and the result will be a legacy list box.

After you follow the preceding instruction, you will be able to see your designer similar to the screen shown above. Now let's edit it's generated item and make the items look better.



There are certain properties of the Path Listbox that you need to learn.



The major properties of a Path ListBox include Padding to pad between each item of a Path List box. The Fill behavior and Capacity are also really important properties to look at. You can also change the orientation of the items in your Path List Box using the orientation button in properties. Note that the path you used to make a Path Listbox will be enlisted under layout paths. You can simply add a new path and add that to the layout paths and many important properties you must look at.

I hope you are now familiar with Path listboxes. Here a question arises, what if I don't want to use an ellipse, rectangle or any of the paths that are listed as assets, I want to use a custom random path. Well, you can do that using the PEN TOOL from the toolbox.

Draw the desired path using the pen tool and convert the Layout path out of it to make it a Path List Box. Now that you have the Layout Path you can bind that path with your collection using the same procedure described above.



After binding collection to this Path.

Ending Remarks

So that was Path Listbox in a nutshell. I hope you enjoyed the tutorial and that you will build some really cool applications without the legacy list box.

Feel free to ask any question if you are stuck.

Cheers, Happy Coding.

Source Code

PathListbox

Personal Blog: Blend Unleashed.