How to Disable Snap Views (show image instead with back button or something)

Question

My understanding is that to pass windows metro cert, you do not need to have snap views implemented, just something showing when the user goes into a snapped view. I'm having tons of problems around my datasource not working as I think it should when the user goes into snapped view. For now (and to get through the cert phase) what should I do in my snapped events such that just an image is displayed. I can't find any examples of coding for this.

---

Peter Kellner http://peterkellner.net Microsoft MVP • ASPInsider

Answer 1

Easy!

You want to use the MediaSelectors.  In your page.css (say default.css) you simply hide all the elements you don't want and display your image (converse for the other selectors like portrait, landscape etc...).  You can see this in the templates when you create an app from one of the templates (other than blank).  Below is the media selector for the snapped view:

@media screen and (-ms-view-state: snapped) {
    .fragment header[role=banner] {
        -ms-grid-columns: auto 1fr;
        margin-left: 20px;
    }
        .fragment header[role=banner] .win-backbutton {
            margin: 0;
            margin-right: 10px;
            margin-top: 76px;
        }
            .fragment header[role=banner] .win-backbutton:disabled {
                display: none;
            }
        .fragment header[role=banner] .titlearea {
            -ms-grid-column: 2;
            margin-left: 0;
            margin-top: 68px;
        }
}

Check these out: http://msdn.microsoft.com/en-us/library/windows/apps/hh465371.aspx

http://msdn.microsoft.com/en-us/library/windows/apps/hh465826.aspx

-Jeff

---

Jeff Sanders (MSFT)