UWP-015 - Laborious Layout Challenge

1. Use both Grids and StackPanels.
2. I use the designer of a 13.3 Desktop (1280 x 720) 100% Scale.
3. The width of the entire layout should be 500 pixels.
4. Again, get the text from the LoremIpsum.txt file.
5. Most of the margins are either 10 or 20 pixels.
6. The Title TextBlocks have a font size of 24 points.
7. The Rectangles should be 100 wide by 30 tall.
8. The color of the rectangles below each titled section:
-- Title 1: Green, Black, Red
-- Title 2: Red, Black, Blue
-- Title 3: Blue, Black, Yellow

我的代码:

Layout

<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="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="350"/>
        </Grid.ColumnDefinitions>
        
        <TextBlock Text="Title 1" FontSize="24" Margin="20,10,0,0"/>
        <StackPanel Grid.Column="1" Grid.Row="1">
            <TextBlock TextWrapping="Wrap" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus, mi nec fermentum congue, turpis nibh porttitor ex, sed commodo neque eros non libero. Donec mauris felis, malesuada nec consectetur et, pharetra in ante. Praesent nec hendrerit purus. Ut vel nunc id nisl volutpat porta. Cras in convallis ipsum. Integer id sollicitudin ex. Ut sed iaculis nisl.</TextBlock>
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="100" Height="30" Fill="Green" />
                <Rectangle Width="100" Height="30" Fill="Black"/>
                <Rectangle Width="100" Height="30" Fill="Red"/>
            </StackPanel>
        </StackPanel>
        <TextBlock Text="Title 2" FontSize="24" Grid.Row="2" Margin="20,10,0,0"/>
        <StackPanel Grid.Column="1" Grid.Row="3">
            <TextBlock TextWrapping="Wrap" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus, mi nec fermentum congue, turpis nibh porttitor ex, sed commodo neque eros non libero. Donec mauris felis, malesuada nec consectetur et, pharetra in ante. Praesent nec hendrerit purus. Ut vel nunc id nisl volutpat porta. Cras in convallis ipsum. Integer id sollicitudin ex. Ut sed iaculis nisl.</TextBlock>
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="100" Height="30" Fill="Red" />
                <Rectangle Width="100" Height="30" Fill="Black"/>
                <Rectangle Width="100" Height="30" Fill="Blue"/>
            </StackPanel>
        </StackPanel>
        <TextBlock Text="Title 3" FontSize="24" Grid.Row="4" Margin="20,10,0,0"/>
        <StackPanel Grid.Column="1" Grid.Row="5">
            <TextBlock TextWrapping="Wrap" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus, mi nec fermentum congue, turpis nibh porttitor ex, sed commodo neque eros non libero. Donec mauris felis, malesuada nec consectetur et, pharetra in ante. Praesent nec hendrerit purus. Ut vel nunc id nisl volutpat porta. Cras in convallis ipsum. Integer id sollicitudin ex. Ut sed iaculis nisl.</TextBlock>
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="100" Height="30" Fill="Blue" />
                <Rectangle Width="100" Height="30" Fill="Black"/>
                <Rectangle Width="100" Height="30" Fill="Yellow"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</Page>

答案:

UWP-015-Screenshot

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

    <StackPanel Width="500" Margin="20,0,0,0" HorizontalAlignment="Left">
        <Grid Margin="0,0,0,20">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>

            <TextBlock FontSize="24">Title 1</TextBlock>

            <TextBlock Grid.Row="1" Grid.Column="1" TextWrapping="Wrap">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus, mi nec fermentum congue, turpis nibh porttitor ex, sed commodo neque eros non libero. Donec mauris felis, malesuada nec consectetur et, pharetra in ante. Praesent nec hendrerit purus. Ut vel nunc id nisl volutpat porta. Cras in convallis ipsum. Integer id sollicitudin ex. Ut sed iaculis nisl.
            </TextBlock>

            <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
                <Rectangle Fill="Green" Width="100" Height="30" />
                <Rectangle Fill="Black" Width="100" Height="30" />
                <Rectangle Fill="Red" Width="100" Height="30" />
            </StackPanel>
        </Grid>

        <Grid Margin="0,0,0,20">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>

            <TextBlock FontSize="24">Title 2</TextBlock>

            <TextBlock Grid.Row="1" Grid.Column="1" TextWrapping="Wrap">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus, mi nec fermentum congue, turpis nibh porttitor ex, sed commodo neque eros non libero. Donec mauris felis, malesuada nec consectetur et, pharetra in ante. Praesent nec hendrerit purus. Ut vel nunc id nisl volutpat porta. Cras in convallis ipsum. Integer id sollicitudin ex. Ut sed iaculis nisl.
            </TextBlock>

            <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
                <Rectangle Fill="Red" Width="100" Height="30" />
                <Rectangle Fill="Black" Width="100" Height="30" />
                <Rectangle Fill="Blue" Width="100" Height="30" />
            </StackPanel>
        </Grid>

        <Grid Margin="0,0,0,20">
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="2*" />
            </Grid.ColumnDefinitions>

            <TextBlock FontSize="24">Title 3</TextBlock>

            <TextBlock Grid.Row="1" Grid.Column="1" TextWrapping="Wrap">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus, mi nec fermentum congue, turpis nibh porttitor ex, sed commodo neque eros non libero. Donec mauris felis, malesuada nec consectetur et, pharetra in ante. Praesent nec hendrerit purus. Ut vel nunc id nisl volutpat porta. Cras in convallis ipsum. Integer id sollicitudin ex. Ut sed iaculis nisl.
            </TextBlock>

            <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1">
                <Rectangle Fill="Blue" Width="100" Height="30" />
                <Rectangle Fill="Black" Width="100" Height="30" />
                <Rectangle Fill="Yellow" Width="100" Height="30" />
            </StackPanel>
        </Grid>        
        
    </StackPanel>
    
</Page>
本文标签 : # # # #
分享到: