UWP-011 - Laudable Layout Challenge

1. Use only a Grid control.
2. I used the designer of a 5" Phone 1920x1080 300% scale.
3. The large textblock's size is 48 points.
4. Most of the margins are either 10 or 20 pixels.
5. The TextBlocks for First Name, Last Name and Email should be centered vertically in the row.
6. Tricky: You'll need to figure out how to allow your TextBlock title to span multiple columns.
(Hint: Use Intellisense!)

我的代码:
Grid

<Page
    x:Class="Airicy.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Airicy"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

     <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"/>
            <RowDefinition Height="3*"/>
            <RowDefinition Height="2*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="3*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>

        <TextBlock x:Name="textBlock" Margin="10,0,0,10" Text="ACME Sales Crop" FontSize="64" Grid.ColumnSpan="3"/>

        <StackPanel Grid.Row="1">
            <TextBlock x:Name="textBlock1" Margin="10,0,0,20" Text="First Name:" FontSize="21.333" VerticalAlignment="Center"/>
            <TextBlock x:Name="textBlock2" Margin="10,0,0,10" Text="Last Name:" VerticalAlignment="Center" FontSize="21.333"/>
            <TextBlock x:Name="textBlock3" Margin="10,0,0,10" Text="Email:" VerticalAlignment="Center" FontSize="21.333"/>
        </StackPanel>

        <StackPanel Grid.Row="1" Grid.Column="1">
            <TextBox x:Name="textBox" Margin="0,0,0,10" Text="TextBox"/>
            <TextBox x:Name="textBox1" Margin="0,0,0,10" Text="TextBox"/>
            <TextBox x:Name="textBox2" Margin="0,0,0,10" Text="TextBox"/>
            <Button x:Name="button" Content="Save" />
        </StackPanel>
    </Grid>
</Page>

答案:

UWP-011-Screenshot

<Page
    x:Class="LaudableLayout.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:LaudableLayout"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Margin="10,0,0,0" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="3*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        
        <TextBlock Text="ACME Sales Corp" FontSize="48" Grid.ColumnSpan="3" Margin="0,0,0,20" />

        <TextBlock Grid.Row="1" Text="First Name: " VerticalAlignment="Center" />
        <TextBox Grid.Row="1" Grid.Column="1" Margin="0,0,0,10" />

        <TextBlock Grid.Row="2" Text="Last Name: " VerticalAlignment="Center" />
        <TextBox Grid.Row="2" Grid.Column="1" Margin="0,0,0,10" />

        <TextBlock Grid.Row="3" Text="Email: " VerticalAlignment="Center" />
        <TextBox Grid.Row="3" Grid.Column="1" Margin="0,0,0,10" />

        <Button Grid.Row="4" Grid.Column="1" Content="Save" />
        
    </Grid>
</Page>
本文标签 : # #
分享到: