原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」

本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的布局容器大哥-「Grid」。

?

本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的布局容器大哥-「Grid」。

?

?

?

就是要让不会的新手都看的懂!

?

?

?

<实至名归的容器大哥>

Blend 4内的容器有很多种,比较常运用到的除了有Grid、Canvas、Border、StackPanel,还有可以配合运用的DockPanel、GridSplitter、以及新增加的PathListBox等等。

当然还有其他的容器,以後会一一介绍。

?

开启一个新专案,我们可以看到在Blend 4主要工作区就是以Grid做为预设的容器。

?

简单来说,Grid就像是html的table一样,为设计页面时最外层的版型容器,而Grid也是最常用到的布局容器。

学好布局容器是很重要的,若不会善用容器,很容易就会发生做不出预期相同的版面,而你会了Grid,就等於会了一半的容器了!!

?

?

<以实做学会Grid> 运用(一)

本段要教大家如何运用Grid的特性,让页面里的物件不会因为浏览器的视窗大小而改变物件大小。

?

01

打开Blend 4 後选择Top Menu的 File->New Project(快捷键Shift+Ctrl+N)。

选择Silverlight Application+ Website为你的项目类型;把主要工作区大小改为800*600後,我们把版面切成九格。

在Blend4 中分割行跟列,只需要将滑鼠放在主要版面的外围深蓝色区块上,单击滑鼠後就会产生分割线。

分割完後,我们运用分割线的位置设定把版面调成九等份,如下图:

可以看到Layout的width的地方,我们设定为0.33,值为Star。

以原始码来看,行跟列皆为0".33*",0.33後面的星号,代表着该行或该列宽度或高度将会跟着内容的改变而改变;

相反的,若是没有星号,代表着该行列不会因为内容的改变而改变,会固定宽高值。

?

		   1: <UserControl

		   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

		   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

		   4:     x:Class="SilverlightApplication3.MainPage"

		   5:     Width="800" Height="600">

		   6:? 

		   7:     <Grid x:Name="LayoutRoot" Background="White">

		   8:         <Grid.RowDefinitions>

		   9:             <RowDefinition Height="0.33*"/>

		  10:             <RowDefinition Height="0.33*"/>

		  11:             <RowDefinition Height="0.33*"/>

		  12:         </Grid.RowDefinitions>

		  13:         <Grid.ColumnDefinitions>

		  14:             <ColumnDefinition Width="0.33*"/>

		  15:             <ColumnDefinition Width="0.33*"/>

		  16:             <ColumnDefinition Width="0.33*"/>

		  17:         </Grid.ColumnDefinitions>

		  18:     </Grid>

		  19: </UserControl>

?

02

接着我们放入9个相同大小的Rectangle。

我随意的在9格里面各放一个之後,全选它们,一并设定长、宽,还有边界。

如下图:

?

完成後,按下F5,我们来看看效果。

?

请拖动浏览器右下角,使浏览器的视窗变大或缩小。

发现了吗?我们所置入的9个Rectangle并没有因为浏览器的视窗变大或缩小而有所改变。

?

那若是我们要让所置入的物件能跟着浏览器等比例的变大或缩小该如何设定呢?

?

<以实做学会Grid> 运用(二)

本段要教大家如何运用Grid的特性,让页面里的物件可以藉着浏览器视窗缩放达到等比例的改变。

?

01

我们直接使用刚刚的专案来做应用。

同样的,我们全选9个Rectangle後,点选Layout的width还有heigh後方的Set of Auto;为了清楚的分隔每个Rectangle,所以我们把边界的距离拉大,接设为10。

接着,UserControl的width与heigh也要一并改为Auto,会变成下图:

?

Rectangle都不见了!?

别紧张,我们看看原始码:

		   1: <UserControl

		   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

		   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

		   4:     x:Class="SilverlightApplication3.MainPage">

		   5:? 

		   6:     <Grid x:Name="LayoutRoot" Background="White">

		   7:         <Grid.RowDefinitions>

		   8:             <RowDefinition Height="0.333*"/>

		   9:             <RowDefinition Height="0.333*"/>

		  10:             <RowDefinition Height="0.333*"/>

		  11:         </Grid.RowDefinitions>

		  12:         <Grid.ColumnDefinitions>

		  13:             <ColumnDefinition Width="0.334*"/>

		  14:             <ColumnDefinition Width="0.334*"/>

		  15:             <ColumnDefinition Width="0.332*"/>

		  16:         </Grid.ColumnDefinitions>

		  17:         <Rectangle Fill="#FF212168" Margin="10" Stroke="Black"/>

		  18:         <Rectangle Grid.Column="1" Fill="#FF212168" Margin="10" Stroke="Black"/>

		  19:         <Rectangle Grid.Column="2" Fill="#FF212168" Margin="10" Stroke="Black"/>

		  20:         <Rectangle Fill="#FF212168" Margin="10" Grid.Row="1" Stroke="Black"/>

		  21:         <Rectangle Grid.Column="1" Fill="#FF212168" Margin="10" Grid.Row="1" Stroke="Black"/>

		  22:         <Rectangle Grid.Column="2" Fill="#FF212168" Margin="10" Grid.Row="1" Stroke="Black"/>

		  23:         <Rectangle Fill="#FF212168" Margin="10" Grid.Row="2" Stroke="Black"/>

		  24:         <Rectangle Grid.Column="1" Fill="#FF212168" Margin="10" Grid.Row="2" Stroke="Black"/>

		  25:         <Rectangle Grid.Column="2" Fill="#FF212168" Margin="10" Grid.Row="2" Stroke="Black"/>

		  26:     </Grid>

		  27: </UserControl>

我们可以很明显的看到,原本在原始码第五行的地方,UserControl的width为800、height为600;

?

而现在我们UserControl的width与height皆为Auto,所以原始码不会显示,原因是因为Auto是UserControl容器的预设值。

往下拉,有9个我们设计好的Rectangle。

?

完成後,按下F5,我们来看看效果。

?

请拖动浏览器右下角,使浏览器的视窗变大或缩小。

你会了解,我们所置入的9个Rectangle能跟着浏览器等比例的变大或缩小。

?

Grid厉害的地方不只这样喔!

想知道Grid的还能怎麽使用吗?

~下集待续~

?

?

?

本篇的教学就到此。

?

(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)

一步一步迈向HIE之路

喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您

 

零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」的更多相关文章

  1. 零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II

    原文:零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II 本章将延续上一章的范例,步骤解析. 本章将延续上一章的范例,步骤解析 ...

  2. 零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」

    原文:零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Bl ...

  3. 零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I

    原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局 ...

  4. 零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」

    原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend ...

  5. 零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」

    原文:零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器 ...

  6. 零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」

    原文:零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blen ...

  7. 零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II

    原文:零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II 延续上一章的CheckBox教学,本章将以实作继续延伸更灵活的运用CheckB ...

  8. 零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I

    原文:零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I 本章将教大家如何运用CheckBox做实作上的变化:教你如何把CheckBox变 ...

  9. 零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II

    原文:零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II 本章将教大家如何制作自己的Button,并以玻璃质感Button为实作案例. ? ...

随机推荐

  1. 线程基础:JDK1.5+(9)——线程新特性(中)

    (接上文<线程基础:JDK1.5+(8)--线程新特性(上)>) 3.工作在多线程环境下的"计数器": 从这个小节開始,我们将以一个"赛跑"的样例. ...

  2. App各种Icon及Launch image的尺寸和用途

    App各种Icon及Launch image的尺寸和用途 IOS7,8 Asset iPhone 6 Plus (@3x) iPhone 6 and iPhone 5 (@2x) iPhone 4s ...

  3. NOIP模拟 cube - 数学

    题目原文: 豆豆还是觉得自己智商太低了,就又去做数学题了.一看到题,他就觉得自己可能真的一点智商都没有.便哭着跑来像 dalao 求教:如果存在正整数 A,B ,满足 A3 - B3 = x ,则称质 ...

  4. AJAX跨域与JSONP的一点实践经验

    前几个周,项目中遇到了AJAX跨域的问题,然后找资料解决了. 首先要说明一点,关于AJAX的跨域原理和实践,我的经验还是比较少的,我只是大致看了下网上的资料,结合自己的理解,找到了解决办法,暂时不去仔 ...

  5. C#编写TensorFlow人工智能应用

    C#编写TensorFlow人工智能应用 TensorFlowSharp入门使用C#编写TensorFlow人工智能应用学习. TensorFlow简单介绍 TensorFlow 是谷歌的第二代机器学 ...

  6. 到底有多少种智能指针(smart pointer)

    最近Qt的blog总结了到底有多少种smart pointer, 下面是一个简要的介绍: 1.   QPointer :提供对指针的保护,当一个指针被删除以后,再使用不会造成野指针或者指针溢出.比如 ...

  7. Zero Downtime Upgrade of Oracle 10g to Oracle 11g Using GoldenGate — 1

    Source Database DB Name:        zwc Schemas:         HR,OE,PM Version:          10.2.0.4 RAC:       ...

  8. 【35.56%】【727A】Transformation: from A to B

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  9. 用Ruby实现的论坛灌水工具:CC98 Post Machine

    介绍 ZJU 的校网论坛 CC98 比较活跃.论坛只对校内网开放,而且账号跟学生绑定,每个学生注册的账号数量有限.『十大』是 CC98 的经典页面:基于关注的人数(回帖的用户数而不是回帖的数量)用算法 ...

  10. Android客户端后台发送邮件(JMail)

    今天在做项目的时候要处理用户注册问题,里面有个邮箱验证,网上找了一下果然有人做过,但是我拿过来都运行不起来,或者是发送不了邮件.后来我对这个浅浅的研究了一下,贴出来和大家共享. Activity pa ...