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就好,毕竟两点就可以确定一个位置……

时间: 2024-10-20 18:11:56

Layout1:Grid(补交作业)的相关文章

补交作业5

利益相关者(stakeholder) 用户:老师 顾客:学生.教务处 软件工程师 竞争需求分析 N 用户登录输入登录信息时需优化 对登录错误信息的提示需要改进 任选课学生名单需要改善 对录入成绩的保存进行改进 用户界面的设计 验证码的改进 A 输入教师号时即时检索号码是否符合规则 输入密码时提示大小写,并添加显示密码功能 抛出具体错误信息,如:用户不存在.密码错误等 区分任选课和必选课,对于任选课只显示选课学生信息 每当录入完一人成绩系统即时保存,以防断电等突发情况 摒弃无关紧要的东西,使界面简

补交作业7

作业7:用户体验设计案例分析 UX设计评价准则 给用户及时快速反馈: 界面符合惯例: 用户控制权(主人): 一致性和标准化: 适合各类用户(不绝对): 帮助用户排除软件缺陷: 必要的提示和帮助文档: 要求: 基于我们列出的 7 条UX评价准则,分析“南通大学教务管理系统微信公众号” 在用户体验设计方面让你觉得满意的地方(不少于2点):(20分),请陈述理由. 同样,分析“南通大学教务管理系统微信公众号” 在用户体验设计方面让你觉得最不满意的地方(不少于2点):(20分),请陈述理由. 回答上述问

Common xaml controls(补交作业)

Common xaml controls 常见的xaml控件: 先上一段代码,把他们基本都实现出来: <Grid Name="MyGrid"> <Button Name="button" Content="Button" HorizontalAlignment="Left" Margin="0,97,0,0" Click="button_Click" VerticalA

对xaml的深入探究(补交作业)

首先,下结论,看完那个外国老师的视频后,5%左右听懂了,分享给大家: 1.理解一下,xaml是特殊的xml,我们可以从代码语法看出,xaml中的打码很类似与html和xml的代码. 2.xaml.cs文件中是c#代码,而xaml是特殊xml,所以所用代码不同,从实现方法来看,我们可以去xaml.cs里面的OnNavigatedTo()函数中去添加button,然后设置各种属性,然而这种纯c#代码的实现显得十分困难,库也比较难找.而xaml有preview和属性界面,为开发人员提供了极大的便利.

补交作业 耿奥

<C语言程序设计>实验报告 学 号 160809205 姓 名 耿奥 专业.班 计科16-2班 学    期 2016-2017 第1学期 指导教师 黄俊莲 吴喆 实验地点 C区机房 机 器 号 上课时间 2016年 9 月 22 日    2 周 周四  1-4 节 截止时间 2016年 9 月 28 日    3 周 周三 12:00 实验任务清单 实验2-1 输入3个数,并按由大到小的顺序输出. 实验2-2 从键盘上输入x的值,并根据计算输出y的值 实验2-3从键盘上输入一个字母,如果是

补交作业 beta发布评论

1.新蜂小组:俄罗斯方块,主要功能大体上都实现了,界面效果也在增强中,会继续做出更完整的作品. 2.Nice团队:约跑APP,能够创建约跑信息,主要功能都实现了,一个很好的APP,期待更完整的APP. 3.飞天小女警:礼物挑选工具,界面很好,功能很棒,看到这个小组在网上搜集的信息,感觉很棒,付出很多努力. 4.金州勇士:在线考试,界面简单明了,功能强大,实用性很高. 5.奋斗吧兄弟:食物链教学工具,界面很棒,功能也很好,很容易让学生沉浸在学习中. 6.天天向上:连连看,有背景音乐,给人很棒的效果

补交作业——上周PSP

团队项目PSP 一:表格     C类型 C内容 S开始时间 E结束时间 I时间间隔 T净时间(mins) 预计花费时间(mins) 讨论 讨论用户界面 9:27 10:42 18 57 60 分析与设计 设计网页界面 13:30 16:37 20 187 286 编码 具体编码 9:35 20:40 890 168 510 调试运行 修改代码.代码复审 20:45 22:08 40 123 85 总结 总结结果 23:43 23:50 0 31 38 二:饼图 三:进度条 进度条 第一周 第二

补交作业——Beta发布评论

1.飞天小女警: 礼物挑选这一项目是很好的点子,比较能够吸引客户,更加方便快捷的挑选也满足现代人在送礼物方面的需求.这一次的发布界面效果好了很多,并且成功的发布到了云服务器上. 2.nice! : 这一小组目前基本做到可以用APP互相约定,但是在展示过程中遇到了一些问题,说明准备不是很充足,但是基本功能还是实现了. 3.天天向上: 这一小组的连连看项目,从最开始的发布效果就是最好的,这一次的发布整个游戏的完成程度比较高,音乐和背景也很不错,还添加了部分游戏音效,比较不错. 4.新蜂: 这一次的发

补交作业需求spec——考试管理模块需求分析

当需要考试时考试管理员需要编辑考试信息,设定考生,设定考试时间等相应的信息. 1.编辑考试信息 考试管理员设定相应的考试信息,包括选取试卷,设定考试日期,设定考试开始和结束时间.如图所示. 2.设置考生和控制考试 考生管理员需要设定相应的考生进行考试,考试管理员设定相应的考生时,考生可以在首界面查看到相应的考试信息.到达考试时间由考试管理员点击开始考试进行考试.考试结束后,考试管理员点击考试结束.考生可以看到相应的成绩.