locked
Prevent page from getting "squashed" in Snapped mode?

    Question

  • I have a page that has a WebView on it.  At one point, the user triggers an action that opens a URL that is outside the app domain space and therefore triggers the launch of the IE browser.  The browser initiates Snapped view automatically with my app in the left pane and IE in the right.  Since my page is not layout aware it looks bad obviously since the text in any controls is squished into the available space for the now shrunken control.

    This page, and a few others, really aren't usable in snapped mode since you need the full screen width to do anything intelligent.  Therefore there's no point in going to the trouble of setting up a layout aware page and dealing with logical page views inside the main page view.

    Is there a way to set things up so that my page view is clipped instead of squashed?  Hopefully I don't have to do anything drastic like RenderTargetBitmap the page and hide everything behind that bitmap until the page is unsnappped.

    Note, by snapped I'm referring to when your page is in that mode where it shares the screen with another app, separated by a vertical splitter bar.


    -- roschler

    Wednesday, February 26, 2014 12:14 AM

Answers

  • Your view is squished because you are telling it to squish. If you don't want it to squish then don't do so. You don't provide any information about how your Xaml is written so we don't know what you are doing to do so, but a few possibilities are using a ViewBox, telling your container to stretch horizontally, or using a Grid with * columns.

    If you want the page to clip then don't do that: set the width independent of the window size.

    Significantly better designs would be to either let the user scroll to the rest of the controls or replace the page with a minimal panel showing data that can fit in. Just clipping the image without letting the user get to off-screen controls screams "bug" and isn't something that should be done in a quality app.

    Also test on large and high DPI screens in the simulator.

    --Rob

    • Marked as answer by roschler Thursday, February 27, 2014 12:14 AM
    Wednesday, February 26, 2014 4:46 AM
    Owner

All replies

  • Your view is squished because you are telling it to squish. If you don't want it to squish then don't do so. You don't provide any information about how your Xaml is written so we don't know what you are doing to do so, but a few possibilities are using a ViewBox, telling your container to stretch horizontally, or using a Grid with * columns.

    If you want the page to clip then don't do that: set the width independent of the window size.

    Significantly better designs would be to either let the user scroll to the rest of the controls or replace the page with a minimal panel showing data that can fit in. Just clipping the image without letting the user get to off-screen controls screams "bug" and isn't something that should be done in a quality app.

    Also test on large and high DPI screens in the simulator.

    --Rob

    • Marked as answer by roschler Thursday, February 27, 2014 12:14 AM
    Wednesday, February 26, 2014 4:46 AM
    Owner
  • Good points Rob.  Note, I'm not doing anything in response to the resize event so it's not happening on my end (I don't think).  I assume that it's happening because the page width changes and all the controls are trying to repaint themselves in the narrow dimensions, causing the "squishing".  But you're right, clipping would only lead to the user futilely trying to scroll to the right.  For now, I simply tie the visibility of the controls in the right column to a new IsSnapped property in the view model that is set whenever the resize event occurs.

    -- roschler

    Wednesday, February 26, 2014 5:24 AM