basic steps to go about creating a complex itemrenderer / list

Question

Hello All

First off let me say that I'm completely new to using Expression Blend. I do have a lot of experience in Flex/Actionscript development though so I'm not completely clueless.

At any rate. I now have to create an application for metro. Part of the application has an itemrender/list/data visualization component which needs to look like the list below(see image attachment). As you can see it's horizontally laid out and is of variable width and colour, in addition to this hovering over an item would show a tooltip whilst clicking on it would fire a navigation event.

Colour and width need to be calculated in the javascript code at runtime. For setting the width. I need to make sure all my combined items fit into the overall width of the component.

So my question is, what would be a good way to achieve this? currently I've got the data binding to a winJS.UI.ListView instance and it's displaying [object Object] The examples I've seen have only really shown basic binding where you bind to a colour or text field. If I need to do more complex layout (presumably using some kind of JS function/method) how does one go about this? For instance instead of just binding to a property could I perhaps bind width to a function passing in the data as a parameter?

Thanks in advance for any help.

Syllogism

Answer 1

Take a look at http://code.msdn.microsoft.com/windowsapps/ListView-performance-39fb71f0. This sample shows increasing levels of functionality for the listview templating/renderer functionality.

--Sam

Answer 2

thanks, I'll have a look.

Answer 3

ok so I had a look at your links and it seems that I must make a custom template to generate each list item. Now since each list item binds to a data object I thought the logical thing to do would be to then create a nested list inside of the list item and bind to a particular property (which is an array) and use that sub-information to draw my second list. However I'm not sure this is the best course of action and also I have been unable to find any examples of doing this with HTML. I have found a very basic javascript example but since I'm doing very complex grid layout javascript won't help me in this instance.

So my question is. Should I be using a nested list to draw my second set of information?

If yes, can anyone show me an example of how to bind to a nested array inside of my data using HTML.

If not, how would I be able to achieve this task?

Thanks in advance.

Answer 4

Hi,

It is not easy to create a nested ListView. But if you only have two layers, consider to use a single ListView with groups. You can render a list of groups, and in each group, render a list of items. The Grid Application project template generates some code for you to get started. 

As for designing ListView in Expression Blend, you can try the interactive mode: http://msdn.microsoft.com/en-us/library/jj129413.aspx. It allows you to "run" the application. You can run it until the ListView is rendered. When you stop running, you can design the current state. For example, selecte a ListView item and design its elements.

Best Regards,

Ming Xu.

---

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact [e-mail].
Microsoft One Code Framework