0

I would like to know how to have my Metro Windows 8 app to adapt to the screen size. In other term : a somewhat responsive design.

Using the simulator via Visual Studio 2013, I can test multiple screen and it seems my app is not behaving correctly at all.

I also used the simulator to see how some of Windows 8/8.1 built-in apps behaved : it's splendid and clean.

How can I achieve this much ?

I already found a partial answer for my grid : Windows 8 App Screen Layout

but it is not enough.

This picture shows what I am trying to do :

http://image.noelshack.com/fichiers/2014/49/1417438224-stack.png

I need to keep that layout, in landscape mode preferably, whatever the screen solution is.

In Windows Phone, it seems to work like a charm : no need to do anything.

Thanks for the help !

2
  • What is wrong in your screenshot?
    – crea7or
    Dec 1, 2014 at 12:59
  • Nothing :) It just shows what I am trying to achieve. I need to have my app to show this layout whatever the screen size is. For example, the register button must always be on the bottom right corner. The login part always in the center etc... how can I do that ??
    – Mackovich
    Dec 1, 2014 at 13:14

1 Answer 1

1

It's very basic XAML knowlege.

<Grid>
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="Auto"/>
    <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
    </Grid.RowDefinitions>


// Grid.Row="1" Grid.Column="1" - your grid with Login/Password. Use VerticalAligment="Center", HorizontalAligment="Center" 

// Grid.Row="2" Grid.Column="2" - your register button. Use VerticalAligment="Bottom", HorizontalAligment="Right"

</Grid>

Personally I'll recomment you to place "Register" button as link under "Login" button.

5
  • Thank you for this solution. I will try working with it. My knowledge in XAML is limited so it might take time. By the way, do I need all these rows ? Can I not be working with only one ? Thanks !
    – Mackovich
    Dec 1, 2014 at 13:32
  • There other designs are possible. This one just the most easier to understand.
    – crea7or
    Dec 1, 2014 at 13:41
  • Ah yes, thank you, I am starting to understand ! Where can I found such other designs ? But if yours is enough, I will keep it.
    – Mackovich
    Dec 1, 2014 at 13:47
  • 1
    XAML is like HTML. You can try two rows with one column. grid with login data should be aligned to center/bottom (row=0). Register button in the row=1 and aligned to right/bottom. size of row=0 about 2/3 of the screen. <RowDefinition Height="3*"/> <RowDefinition Height="1*"/>
    – crea7or
    Dec 1, 2014 at 13:57
  • Excellent. My app is now taking a better form. Working with the rows and columns size is much like the GridLayout in Android. Thank you !
    – Mackovich
    Dec 1, 2014 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.