locked
Basic layout

    Question

  • Hello everyone,

    I am more developer than designer. To be honest, I am no designer at all.

    My question is pretty much in the noob category and I have spend a lot of time trying to find an answer to my problem on both Google and Bing.

    The problem is that when I put for example TextBox control on the page and moving it with the mouse to the center of the page and run the app, that TextBox is not really in the center. Not even close. What should I do to solve my problem?

    Also, when I for example put the new Grid on the left side of the page and resize it with the mouse to go from the top of the page to the bottom of the page, and when I run the app, that Grid is not actually looking the same as I put it in the designer in Visual Studio.

    And last question, when I somehow manage to put TextBox in the center, I want to put TextBlock for around 2-3 cm to the left of the TextBox, how can I do that so it will look normal on any device size?

    Thank you a lot.


    Development Technician, Microsoft Certified Professional

    Friday, November 7, 2014 1:31 AM

Answers

  • Don't lay things out by setting margins. That's asking for trouble like this.

    Instead create rows and columns with your Grid and place your elements in specific rows and columns. You can use the HorizontalAlignment and VerticalAlignment properties to align the items within their cells.

    See Quickstart: Defining layouts for more information. Also take a look at Quickstart: Designing apps for different window sizes for suggestions on handling different aspect ratios as the user resizes the window between minimally skinny layouts, portrait layouts, and landscape layouts.

    --Rob

    Friday, November 7, 2014 9:41 PM
    Moderator

All replies

  • What language are you using so we can help you find the appropriate forum?

    The UI Design for Windows Store apps forum is for discussion of how the app should look not how to implement that appearance.

    It would  also help understand what you mean if you posted the code generated by the designer for your layout.

    --Rob

    Friday, November 7, 2014 5:22 AM
    Moderator
  • This is the example with TextBox and TextBlock controls:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <TextBox HorizontalAlignment="Center" Margin="345,228,398,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="623"/>
            <TextBlock HorizontalAlignment="Left" Margin="250,228,0,0" TextWrapping="Wrap" Text="Username" FontSize="20" VerticalAlignment="Top" Height="32" Width="266"/>
            <TextBox HorizontalAlignment="Center" Margin="344,288,399,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="623" Background="White"/>
            <TextBlock HorizontalAlignment="Left" Margin="249,288,0,0" TextWrapping="Wrap" FontSize="20" Text="Password" VerticalAlignment="Top" Height="32" Width="266"/>
            <Button Content="Login" HorizontalAlignment="Stretch" Margin="504,361,557,0" VerticalAlignment="Top" Width="305"/>
        </Grid>

    When I test this code on both my laptop (1600x900) and my tablet (1280x800) and it looks very ugly. It's not near what it should like. In this code, I want both TextBoxes to be centered horizontal on any screen, and for TextBlocks, to be left of those TextBoxes by around 2 cm.


    Development Technician, Microsoft Certified Professional

    Friday, November 7, 2014 9:08 AM
  • Don't lay things out by setting margins. That's asking for trouble like this.

    Instead create rows and columns with your Grid and place your elements in specific rows and columns. You can use the HorizontalAlignment and VerticalAlignment properties to align the items within their cells.

    See Quickstart: Defining layouts for more information. Also take a look at Quickstart: Designing apps for different window sizes for suggestions on handling different aspect ratios as the user resizes the window between minimally skinny layouts, portrait layouts, and landscape layouts.

    --Rob

    Friday, November 7, 2014 9:41 PM
    Moderator