博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Layout1:Grid(补交作业)
阅读量:5162 次
发布时间:2019-06-13

本文共 3125 字,大约阅读时间需要 10 分钟。

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

转载于:https://www.cnblogs.com/yanwenxiong/p/4463685.html

你可能感兴趣的文章
prop attr
查看>>
android BadgeView的使用(图片上的文字提醒)
查看>>
homework-09
查看>>
如何上传文件
查看>>
35 个 Java 代码性能优化总结
查看>>
怎样才能自学好Java?
查看>>
php英语单词,php常用英语单词,快速学习php编程英语(4)
查看>>
5月29,48h,Geekathon,创业极客的梦想起点
查看>>
bzoj4415: [Shoi2013]发牌
查看>>
JAVA基础——使用配置文件
查看>>
Unicode转字符串
查看>>
Keil C51汉字显示的bug问题
查看>>
网页浮动的解析
查看>>
webgis技术在智慧城市综合治理(9+X)网格化社会管理平台(综治平台)的应用研究...
查看>>
Ansible--项目实战
查看>>
一步一步制作yaffs/yaffs2根文件系统(六)---完善命令行提示符
查看>>
不同间距BGA的过孔及规则设置
查看>>
堆和栈
查看>>
92. Reverse Linked List II
查看>>
Team Dipper
查看>>