Problem displaying controls when sliding app in from the left.

Question

When running on a tablet, there appears to be a nifty feature which allows me to drag my running app in from the left and drop it into a small panel on the left, next to the currently running app.  Doing this, however, causes some display issues for my app.  I am sure it probably has something to do with my whole lack of understanding of the drag in process, but I am at a loss as to how to fix the issue.  Consider the following image:

This is a composite image of 4 screen shots.  The first is after I dragged my app in from the left and placed it in the small panel.  Now if I then press the left arrow button that you can see in that image, a new page is loaded.  The result is displayed in the second image above.  

Now if I drag the partition to the right to reveal my entire app, I get the third screenshot above.  Note that the buttons that were hidden by the panel on the right are not being displayed (although they are still there).  Also there is text at the bottom which is not being displayed.

Now if I press (and then drag off) the green button in the middle, I get the 4th image above.  Note that the 'Play' button is now visible as is the 'Change' button and the missing text.  The fact that the play button appears is not terribly surprising since when the button is pressed I change the graphic to represent the 'pressed' state.  However, it is not clear why some (but not all) of the other controls are now displayed correctly.

I have found that I can tap into the LayoutUpdated event which is fired when the user slides the panel to the left, and I suspect that I could do something at that time to make all the controls show, but I am not sure what that would be, or why it is necessary.

Can someone shed some light on what might be going on here?

Thanks.

Answer 1

Hi,

Yes, we need some codes to control or adjust the element size and position.
We can use   Window.Current.SizeChanged to get the snap event, and using Visual State manager to control the XAML size.

Please follow this blog
http://blogs.msdn.com/b/jerrynixon/archive/2012/12/10/walkthrough-implementing-snapview-in-your-windows-8-app.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.visualstatemanager.aspx

Snap sample
http://code.msdn.microsoft.com/windowsapps/Snap-Sample-2dc21ee3

Best regards,
Jesse

---

Jesse Jiang
MSDN Community Support | Feedback to us
Develop and promote your apps in Windows Store
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

Ok, I can see that I REALLY didn't understand how the whole snap thing was supposed to work.  Thanks for the links.

Answer 3

I now have the snap working as required, however I am still seeing a problem with the buttons and other controls not displaying when the screen is snapped from the 'Filled' state to the 'Full Screen' state.  For one of my pages, buttons and text that are on the right are not displayed after the snap (although they are still there and functional).  The interesting thing is that this ONLY seems to happen when running on the emulator.  On an actual device, I do not see this problem.  Having it work on the actual device is nice, but the fact that it fails on the emulator is worrisome.

One thing I need to mention is that I am not using XAML files to layout the pages.  These apps are being ported from other devices and the layouts are being generated dynamically, from common source files.  At the core, there is a Canvas, upon which the controls are placed.  When I receive the 'SizeChanged' event from the Window, I re-size the canvas and then re-position the controls.  This works fine when going from 'Full Screen' to 'Filled', but not in the reverse (at least on the emulator).

Thanks.