locked
UI layout error

    Question

  • Recently I'm building a calculator for practicing, the app allow user to tape number in screen and display in a white background textbox, here is the code:

            <Grid>
                <TextBlock HorizontalAlignment="Left" Margin="76,76,0,0" Text="TextBlock" VerticalAlignment="Top" Height="63" Width="417" FontSize="36"/>
                <Grid  Margin="79,163,870,542" Height="63" Width="417" Background="AntiqueWhite">
                    <TextBlock Text="sss" FontSize="36" Foreground="Black"></TextBlock>
                </Grid>
                <Button Content="1" HorizontalAlignment="Left" Margin="76,270,0,0" VerticalAlignment="Top" Height="90" Width="90" FontSize="24"/>
                <Button Content="2" HorizontalAlignment="Left" Margin="186,270,0,0" VerticalAlignment="Top" Height="90" Width="90" FontSize="24"/>
                <Button Content="3" HorizontalAlignment="Left" Margin="296,270,0,0" VerticalAlignment="Top" Height="90" Width="90" FontSize="24"/>
                <Button Content="←" HorizontalAlignment="Left" Margin="406,270,0,0" VerticalAlignment="Top" Height="90" Width="90" FontSize="24"/>
                <Button Content="4" HorizontalAlignment="Left" Margin="76,380,0,0" VerticalAlignment="Top" Height="90" Width="90" FontSize="24"/>
                <Button Content="5" HorizontalAlignment="Left" Margin="186,380,0,0" VerticalAlignment="Top" Height="90" Width="90" FontSize="24"/>
                <Button Content="6" HorizontalAlignment="Left" Margin="296,380,0,0" VerticalAlignment="Top" Height="90" Width="90" FontSize="24"/>
                <Button Content="+/-" HorizontalAlignment="Left" Margin="406,380,0,0" VerticalAlignment="Top" Height="90" Width="90" FontSize="24"/>
                <Button Content="7" HorizontalAlignment="Left" Margin="76,490,0,0" VerticalAlignment="Top" Height="90" Width="90" FontSize="24"/>
                <Button Content="8" HorizontalAlignment="Left" Margin="186,490,0,0" VerticalAlignment="Top" Height="90" Width="90" FontSize="24"/>
                <Button Content="9" HorizontalAlignment="Left" Margin="296,490,0,0" VerticalAlignment="Top" Height="90" Width="90" FontSize="24"/>
                <Button Content="C" HorizontalAlignment="Left" Margin="406,490,0,0" VerticalAlignment="Top" Height="200" Width="90" FontSize="24"/>
                <Button Content="0" HorizontalAlignment="Left" Margin="76,600,0,0" VerticalAlignment="Top" Height="90" Width="200" FontSize="24"/>
                <Button Content="." HorizontalAlignment="Left" Margin="296,600,0,0" VerticalAlignment="Top" Height="90" Width="90" FontSize="24"/>
            </Grid>

    These code in design window looks good:

    In DEV

    But when I run the app, the grid moved to another place:

    Run

    Hope anyone can help me.

    Saturday, April 19, 2014 8:24 AM

Answers