Why the design doesn't look the same at run time? It suppose to look the same as in the VS designer isn't it??

Question

Noobie question because is actually for me the first time that I try to build app for Windows 8. My problem is simple. I just can't get the design that I want or I create at VS when I run the application.

Example:

In the VS designer, the app looks like this:

But when I run the application, in my screen, it looks like this:

Super annoying isn't it?? How I centralize those components to make it look like I see it at VS designer??? Thank you!

Answer 1

It depends on how you write your Xaml. You can write it to center the app or leave it left / top justified.

If you have laid things out in a grid then you can add * width columns to the left and right.

See Defining layouts and views 

--Rob

Answer 2

Hi

Whenever you design your UI you have to write code without using hard coded values for control like margins (say 30 from left). So if you had designed with %(*) attributes for the alignments ( say 20% of whole height was used to show this content) then the UI remains same as you move from device to device.

To verify and correct this issue- it is always suggested that you run your code in the simulator which does support various screen sizes and just make sure the application looks good in the respective environments.

But it will be finally the XAML Layouting.

Regards

Answer 3

The device resolution set in the designer must be different from your laptops screen resolution. 

So, even if you center align an element using the designer, it won't actually be in the center. It will be x pixels from the left edge. and x pixels from the top. This means that even when the resolution increase(or decrease) the position stays absolute. 

As the others have mentioned the easiest way to get this the way you want to look would be by writing some xaml. 

For example, to center the title of your app you'd have to write something like, 

    <Grid >
        <TextBlock FontSize="42" HorizontalAlignment="Center">SamyCode's Geek Store</TextBlock>
    </Grid>

If you simply drag the TextBlock to the center the designer will generate code that looks like this, 

    <Grid>
        <TextBlock FontSize="42" Margin="472,10,460,-10">SamyCode's Geek Store</TextBlock>
    </Grid>

Answer 4

nipuna777's answer is correct.

When designing the UI it can be confusing at first. It took me a lot of trial and error and fiddling until I got my head around XAML layout, and I still get it wrong sometimes.

It's good to test on different screen sizes/resolutions if you can. And avoid using any absolute values for placement of items on the screen (I only use absolute values for space between different items where possible). Use alignments, and use adaptable grid colum/row sizes as Rob suggested)

• If you make 3 columns and set the width as "1*", "2*", and "1*" they will automatically fit their container in the ratio you provided (i.e. the 2nd colum will be twice as wide as the other two) regardless of the screen resolution.

Whenever you place a UI element on the screen think of the screen as something that can be any size/resolution and act accordingly. Figure out how to logically place your UI where you want it without hard-coding the location, e.g. "my text box should be in the middle of the screen, at the bottom, but with a little bit of space between it and the bottom of the screen" - so align horizontally in the centre, vertically bottom, and add a margin (e.g. 50 pixels) at the bottom edge.

Basically avoid hard-coding specific numbers wherever possible, since 100 pixels means a different thing depending on resolution, but 'centre' always means 'centre'.

---

I'm a self-taught noob amateur. Please take this into account when responding to my posts or when taking advice from me.