Introduction
I have heard that most developers are tired of legacy listbox and now they need a 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 features that was introduced in Expression Blend 4. With the help of Path List Box, you can list the items of a listbox in a certain path, well that path might be an 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:
- Visual Studio 2013 with Blend for VS
- .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
I am done with my new project and now let's make path list box.
Now let's add an 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:
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 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:
Right click on the Path. Click on the "Make layout Path" and you are done with it. You would notice some changes in 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 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 do that for adding items to our Path Listbox. To make dummy data, you need DATA tab. The steps for creating data source are 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."
I would just move to data tab and quickly create a new data source and add image and a name in 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 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 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.
There are certain properties of Path Listbox that you need to learn.
Major properties of Path ListBox are, padding that is used to pad between each item of Path Listbox. Fill behavior and Capacity is also really important properties to look at. You can also change orientation of the items in your 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.
I hope you are now familiar with Path listbox. Here a question arises, what if I don't want to use ellipse, rectangle or any of the path that is listed assets, I want to use a custom random path. Well, you can do that by using PEN TOOL form tool box.
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.
After binding collection to this Path:
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 listbox.
Feel free to ask any questions if you are stuck.
Cheers,
Happy coding!
Source Code & Personal Blog
