locked
I don't understand the purpose and when to use WinJS.UI.ViewBox

    Question

  • I thought it would make my entire app becomes always fullscreen, and i can make a 1024px width, 800px height app, and it would still looks nice on a 1920 x 1200 resolution because it would "scale" the app nicely.

    But turns out it only makes it messy because it only changes the position of the FIRST element ?

    I don't understand the purpose, when to use that class, is it a bug maybe , how do i use it ?



    Tuesday, June 19, 2012 4:16 AM

Answers

  • You can simply wrap all of your stuff in a single element like this...

    <div data-win-bind="WinJS.UI.ViewBox">
      <div>
        ...
      </div>
    </div
    

    Now you have met the ViewBox's requirement of only having a single child element. If you look into why it can only have a single child element it makes sense too. It's because the way it actually scales and transforms your content to look good is by applying CSS transforms to that one element. Look at the following site to see a good interactive demo of the transforms it will apply: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_2d-transforms.htm.
    Saturday, August 18, 2012 5:30 AM

All replies

  • What is your question?  I don't understand what you are asking.  Can you post some images perhaps of what you are facing?

    Jeff Sanders (MSFT)

    Tuesday, June 19, 2012 12:36 PM
    Moderator

  • <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Test1</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0.RC/css/ui-light.css" type="text/css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
        <!-- Test1 references -->
        <link rel="stylesheet" type="text/css" href="css/css/ui-lightness/jquery-ui-1.8.21.custom.css" />
        <link href="default.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
        <script type="text/javascript" src="js/custom.js"></script>
        <script src="default.js"></script>
    </head>
    
    <body>
        
    
    
    <div data-win-control="WinJS.UI.ViewBox">
        <h1>Heading</h1>
        <p>Lorem Ipsum Lorem ipsum</p>
        <p>Lorem Ipsum Lorem ipsum</p>
        <p>Lorem Ipsum Lorem ipsum</p>
        <br />
        <h2>Heading 2</h2>
        <p>Lorem Ipsum Lorem ipsum</p>
        <p>Lorem Ipsum Lorem ipsum</p>
        <p>Lorem Ipsum Lorem ipsum</p>
    </div>
    
        
    </body>
    </html>
    

    ===

    The result is

    Only the first element is

    Tuesday, June 19, 2012 12:59 PM
  • OK... what do expect it would be?

    Jeff Sanders (MSFT)

    Tuesday, June 19, 2012 1:00 PM
    Moderator
  • i though viewBox would "scaled" everything to fullscreen.

    So if my div container is only 1024px width and 800px height, and i make that div container into ViewBox, it would scaled and look good in a 1900 px * 1200px monitor.

    Tuesday, June 19, 2012 1:00 PM
  • Ah OK.

    No, sorry... this is not what the ViewBox is for.  Check out the documentation and check out the definition of this class in ui.js.

    1.  You can only have one element in a ViewBox.

    2.  The element basically is applied with a transform to set the x y and scale.  If the element does not scale (like text) then it will not grow the text.

    If you need something to scale up like this however you could use a canvas and draw to that!

    -Jeff


    Jeff Sanders (MSFT)

    Tuesday, June 19, 2012 1:24 PM
    Moderator
  • i'm afraid i can't do that. Thanks though for the information.

    Hey jpsanders, how about "Fixed layout app" (New Project template) ?

    It says on the documentation : "create app that scales a fixed aspect ratio layout"

    the html for that is :

    <div data-win-control="WinJS.UI.ViewBox">
            <div class="fixedlayout">
                <p>Content goes here</p>
            </div>
        </div>

    I assume this is what i am looking for ? Or maybe i'm wrong ?

    Tuesday, June 19, 2012 1:34 PM
  • You can simply wrap all of your stuff in a single element like this...

    <div data-win-bind="WinJS.UI.ViewBox">
      <div>
        ...
      </div>
    </div
    

    Now you have met the ViewBox's requirement of only having a single child element. If you look into why it can only have a single child element it makes sense too. It's because the way it actually scales and transforms your content to look good is by applying CSS transforms to that one element. Look at the following site to see a good interactive demo of the transforms it will apply: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_2d-transforms.htm.
    Saturday, August 18, 2012 5:30 AM