UWP学习笔记11-16

11-16主要是三项作业。

当然了,作业就是要拿来做的啊。哈哈。

11-12

先上效果图:

【普通难度】用Grid布局,效果图。这个是自适应的。

上代码:

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

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.ColumnSpan="2" FontSize="48" Margin="10,0,0,0">来者可是猪?????</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1" Margin="10,0,10,0" VerticalAlignment="Center"   >请问贵姓?</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="2" Margin="10,0,10,0" VerticalAlignment="Center"  >请问大名?</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="3" Margin="10,0,10,0" VerticalAlignment="Center" >请问住处?</TextBlock>
<TextBox Grid.Column="1" Grid.Row="1"  Margin="0,0,10,10"  HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" />
<TextBox Grid.Column="1" Grid.Row="2" Margin="0,0,10,10" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
<TextBox Grid.Column="1" Grid.Row="3" Margin="0,0,10,10" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>
<Button Grid.Column="1" Grid.Row="4" HorizontalAlignment="Left">钦此</Button>

</Grid>
</Page>

一开始,我想打代码,一打开VS,都不知道干什么了。

我把Grid怎么定义行和列忘了!!

哎呀呀。

<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>

</Grid.RowDefinitions>

找了半天才找到。

惭愧啊。

然后,第二个问题出现了。

这TextBox不会变啊。咦,HorizontalContentAlignment="Stretch" ,都有了啊。

先打完代码再说。

Bob说,要文字居中对齐。可是我怎么点都找不到这个属性啊。后来,我发现是这样的。

▲来自诸葛亮的报复

不行啊,这粗心的毛病又来了。名字可不能看错啊。

VerticalAlignment="Center"

好了,来解决最后一个问题了。为什么怎么拉边距都不动呢??

TextBlock,设为“1*”没用啊!

TextBox,设为“1*”没用啊!

Button,设为“1*”没用啊!

不对啊!

只有Grid才能设“*”、“Auto”啊!!!

我真傻、真的!

好了,解决了。
【Bob他是 3 × 3 的,我看到了以后,当时就有一种数学题做错的感觉。】

13-14

【高级难度】

▲“消失的语言”——拉丁语

说说是高级难度,其实呢,由于用的StackPanel,所以,比较简单了,我没遇到什么问题。

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

<StackPanel>
<StackPanel>
<TextBlock FontSize="48" Margin="10,10,10,10">Lorem Ipsum</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,0,10,0">
<StackPanel Width="250">
<TextBlock Margin="10,0,0,0" TextWrapping="WrapWholeWords">
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>
</StackPanel>
<StackPanel Width="500">
<TextBlock TextWrapping="Wrap" Margin="10,0,0,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>

<StackPanel Orientation="Horizontal" Width="300" Margin="10,0,10,10">
<StackPanel Width="150">
<Rectangle Fill="Pink" Height="200">

</Rectangle>
</StackPanel>
<StackPanel Width="150">
<StackPanel>
<Rectangle Fill="Beige" Height="100"/>
<Rectangle Fill="Azure" Height="100"/>
</StackPanel>
</StackPanel>
</StackPanel>
</StackPanel>
</StackPanel>
</Page>

我拼命嵌套,套了一堆一堆的StackPanel。好像太多太多了……

15-16

【究极版】

到了究极,其实也还好啦。

(不是你简单难度的错太多了吗?)

▲逆袭的拉丁文

我和Bob完全走在两个不同的方向上了!

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

<Grid Width="500">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition Width="300"></ColumnDefinition>
<ColumnDefinition Width="10"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock  FontSize="24" Grid.RowSpan="3" Margin="10,10,0,10">No.1</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1" TextWrapping="WrapWholeWords">
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 Grid.Column="1" Grid.Row="2" Orientation="Horizontal">
<Rectangle Fill="Aqua" Height="30" Width="100" />
<Rectangle Fill="BlueViolet" Height="30" Width="100" />
<Rectangle Fill="Gray" Height="30" Width="100" />
</StackPanel>

<TextBlock  FontSize="24" Grid.RowSpan="3" Margin="10,10,0,10" Grid.Row="3">No.2</TextBlock>
<TextBlock Grid.Row="4" Grid.Column="1" TextWrapping="WrapWholeWords">
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 Grid.Column="1" Grid.Row="5" Orientation="Horizontal">
<Rectangle Fill="Pink" Height="30" Width="100" />
<Rectangle Fill="Gold" Height="30" Width="100" />
<Rectangle Fill="Orange" Height="30" Width="100" />
</StackPanel>

<TextBlock  FontSize="24" Grid.RowSpan="3" Margin="10,10,0,10" Grid.Row="6">No.3</TextBlock>
<TextBlock Grid.Row="7" Grid.Column="1" TextWrapping="WrapWholeWords">
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 Grid.Column="1" Grid.Row="8" Orientation="Horizontal">
<Rectangle Fill="BurlyWood" Height="30" Width="100" />
<Rectangle Fill="Goldenrod" Height="30" Width="100" />
<Rectangle Fill="DarkCyan" Height="30" Width="100" />
</StackPanel>
</Grid>
</Page>

我是 10 × 3 的Grid + StackPanel 混搭。而Bob那个我都没怎么看。

不管了不管了。

功能实现就行了。

点赞

发表回复

电子邮件地址不会被公开。必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据