locked
Black bars appear on orientation change

    Question

  • Hi, 

    I am designing my page in a horizontal orientation. My problem is that when I switch to a vertical orientation, the page does not stretch to fill the screen and instead leaves black bars along the top. The page content is basically in the middle (almost like viewing the app on a smaller screen). 

    I only have this problem on pages with scrollviewers. What am I doing wrong? 

    Thanks!

    Tuesday, August 05, 2014 12:41 PM

Answers

  • Hi, 

    I am designing my page in a horizontal orientation. My problem is that when I switch to a vertical orientation, the page does not stretch to fill the screen and instead leaves black bars along the top. The page content is basically in the middle (almost like viewing the app on a smaller screen). 

    I only have this problem on pages with scrollviewers. What am I doing wrong? 

    Thanks!

    I think when you detect an event that indicates the screen size changed You need to either:

    (1) Manually update the dimensions on your scrollviewer

    (2) If you're setting sizes, make use of the "*" (don't remember exact syntax off top of my head) in the size of anything that can dynamically grow to take back the rest of the space..  For example you might manually specify "height=1000" normally, but if you want it to resize automatically to fill rest of space you do something like "height=1000*" which I think means something like reserve at least that size, but stretch taller if there is room available.  (On any one portion of a grid, it's possible only one * can be used)

    These are just ideas..


    -Rob

    Tuesday, August 05, 2014 2:56 PM
  • Tuesday, August 05, 2014 3:02 PM
    Owner

All replies

  • Hi, 

    I am designing my page in a horizontal orientation. My problem is that when I switch to a vertical orientation, the page does not stretch to fill the screen and instead leaves black bars along the top. The page content is basically in the middle (almost like viewing the app on a smaller screen). 

    I only have this problem on pages with scrollviewers. What am I doing wrong? 

    Thanks!

    I think when you detect an event that indicates the screen size changed You need to either:

    (1) Manually update the dimensions on your scrollviewer

    (2) If you're setting sizes, make use of the "*" (don't remember exact syntax off top of my head) in the size of anything that can dynamically grow to take back the rest of the space..  For example you might manually specify "height=1000" normally, but if you want it to resize automatically to fill rest of space you do something like "height=1000*" which I think means something like reserve at least that size, but stretch taller if there is room available.  (On any one portion of a grid, it's possible only one * can be used)

    These are just ideas..


    -Rob

    Tuesday, August 05, 2014 2:56 PM
  • Tuesday, August 05, 2014 3:02 PM
    Owner