CODEWITHSUNDEEP
xamllistviewgridviewwindows-8semantic-zoom
ZombieSheep
ZombieSheep

Reputation: 29953

ListView containing GridViews and ListViews

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]

Upvotes: 2

Views: 621

Answers (2)

zinking
zinking

Reputation: 5685

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

Upvotes: 1

Krishna
Krishna

Reputation: 3007

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?

Upvotes: 1

Related Questions