Layout problem when navigating in Snapped View

Question

I created an app based on the grid app template. When using the swipe gesture to switch to snapped view then everything works fine (grid layout is changed to list layout and displayed correctly: per item a small image together with some text).

However, if I switch to snapped view and navigate from one snapped view to another (using the back button, for example), then it looks like the GUI doesn't get drawn properly. Instead of a nice list with small images and text, I get to see the JSON data (which is in the list view).

Any idea what could be the cause of this? Navigation in normal view works fine.

Answer 1

Hi M,

It has something to do with how you are defining the views or the code behind this.

I would suggest you run in the debugger and check the Java Script console and Output debug windows for errors.  If that does not resolve it, then you need to start troubleshooting tracing though the debugger and trying to see where you may be injecting bad formatting.  It looks to me like you are not wiring your datasource to a particular view correctly.

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Hi Jeff,

Thanks for your reply. I have debugged the code several times, but I cannot pinpoint the exact location where things go wrong. No errors appear in the JavaScript console and Output debug windows. The strange thing is that switching to normal (full) view from within the faulty snapped view works perfectly fine, as well as switching back to the snapped view again using the swipe gesture. It only causes problems when using the navigation (WinJS.Navigation.navigate + back).

Answer 3

Hmm,

Can you share a repro of this?

-Jeff

---

Jeff Sanders (MSFT)

Answer 4

I created the app based on the grid app template. Basically, what I did is duplicate and rename the groupedItems folder without renaming the files inside it (groupedItems.html/css/js). Could it have something to do with this?

Please also see: http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/eb600b39-801a-40ee-8c07-1c341fbfe788

I haven't been able to rename the filenames afterwards.

Answer 5

Yes, if the resource cannot be found, it cannot render using it!

-Jeff

---

Jeff Sanders (MSFT)

Answer 6

Well, the files could be located although groupedItems.html/css/js existed both in the cover folder and magazine folder. Also, I managed to rename the filenames but this didn't solve the problem.

Answer 7

Sorry I cannot reproduce this.  Can you post your files on SkyDrive or somewhere else?

-Jeff

---

Jeff Sanders (MSFT)

Answer 8

Problem resolved!

It turned out that listView.itemTemplate wasn't set in snapped view mode.

Thanks for the help!

Answer 9

Great!  Sometimes it is the simple things :-)

---

Jeff Sanders (MSFT)