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

将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」。

?
?

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

?

?

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

?

<专情王子?查理B>

Border是Blend里最简单的布局容器,可以使用Border制作一个带有边框的布局容器。

Border最重要的特色是,Border内只允许容纳一种子物件

?

我们直接延续着上一章的范例往下做。

?

01

运用上一章的范例,在主要工作区放入一个Border

?

接着,把范例所做的ScrollViewer拉进刚刚的Border里面

?

可以测试一下,Border是不是只能放入一个子物件。

会发现,Border只能放入一个子物件,但是子物件却不受这个限制;

让我们从原始码来看:

		   1: <UserControl

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

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

		   4:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"

		   5:     x:Class="SilverlightApplication16.MainPage"

		   6:     Width="640" Height="480">

		   7:? 

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

		   9:         <Border BorderBrush="Black" BorderThickness="1" Margin="227,110,201,91">

		  10:             <ScrollViewer Margin="0" Cursor="Arrow" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" BorderThickness="0">

		  11:                 <StackPanel d:LayoutOverrides="VerticalAlignment" Height="296" Width="140">

		  12:                     <Button Content="Button" Margin="7"/>

		  13:                     <Button Content="Button" Margin="7,0"/>

		  14:                     <Button Content="Button" Margin="7,7,7,0"/>

		  15:                     <Button Content="Button" Margin="7,7,7,0"/>

		  16:                     <Button Content="Button" Margin="7,7,7,0"/>

		  17:                     <Button Content="Button" Margin="7,7,7,0"/>

		  18:                     <Button Content="Button" Margin="7,7,7,0"/>

		  19:                     <Button Content="Button" Margin="7,7,7,0"/>

		  20:                     <Button Content="Button" Margin="7,7,7,0"/>

		  21:                     <Button Content="Button" Margin="7,7,7,0"/>

		  22:                 </StackPanel>

		  23:             </ScrollViewer>

		  24:         </Border>

		  25:     </Grid>

		  26: </UserControl>

?

在我们的范例里Border包含了一个ScrollViewer,不过StackPanel却包含了数个Button。

?

这边我们可以从Properties设定Border的长相。

设定Border的边框粗细Properties->Appearance->BroderThickness

接着改变边框颜色Properties->Brushes->BorderBrush

?

看,我们的ScrollViewer有了新的边框

??

?

02

接下来要教大家如何做Border的变化运用,只需要一点小技巧

若是你不喜欢Border预设的四角方框框,记得把下面的设定技巧学起来喔!

?

开启一个新专案後,在主要工作区放入一个Border

接着设定Properties->Appearance->CornerRadius,打上「20」後看看Border的变化

Border的四个角变成圆角,如下图

?

若是要使其中几个角,变为原角的做法只需要做下面的设定:

在CornerRadius打上「20 , 0 , 50 ,100」,会变为下图的样子

?

由上图得知,可以分别设定四个角的半径弧度,分别是以顺时针方向由左上到左下输入数值。

?

还可以配合BroderThickness加上BorderBrush的设定,做出阴影边框的效果

?

?

?

本篇的教学就到此。

?

?

?

?

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

?

一步一步迈向HIE之路

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

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

 

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

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

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

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

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

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

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

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

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

  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. [Postgre] Insert Data into Postgre Tables

    // Insert one row INSERT INTO movies (title, release_date, count_stars, director_id) VALUES ( 'Kill ...

  2. 使用ant编译项目技能

    ant编译时指定jdk的版本号 系统的jdk版本号是1.6,而项目使用的jdk版本号是1.5.所以在编译时须要指定jdk的版本号为1.5,能够使用以下的方法为javac 任务指定fork和execut ...

  3. Error: unrecognized flag -version

    按照网上的教程http://www.ituring.com.cn/article/13473 来确认node.js是否成功安装. 须要在命令行输入:node -version. 但是我在命令行输入:n ...

  4. [Android]使用ViewPager实现图片滑动展示

    在淘宝等电商的APP首页经常能看到大幅的广告位,通常有多幅经常更新的图片用于展示促销信息,如下图所示: 通常会自动滚动,也可以根据手势滑动.我没有研究过人家的APP是通过什么实现的,可能有第三方已经封 ...

  5. vuex与vue-router学习方案

    1.vuex,官方vuex2.0的文档写得太简略了,先1.0的文档,研究1.0分支的counter例子.1.0文档只需看核心概念和API参考文档.2.0的用法先不管,需要的时候再说,先把1.0高熟练. ...

  6. 回归(regression)的理解(regressor,回归子)

    1. 基本概念 回归(regression)是监督学习(given {(xi,yi)})的一个重要分类.回归用于预测输入变量(自变量,Xi)与输出变量(因变量,Yi) 之间的关系,特定是当输入变量的值 ...

  7. python 和为S的连续正数序列

    题目描述: 小明很喜欢数学,有一天他在做数学作业时,要求计算出9~16的和,他马上就写出了正确答案是100.但是他并不满足于此,他在想究竟有多少种连续的正数序列的和为100(至少包括两个数).没多久, ...

  8. 记一次由于缓存导致的bug

    bug描述 有一张数据库表存储的是 值日员工信息,有时候可能一次性录入1个月的数据.有时候也可能隔了很多天没有录入数据,也就是说这个录数据不是很规律. bug现象:测试人员发现,网站上三亚地区能正常显 ...

  9. 比较实时分布式搜索引擎(senseidb、Solr、elasticsearch)

    1.它们是基于lucene的. 2.它们分布:sensedb它是multi-write;Solr的shards它是master-slave状态.基于pull策略:elasticsearch的shard ...

  10. 关于iis里面 .net framework 版本的切换

    然而,即便这样还是不够的 在iis上浏览网站会报以下错误: 这是什么原因呢?这是因为应用程序池中没有使用asp.net v4.0 网站程序是用v4.0写的,所以我们要用4.0的程序池版本,当前应用程序 ...