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(补交作业)的更多相关文章

  1. Mycp补交作业

    Mycp补交作业 代码 import java.io.; import java.lang.; import java.util.Scanner; public class MyCP { public ...

  2. Common xaml controls(补交作业)

    Common xaml controls 常见的xaml控件: 先上一段代码,把他们基本都实现出来: <Grid Name="MyGrid"> <Button N ...

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

    首先,下结论,看完那个外国老师的视频后,5%左右听懂了,分享给大家: 1.理解一下,xaml是特殊的xml,我们可以从代码语法看出,xaml中的打码很类似与html和xml的代码. 2.xaml.cs ...

  4. 补交作业-第八周PSP

    一.表格 C(分类) C(内容) S(开始时间) ST(结束时间) I(打断时间) △(净工作时间) 讨论 用户界面 9:30 10:40 15 55 编码 编码 13:20 16:30 10 180 ...

  5. 补交作业——Beta发布评论

    1.飞天小女警: 礼物挑选这一项目是很好的点子,比较能够吸引客户,更加方便快捷的挑选也满足现代人在送礼物方面的需求.这一次的发布界面效果好了很多,并且成功的发布到了云服务器上. 2.nice! : 这 ...

  6. mycp 补交作业

    老师好:我昨天做完时已经是11点多了,错过了提交时间,希望用此篇博客弥补一下我的过失. import java.io.; import java.lang.; import java.util.Sca ...

  7. Event(补交作业)

    三种方法可以创建Eventhandler 1.

  8. Layout2:StackPanel(补交作业)

    <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" > <Rect ...

  9. window phone8.1 hello,world(补交作业)

    第一步,我们需要创建一个简单的hello,world程序来帮助我们了解大致的方向. 下面是这个小例子的步骤: 1.打开vs,点击 文件-新建-项目:如图:

随机推荐

  1. 第十一条理解objc_masgSend的作用

    Objetive-C最基本的的东西就是它的消息机制.Objective-C运行时的最基本的东西就是 objc_msgSend, 它就是负责发送一个消息给对象的C函数.   当你写下面这样的代码时:   ...

  2. 26-三个水杯(bfs)

    三个水杯 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 给出三个水杯,大小不一,并且只有最大的水杯的水是装满的,其余两个为空杯子.三个水杯之间相互倒水,并且水杯没有 ...

  3. CSS中的元素分类

    CSS中的元素分类 元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为"盒子").但是不同的元素显示的方式会有所不同,例如<div> ...

  4. OpenCV之设计模式

    参考资料: http://hahack.com/codes/opencv-and-mvc/ http://blog.csdn.net/yzhang6_10/article/details/508084 ...

  5. Openssl dsaparam命令

    一.简介 dsaparam指令用来生成和操作dsa参数 二.语法 openssl dsaparam [-inform DER|PEM] [-outform DER|PEM] [-in filename ...

  6. JS作用域理解(声明提升)

    1.JS解析步骤: a.预解析 将变量声明提升: 将函数声明及函数内容提升,可以理解成原来位置的函数在解析代码时已经提到代码初始位置: 块内的变量声明和函数声明也会被提升,例如if语句 遇到重名,只留 ...

  7. list 返回列表null替换

    function formatt(rec, val, index) { if (rec === null || rec == "null") { return "0&qu ...

  8. mysql 添加字段,修改字段的用法

    1.添加字段 ALTER TABLE 表明 add 字段名称 类型(int,char,VARCHAR...) DEFAULT 默认值  位置(FIRST, AFTER+字段名称); 2.删除 ALTE ...

  9. SQL数据透视

    透视是一种通过聚合和旋转把数据行转换成数据列的技术.当透视数据时,需要确定三个要素:要在行(分组元素)中看到的元素,要在列(扩展元素)上看到的元素,要在数据部分看到的元素(聚合元素). SQL Ser ...

  10. https hsts 私密链接

    chrome强制转跳https,删除对某个域名的强制转跳即可 hrome的地址栏输入:chrome://net-internals/#hsts   在Delete domain下输入相对应的网址,不带 ...