Share via

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

  • Article

  Introduction

Hi there , very warm welcome again. We have heard most of developers are tired of legacy listbox and now they need new and innovative listbox. Expression Blend has something new for you. That is Path List Box. Expression Blend helps the developer and designer to design really cool UI, Path ListBox is one of the feature that was introduced in Expression Blend 4. By the help of Path List Box you can list the items of a listbox in certain path, well that path might be a ellipse, that might be a  rectangle or any custom path drawn with Pen tool.

So are you ready for the demo?

Prerequisites

The prerequisites for this tutorial are as follows:

  1. Visual Studio 2013 with Blend for VS
  2. .NET 4.5.1

Let's try it

We are going to follow this tutorial in Expression Blend. Let's quickly create a new WPF project with language as C# and .NET 4.5.1.

When you are done with it, you would notice designer in front of you, it means you are ready to rock. 

The tabs we are going to use in this tutorial are:

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

Done with a new project and now let's make path list box.

http://3.bp.blogspot.com/-dPTED6vI-98/VKx7wzBH88I/AAAAAAAAFYU/DppDOuXRecI/s1600/ProjectCreated.PNG

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

http://1.bp.blogspot.com/-3CCnQhJ9DmQ/VKx7vx_BR0I/AAAAAAAAFYQ/fcS9eNoW3f8/s1600/Elipsedrawn.PNG

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. 

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

We would do the same and convert very ellipse into a layout path. How you would do that just follow the screen below.

http://3.bp.blogspot.com/-kSyS1G6M2YA/VKx7zfUqvYI/AAAAAAAAFZE/dTRgQXzQSEE/s1600/makeLayoutPath.png

Right-click the Path. Click the "Make layout Path" and you are done with it. You would notice some changes in Objects and Timeline tab.

http://3.bp.blogspot.com/-yRBswlvZy3Y/VKx7w43_cQI/AAAAAAAAFZQ/T4BzEA5LuZM/s1600/aftermakingLayoutPath.PNG

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

In case you are not aware of creating data source do follow the tutorial "Playing with data in Expression Blend."

We would just move to data tab and quickly create a new data source and add image and a name in that data source.

http://4.bp.blogspot.com/-0RPYTlZkbWU/VKx7yDF76wI/AAAAAAAAFZA/WUgt-9xiXvY/s1600/createdSampleData.PNG

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

http://4.bp.blogspot.com/-t1wXeZu7LBU/VKx7w2fWHEI/AAAAAAAAFZI/Bki2ksZQg2I/s1600/DragandDrop.PNG

To add that dummy data into your Path Listbox just drag the collection from 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 result you in legacy list box.

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

http://2.bp.blogspot.com/-Ty08vaivhQM/VKx7x2bN2gI/AAAAAAAAFZU/Bci_qg16KF0/s1600/circularlistbox.PNG

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

http://2.bp.blogspot.com/-xj3qyqAGnB0/VKx7yuo71SI/AAAAAAAAFY8/em82XuNEKR4/s1600/discussingproperties.PNG

Major properties of Path ListBox are, Padding that is used to pad between each item of Path List box. Fill behavior and Capacity is also really important property to look at. You can also change orientation of the items in you Path List Box using the orientation button in properties. Note that the path you used to make Path Listbox would 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.

We hope you are now familier with Path listbox. Here a question arises, what if we don't want to use ellipse, rectangle or any of the path that is listed assets, we want to use a custom random path. Well, you can do that by using PEN TOOL form toolbox.

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

http://3.bp.blogspot.com/-oUlXbjykBOY/VKx7yR-0vVI/AAAAAAAAFY0/b8gVdASc6Zg/s1600/createdanotherpath.PNG

After binding collection to this Path,

http://4.bp.blogspot.com/-CY3B-MiX2O0/VKx7xsPmO2I/AAAAAAAAFYo/WJkdbaL0uyM/s1600/binding%2Blist%2Bwith%2Bnew%2Bpath.PNG

Ending Remarks

So that was Path Listbox in a nutshell. Hope you enjoyed the tutorial and you would build some really cool applications that won't be having legacy list box.

Feel free to ask any question if you are stuck,

Cheers, Happy Coding

Source Code

https://github.com/muhammad92/PathListbox

http://www.expression-blend.com