2

I have a requirement to create a xaml page with Semantic Zoom where the zoomed in view contains both GridViews and ListViews. I have started out with the basic Grid Application template.

In order to try to achieve this, I have made the Semantic Zoom control's zoomed in view show a list view, and the list view contains the ListView and GridView controls I need to actually show the data as ListViewItems. This works, up to a point - the issue is that the mouse-down or tap animations happen on the whole child control of the parent ListView instead of the child's elements. This sort of layout would be simple if I didn't need to support semantic zoom.

So, my question is is this the best way to achieve this sort of layout, or am I missing something. If this is the best way, is it possible to control the behaviour so that the child item elements have the correct animation effect on selection?

Additional Info

The choice of GridView or ListView is based on the type of the items in the collections. In this example, grp 1, 3 and 4 (to be shown in grids) are all collections of type NewsFull and the remainder (to show in Lists) are of type HeadlineOnly, both types inherit from NewsBase.

The page layout (zoomed in) should be something like this...

Title

grp 1         grp 2          grp 3            grp 4      grp 5
[g][g][g][g]  [_list item_]  [g][g][g][g][g]  [g][g][g]  [_list_item_]
[g][g][g][g]  [_list item_]  [g][g][g][g][g]  [g][g][g]  [_list_item_]
[g][g][g][g]  [_list item_]  [g][g][g][g]     [g][g]     [_list_item_]
[g][g][g]     [_list item_]  [g][g][g][g]     [g][g]

where [g] is a grid view item, and [_list_item_] is a list view item.

Zoomd out view is like this...

Title

grp 1      grp 2      grp 3      grp 4      grp 5
[summary]  [summary]  [summary]  [summary]  [summary]
ZombieSheep
  • 29,603
  • 12
  • 67
  • 114
  • Can you please clarify? Is [g] meant to be a GridView or GridViewItem? Likewise, is [_list item_] meant to be a ListView? What is the immediate child of the ZoomedInView of the SemanticZoom? – Krishna Jun 13 '12 at 01:56
  • [g] is indeed a grid view *item*, and [_list_item_] is a list view *item*. Currently my markup contains a SemanticZoom, with a zoomed in and zoomed out view. The zoomed in view currently has a GridView as its only child, and zoomed out a ListView. I know this is not giving me what I want to achieve, though. – ZombieSheep Jun 13 '12 at 06:30
  • So, is there any specific reason you want things to be gridview items or list view items? Is what you really need - just different layouts of each group based on the type of objects in the group? for eg. wrapping layout for the first group and vertically stacked layout for the second one in your case etc? – Krishna Jun 13 '12 at 07:41
  • That is pretty much the crux of the problem, yes. I am already using the DataTemplateSelector for the bulk of my needs, and it works well. The problem, however, is trying to control the sizes of the height and width of items, their ColumnSpan and RowSpan based on item type, etc. It seems like it should be possible, but right now it is causing me so much pain that it seems I may well be doing it the wrong way - hence asking if the original scenario would be possible. – ZombieSheep Jun 13 '12 at 11:30
  • 1
    Did you try using the ItemContainerStyleSelector to swap out the container of the items based on the item type or similar? This way, may be you can set one group to have a wrapping layout container and another can just be a stackpanel? – Krishna Jun 14 '12 at 01:31
  • Thanks Krishna - That (ItemContainerStyleSelector) seems to be getting me a lot closer to where I need to be. If you could write this up as a quick answer I can accept it and give you the bounty. Thanks for the direction. :) – ZombieSheep Jun 14 '12 at 10:55
  • I've made it an answer. I'd be interested to see the rough XAML which works in the end :) – Krishna Jun 14 '12 at 13:54

2 Answers2

1

Perhaps you can try using the ItemContainerStyleSelector to swap out the container of the items based on the item type or similar? This way, may be you can set one group to have a wrapping layout container and another can just be a stackpanel?

Krishna
  • 2,997
  • 1
  • 23
  • 31
1

the design looks reasonable to me. the issue you have is merely " is it possible to control the behaviour so that the child item elements have the correct animation effect on selection?"

the problem here is that you probably lack abstraction here regarding different levels of UI object. I would assume you wrote this big control simply using one xaml object and then messed up with the style setup. In my opinion, you will need to break your UI to these levels of components:

  1. ZoomPage // which is essentially a list
  2. GroupElement // which could be GRID object or list object depending on the DATACONTEXT
  3. GroupElement // which also has a summary state.

what you specified definitely can be achieved, looks to me just the styles are not deployed properly, if indeed your control is too complex, break it down, and test them separately.

hope this helps

zinking
  • 5,561
  • 5
  • 49
  • 81