Layout1:Grid(补交作业)
Layout1:Grid
这一节我们来讲解一下一个layout:gird。
首先上一段代码:
<Page
x:Class="Gridstudy.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Gridstudy"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Name="GridRoot">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle Height="100" Fill="Red" Grid.Row="0" />
<Rectangle Grid.Row="1" Fill="Black"/>
</Grid>
</Page>
先对<Grid Name = "GridRoot">方便我们以后在c#代码中对Grid的调用。
然后:
1、明白grid在默认状态下是一行一列的,显示整个屏幕。grid存在的意义就在于定义行和列。
然后定义行
我们可以看到,定义了两行,第一行height = “Auto”,第二行的height = “*”
2、Auto 的含义是:在行里面放多大东西,我的行就会扩展到多大,当然了,不可能超过屏幕的大小。所以有auto(自动)。
3、*的定义是,尽可能利用剩下的地方,make it available。这个地方我也不太懂,希望大家批评指正。
4、对行的定义中,没有定义行的宽度,而默认的宽度则为全屏幕宽。
5、若把auto改为200,则说明第一列给出了200的范围,然后看下面建立了一个高为100的矩形,效果如下:
若是把auto改为50,则说明只给了50的地方大小,而矩形为100,得到的效果如下:
说明了前面就是所给范围,所给范围如果为auto,则可以达到自适应,若不是auto,则最大也就是刚开始设定的那么大了。
6、说一说,为什么要用到Grid.Row = "0" 或者是 1呢?
这个问题就是一个编号问题,建立的第一块地当然是0编号,第二块地当然是1编号,然后在0编号地上建造矩形,标明row = "0", 同理在1号地上建造东西则标明是 row = “1”。 而在0号上不用写其实,因为是默认的。
7、一些有趣的实现(抄袭)大家理解即可,自己可以玩一玩layout
<Grid Name="GridRoot">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock FontSize="100">1</TextBlock>
<TextBlock Grid.Column="1" FontSize="100">2</TextBlock>
<TextBlock Grid.Column="2" FontSize="100">3</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1" FontSize="100">4</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="1" FontSize="100">5</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="1" FontSize="100">6</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="2" FontSize="100">7</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="2" FontSize="100">8</TextBlock>
<TextBlock Grid.Column="2" Grid.Row="2" FontSize="100">9</TextBlock>
</Grid>
<Rectangle Fill="Blue"
Height="100"
Width="100"
HorizontalAlignment="Left"
VerticalAlignment="Top"/>
<Rectangle Fill="Red"
Height="100"
Width="100"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"/>
<Rectangle Fill="Green"
Height="100"
Width="100"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
<Rectangle Fill="Yellow"
Height="100"
Width="100"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="100,100,0,0"/>
<Rectangle Fill="White"
Height="100"
Width="100"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="50,0,0,50"/>
要说明的是:horizontalAlignment是水平方向上靠近左边还是右边,还是中间什么的……
verticalAlignment是竖直方向上靠近上边下边还是中间什么的……
然而margin(边缘)则细化了离左边多远,离上边多远,离右边多远,离下边多远,如果这是靠近左上方的,那么距离左边和距离上边的两个值有效,距离右边和下边的一般设为0就好,我试了一下,足够大的时候也会有效,那是因为它当大于被忽略的值时,就会产生效果。把物体推离某边缘。靠近左上方说明靠左边和上边推动是小的,然而,如果右边和下边的推动也达到临界值,他们也会产生效果,可能会看不见某个框了……,这个理解就好了,其实设为0就好,毕竟两点就可以确定一个位置……
Layout1:Grid(补交作业)的更多相关文章
- Mycp补交作业
Mycp补交作业 代码 import java.io.; import java.lang.; import java.util.Scanner; public class MyCP { public ...
- Common xaml controls(补交作业)
Common xaml controls 常见的xaml控件: 先上一段代码,把他们基本都实现出来: <Grid Name="MyGrid"> <Button N ...
- 对xaml的深入探究(补交作业)
首先,下结论,看完那个外国老师的视频后,5%左右听懂了,分享给大家: 1.理解一下,xaml是特殊的xml,我们可以从代码语法看出,xaml中的打码很类似与html和xml的代码. 2.xaml.cs ...
- 补交作业-第八周PSP
一.表格 C(分类) C(内容) S(开始时间) ST(结束时间) I(打断时间) △(净工作时间) 讨论 用户界面 9:30 10:40 15 55 编码 编码 13:20 16:30 10 180 ...
- 补交作业——Beta发布评论
1.飞天小女警: 礼物挑选这一项目是很好的点子,比较能够吸引客户,更加方便快捷的挑选也满足现代人在送礼物方面的需求.这一次的发布界面效果好了很多,并且成功的发布到了云服务器上. 2.nice! : 这 ...
- mycp 补交作业
老师好:我昨天做完时已经是11点多了,错过了提交时间,希望用此篇博客弥补一下我的过失. import java.io.; import java.lang.; import java.util.Sca ...
- Event(补交作业)
三种方法可以创建Eventhandler 1.
- Layout2:StackPanel(补交作业)
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" > <Rect ...
- window phone8.1 hello,world(补交作业)
第一步,我们需要创建一个简单的hello,world程序来帮助我们了解大致的方向. 下面是这个小例子的步骤: 1.打开vs,点击 文件-新建-项目:如图:
随机推荐
- SVN的“Invalid authz configuration”错误的解决方法
公司有人离职后,我把他svn账号删除 然后就报这个错了,我检查了authz文件,完全看不出什么错误.... 网上的各种方法试一遍,无果. 蹲个厕所,继续查这个问题 看到一个答案: 给不存在的组配置权限 ...
- alinode 配置 pm2
今天公司要配置阿里的一个node.js性能监控(alinode),这个东西看似配置很简单但是你不知道你配置对没对, 因为他需要1分钟后才能显示出来,而且模块依赖我等了10分钟才出来, 文档的链接htt ...
- spring4-2-bean配置-7-Spring表达式语言SpEL
- 图解Git
转载自http://marklodato.github.io/visual-git-guide/index-zh-cn.html#diff 图解Git 其他语言: Deutsch English Es ...
- [C++] c language 23 keywords
c language keywords
- code4511 信息传递
寻找最小环 #include <cstdio> #include <cstring> #include <iostream> using namespace std ...
- HBase数据读写流程(1.3.1)
===数据写入流程=== 源码:https://github.com/apache/hbase/blob/master/hbase-server/src/main/java/org/apache/ha ...
- javascript总结24:Array常用的队列操作和排序方法
1 数组-引用类型 JavaScript中的内置对象 复习数组的使用 两种创建数组的方式 Array对象的属性 length 获取数组的长度(元素个数) 2 常用方法 : 检测数组 instanceo ...
- Swift实现Touch ID验证
iOS8开放了很多API,包括HomeKit.HealthKit什么的.我们这里要说的是其中之一的Touch ID验证. 以前用app保护用户的隐私内容,只能设定和输入密码.眼看着只能是iPhone本 ...
- 编写高质量代码改善C#程序的157个建议——建议94:区别对待override和new
建议94:区别对待override和new override和new使类型体系应为继承而呈现出多态性.多态要求子类具有与基类同名的方法,override和new的作用就是: 如果子类中的方法前面带有n ...