locked
My ViewBox does not scale properly

    Question

  • Hi!

    I'm using the ViewBox control in my application to scale the content to the different screen resolutions. When using the simulator in Visual Studio the ViewBox scales everything properly. But not when I run it on my own computer with a resolution of 1680 x 1050, 22" .

    If I for example run this piece of code:

    <div data-win-control="WinJS.UI.ViewBox">
    
    <div style="width:1366px;height:768px;">
    
    <div style="backgroundcolor:lightblue;height:100%;width:100%;"></div>
    
    </div>
    </div>
    

    Then it looks like this:


    The lightblue color should have filled the screen...

    What am I doing wrong?

    Tuesday, May 7, 2013 11:40 AM

Answers

  • Hi,

    You should have a look at this.

    If you implement view box , you are going for a fixed layout approach (and that the reason why you see the empty space.

    You can go for the "Adaptive layout approach. In my view this is the best.

    Adaptive layout sample

    Hope this helps..

    - Girija

    • Marked as answer by Song Tian Monday, May 13, 2013 9:21 AM
    Thursday, May 9, 2013 12:34 AM

All replies

  • Hi there,

    I am new learner of Windows8 apps but I found error in your div section :

    <div style="width:1366px;height:768px;">

    It should be , <div style="width:100%; height:100%;">

    So that it equally maps all the screen size.

    You have width of 1366px and height 768px. But your screen size is 1680 x 1050 . I recommend you try using 100% in both height and weight of your div section.

    I hope this might help. I am not an expert. Thank you!

    Tuesday, May 7, 2013 4:49 PM
  • Hi!

    Thanks for your reply!

    But I don't think I can set the height and width to 100% in that div, because then my ViewBox won't have a reference size to scale from. Then it would just scale the content from 100% to 100% instead of scaling the content from 1366px x 768px(that's the screen size my application is designed for) to 100% of the screen.

    It would seem to work to fill the screen with the blue background-color, but if I had used a text instead, then you could see that it scales differently. Am I right? 

    So I'm still facing the same problem...

    I don't understand why my ViewBox does not scales the content properly on my screen when it does on every screen size in the Simulator...Thanks for the help!

    Tuesday, May 7, 2013 8:22 PM
  • Hi,

    I did not understand when you mention that it will scale from 100% to 100% and not from 1366 * .... to 100%.

    I tried the below code in a sample app and the scaling is perfect ....

    Is my understanding incorrect ?.

    <div data-win-control="WinJS.UI.ViewBox">
            <div id="containerDiv" style="width:100%;height:100%; background-color:red">
                <div id="div1" style="width:30%;height:30%; background-color:green"></div>
                <div id="div2" style="width:30%;height:30%; background-color:blue"></div>
                <div id="div3" style="width:30%;height:30%; background-color:gray"></div>
                <h1> I am text</h1>
            </div>
        </div>

    - Girija

    Tuesday, May 7, 2013 11:20 PM
  • You are most welcome. I am still student that's why I do not know lot of things about it. I have never tested my app on 22' screen. I always test my app in simulator and my 15.7' laptop. It was very good information. thank you!

    9seconds

    Tuesday, May 7, 2013 11:21 PM
  • Hi Girija!

    Thanks for your reply!

    Sorry if I did not explain well, but I thought the ViewBox needed a reference size to scale from.

    I tried your code with the Simulator but it scales differently on the different screen sizes.

    This is on 1366 x 768:




    This is on 2560 x 1440:



    The text is a little smaller here.


    I'm new at programming Windows 8 applications, so please tell me if I misunderstood!


    I want my application to look the same on the 1366px x 768px as well as the other screen sizes. My application scales correctly on the screen sizes that are available in the Simulator but not when testing on my 22" screen with the resolution 1680 x 1050... Thanks for the help.

    Wednesday, May 8, 2013 12:03 PM
  • Hi,

    You should have a look at this.

    If you implement view box , you are going for a fixed layout approach (and that the reason why you see the empty space.

    You can go for the "Adaptive layout approach. In my view this is the best.

    Adaptive layout sample

    Hope this helps..

    - Girija

    • Marked as answer by Song Tian Monday, May 13, 2013 9:21 AM
    Thursday, May 9, 2013 12:34 AM