UWP-013 - Legendary Layout Challenge

Use only StackPanel controls.
I use the designer of a 13.3 Desktop (1280 x 720) 100% Scale.
The large textblock's size is 48 points.
The left-most textblock is 250 pixels wide.
The second textblock is 500 pixels wide.
Get the text from the LoremIpsum.txt file.
The third area is 300 pixels wide.
Most of the margins are either 10 or 20 pixels.
You'll need to use the TextWrapping property of the TextBlocks.

我的代码:

StackPanel

<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">

    <StackPanel Margin="10,20,0,0">
        <TextBlock Text="Lorem lpsum" FontSize="48" Margin="0,0,0,20"/>
         <StackPanel Orientation="Horizontal">
                <TextBlock Text="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. 

Vestibulum sit amet neque nec eros interdum laoreet nec vitae justo. Maecenas scelerisque finibus nisl, a iaculis mauris fermentum sed. Pellentesque faucibus, turpis quis ultrices facilisis, metus eros vulputate augue, sit amet sodales nisl lacus ut massa. Pellentesque vitae dolor nulla. Nullam ultricies imperdiet nisl, interdum placerat dolor posuere a. Nunc tempor sed sapien nec dictum. Morbi eleifend tellus vitae nunc tincidunt viverra. Duis vitae justo eget purus bibendum dictum quis feugiat turpis. Curabitur ultrices purus ut ipsum ullamcorper, sit amet faucibus nisl commodo. Nulla aliquet ante eu leo tincidunt, a tempor nibh maximus." TextWrapping="Wrap" Margin="0,0,20,0" Width="250"/>
                <TextBlock Text="Vestibulum varius bibendum metus. Aliquam erat volutpat. Vestibulum dignissim quam at ligula cursus iaculis. Nam posuere enim ut pellentesque congue. Aliquam malesuada nulla lacus, auctor interdum magna gravida molestie. Sed mollis non velit a maximus. Phasellus scelerisque, nibh at maximus ultrices, ex eros condimentum leo, vel aliquam dolor nisl in mauris. 

Praesent volutpat odio sed ante posuere lacinia. Suspendisse eget ullamcorper dui. Curabitur interdum velit congue erat elementum eleifend. Donec tincidunt arcu vitae est condimentum lacinia. Nullam at sem eu purus congue porta eget vel lorem. Aenean gravida diam tincidunt consequat tincidunt. Sed vel vestibulum eros, quis lacinia tortor. Suspendisse luctus, arcu quis venenatis dapibus, dolor neque suscipit ipsum, id cursus nibh nisi eu diam. Suspendisse vestibulum ut orci ut malesuada. Aliquam gravida leo et massa commodo, lobortis ultrices mauris pulvinar. Cras vulputate, tellus quis consectetur fringilla, enim leo pharetra est, et varius nibh eros in sapien. Nunc tortor tortor, mattis at ullamcorper et, tincidunt ac ante. Nam sed orci felis. Duis non turpis eu mauris blandit mollis. Ut vestibulum libero sed ex viverra, quis faucibus mauris tristique.
 
Nunc a vehicula velit. Vivamus rutrum elementum massa in consectetur. Nunc placerat leo sit amet est accumsan, et rhoncus leo tincidunt. Ut suscipit orci sed ultrices commodo. Vestibulum sed purus semper, ullamcorper metus in, ultrices nulla. Aliquam erat volutpat. Mauris non tellus pretium, accumsan velit eu, suscipit ipsum. Integer risus dui, feugiat id rutrum ut, aliquet et arcu. Duis ac lacus ac magna pretium semper ut ut metus. Phasellus nec elit quis erat condimentum tincidunt. Vestibulum porttitor tincidunt dui, eu ornare massa fringilla sit amet. Cras et maximus justo. Aenean non enim vel massa pulvinar congue. Phasellus quis nisi vel mauris gravida tempor. Mauris sed fringilla lacus, interdum fermentum massa. Quisque pretium sollicitudin sapien vitae cursus." TextWrapping="Wrap" Margin="0,0,20,0" Width="500"/>
                <Rectangle Fill="Blue" Width="200" Height="200" VerticalAlignment="Top"/>
                <StackPanel>
                    <Rectangle Fill="Red" Width="100" Height="100" />
                    <Rectangle Fill="Yellow" Width="100" Height="100" />
                </StackPanel>
            </StackPanel>
        </StackPanel>
</Page>

答案:

UWP-013-Screenshot

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

    <StackPanel Margin="10,20,0,0">
        <TextBlock Text="Lorem Ipsum" FontSize="48" Margin="0,0,0,20" />
        <StackPanel Orientation="Horizontal">
            <TextBlock Width="250" TextWrapping="Wrap" Margin="0,0,20,0">
                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. 
                Vestibulum sit amet neque nec eros interdum laoreet nec vitae justo. Maecenas scelerisque finibus nisl, a iaculis mauris fermentum sed. Pellentesque faucibus, turpis quis ultrices facilisis, metus eros vulputate augue, sit amet sodales nisl lacus ut massa. Pellentesque vitae dolor nulla. Nullam ultricies imperdiet nisl, interdum placerat dolor posuere a. Nunc tempor sed sapien nec dictum. Morbi eleifend tellus vitae nunc tincidunt viverra. Duis vitae justo eget purus bibendum dictum quis feugiat turpis. Curabitur ultrices purus ut ipsum ullamcorper, sit amet faucibus nisl commodo. Nulla aliquet ante eu leo tincidunt, a tempor nibh maximus.
            </TextBlock>
            <TextBlock Width="500" TextWrapping="Wrap" Margin="0,0,20,0">
                Vestibulum varius bibendum metus. Aliquam erat volutpat. Vestibulum dignissim quam at ligula cursus iaculis. Nam posuere enim ut pellentesque congue. Aliquam malesuada nulla lacus, auctor interdum magna gravida molestie. Sed mollis non velit a maximus. Phasellus scelerisque, nibh at maximus ultrices, ex eros condimentum leo, vel aliquam dolor nisl in mauris. 
                Praesent volutpat odio sed ante posuere lacinia. Suspendisse eget ullamcorper dui. Curabitur interdum velit congue erat elementum eleifend. Donec tincidunt arcu vitae est condimentum lacinia. Nullam at sem eu purus congue porta eget vel lorem. Aenean gravida diam tincidunt consequat tincidunt. Sed vel vestibulum eros, quis lacinia tortor. Suspendisse luctus, arcu quis venenatis dapibus, dolor neque suscipit ipsum, id cursus nibh nisi eu diam. Suspendisse vestibulum ut orci ut malesuada. Aliquam gravida leo et massa commodo, lobortis ultrices mauris pulvinar. Cras vulputate, tellus quis consectetur fringilla, enim leo pharetra est, et varius nibh eros in sapien. Nunc tortor tortor, mattis at ullamcorper et, tincidunt ac ante. Nam sed orci felis. Duis non turpis eu mauris blandit mollis. Ut vestibulum libero sed ex viverra, quis faucibus mauris tristique.
                Nunc a vehicula velit. Vivamus rutrum elementum massa in consectetur. Nunc placerat leo sit amet est accumsan, et rhoncus leo tincidunt. Ut suscipit orci sed ultrices commodo. Vestibulum sed purus semper, ullamcorper metus in, ultrices nulla. Aliquam erat volutpat. Mauris non tellus pretium, accumsan velit eu, suscipit ipsum. Integer risus dui, feugiat id rutrum ut, aliquet et arcu. Duis ac lacus ac magna pretium semper ut ut metus. Phasellus nec elit quis erat condimentum tincidunt. Vestibulum porttitor tincidunt dui, eu ornare massa fringilla sit amet. Cras et maximus justo. Aenean non enim vel massa pulvinar congue. Phasellus quis nisi vel mauris gravida tempor. Mauris sed fringilla lacus, interdum fermentum massa. Quisque pretium sollicitudin sapien vitae cursus.                
            </TextBlock>
            <StackPanel Orientation="Horizontal">
                <Rectangle Fill="Blue" Width="200" Height="200" VerticalAlignment="Top" />
                <StackPanel>
                    <Rectangle Fill="Red" Width="100" Height="100" />
                    <Rectangle Fill="Yellow" Width="100" Height="100" />
                </StackPanel>

            </StackPanel>
        </StackPanel>
    </StackPanel>
</Page>
本文标签 : # #
分享到: