Different resolutions on windows phone 8.1

Question

I'm moving a Titanium app (for ios and Android) to windows phone 8.1. I'm a newbie at windows applications.

I want to create an app that has the same appearance in different screens, I mean in bigger screen show elements bigger but keeping the aspect of the app. I think I need to define Margin and Width and Height to place elements in the page.

I tried to put some basic elements in MainPage.xaml and see what happens. This is my code:

<Grid>

    <Image Source="Assets/ppal/fondoCompleto.png"
           Margin="-25, 0, -25, 0"></Image>
    <Image Source="Assets/ppal/settings.png"
           Margin="10,10,365,612"></Image>
    <TextBlock Text="aaa" FontFamily="Arial" 
               TextAlignment="Center"
               Margin="0, 200, 0, 0"
               FontSize="22"/>

    <Rectangle
        Fill="#0098bc"
        Margin="30, 50, 30, 450"
        RadiusX="5"
        RadiusY="5"/>
</Grid>

I've tried it in different Windows phone simulator with different inches and result has been horrible. It shows ok on 4 inch but very bad on 6 inch.

Do you know how I can do this?

Is there a way to use a unit like dip, not pixels?

Or is there a formula to convert a width, height, margin and return a value depending on screen size? (this is what I use in Titanium app: Titanium conversion pixels to dp)

Thank you very much!

Answer 1

"I think I need to define Margin and Width and Height to place elements in the page"

Not necessarily. If you have elements that need to overlap or move around via animation you may need to, but if you're just laying out some form elements you should use the grid (or multiple grids) to arrange them. I'm not going to try an discern your layout from above (it looks like a random test anyway), but it would look something like this:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100" />
        <RowDefinition Height="*" />
        <RowDefinition Height="2*" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Image Source="Assets/ppal/fondoCompleto.png" Grid.Row="0"></Image>
    <Image Source="Assets/ppal/settings.png" Grid.Row="1"></Image>
    <Rectangle Grid.Row="2" Fill="#0098bc" RadiusX="5" RadiusY="5" />
    <TextBlock Grid.Row="3" Text="aaa" FontFamily="Arial" TextAlignment="Center" FontSize="22"/>
</Grid>

This will lay out four rows; the top is 100px high, the bottom is 50px high, and the two middle rows will fill up the rest of the screen space (*), with the second being twice as high as the first (2*). You can do the same with ColumnDefinitions. Images should scale to fit the containing grid cell, and if you need other elements to scale to fit that don't normally, you can use something like a ViewBox.

You can also use a combination of grid layout and margins/horizontal alignment to get the layout you want. The margins will be relative to the containing grid cell. There's also nothing stopping you from having multiple elements inside a single grid cell -- you can have Grid.Row=1 on two items and then use margins etc to lay them out the way you want.