Breadcrumbs

[CodenStuff]

Display Resolution

The minimum resolution required to run Windows 8 app's is 1024x768 so as long as you build your app visuals within that viewing space your app will be fine on every device but there comes a problem when resolutions start to get higher than the minimum.

As the display resolution gets higher your app's visual content gets smaller and here is an example. This first image is taken at a resolution of 1366x768 and as you can see the button is clearly visible and a nice size:



But now look at the same app taken on a 27" display at a resolution of 2560x1440 and you can see that the button has got very small and is barely visible:



Displays and resolutions are getting bigger all the time so what happens when someone tries running your app on at even bigger resolution? they wouldnt be able to see the button at all.

One way to tackle this is to design your app for a 1024x768 resolution and make sure that it looks exactly the same and the visuals remain the same size even on bigger resolutions and you can do that by using a viewbox container.

This is the original code without the viewbox:

Code: Select all

    <Grid Background="#FF134785">
         <Button Content="What you see is what you get" HorizontalAlignment="Center" Height="72" Margin="0" VerticalAlignment="Center" Width="237" Background="#FFE41616"/>
    </Grid>

Now the code with a viewbox:

Code: Select all

    <Grid Background="#FF134785">
        <Viewbox Margin="0" Stretch="Uniform">
            <Grid Width="1024" Height="768">
                <Button Content="What you see is what you get" HorizontalAlignment="Center" Height="72" Margin="0" VerticalAlignment="Center" Width="237" Background="#FFE41616"/>
            </Grid>
        </Viewbox>
    </Grid>

As long as you place all your app content within the viewbox grid is should remain looking exactly the same on every screen resolution. Heres a screenshot of the 2560x1440 resolution again but this time with the viewbox code and you can see the button is now perfectly visible.



Obviously use of this code depends on the type of app your making and it probably wouldnt be good to use if your app used a gridview to display its content because the gridview is designed to expand and show more items when the resolution changes.

Maybe it will come in handy cooll;

[Shim]

nice tutorial cody .