零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」
原文:零元学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」的更多相关文章
- 零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」
原文:零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Bl ...
- 零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」
原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的 ...
- 零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II
原文:零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II 本章将延续上一章的范例,步骤解析. 本章将延续上一章的范例,步骤解析 ...
- 零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I
原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局 ...
- 零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」
原文:零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器 ...
- 零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」
原文:零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blen ...
- 零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II
原文:零元学Expression Blend 4 - Chapter 18 用实例了解互动控制项「CheckBox」II 延续上一章的CheckBox教学,本章将以实作继续延伸更灵活的运用CheckB ...
- 零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I
原文:零元学Expression Blend 4 - Chapter 17 用实例了解互动控制项「CheckBox」I 本章将教大家如何运用CheckBox做实作上的变化:教你如何把CheckBox变 ...
- 零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II
原文:零元学Expression Blend 4 - Chapter 16 用实例了解互动控制项「Button」II 本章将教大家如何制作自己的Button,并以玻璃质感Button为实作案例. ? ...
随机推荐
- java pns
http://autumnrain-zgq.iteye.com/blog/1743279 http://blog.csdn.net/a351945755/article/details/2218939 ...
- OpenGLES 关于 数学 的分支 - 线性变化量、离散量、随机量
关于 数学 的分支 - 线性变化量.离散量.随机量 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作 ...
- 卷积与反卷积、步长(stride)与重叠(overlap)
1. 卷积与反卷积 如上图演示了卷积核反卷积的过程,定义输入矩阵为 I(4×4),卷积核为 K(3×3),输出矩阵为 O(2×2): 卷积的过程为:Conv(I,W)=O 反卷积的过称为:Deconv ...
- Eclipse使用技巧总结(六)
四十.增量查找 Ctrl + J : Ctrl + Shift + J: 四十一.快速跳到某行 Ctrl + L 四十二.快速比较不同 Window-->Preference___查找quick ...
- java 读取项目外面配置文件的方法
public static void loadProps(String propertiesUrl) { props = new Properties(); InputStream in = null ...
- Android检测网络是否可用并获取网络类型
在类中使用getSystemService的时候需要这样进行使用:1. public class JajaMenu extends Activity { public static JajaMenu ...
- Heterogeneous Self-Organizing Network for Access and Backhaul
This application discloses methods for creating self-organizing networks implemented on heterogeneou ...
- docker入门2:基础操作(1)
-- 列出所有的容器 docker ps -a (没有-a就是只列出启动的) -- 开启/关闭/移除容器 docker start|stop|rm CONTAINER_ID|CONTAINER_NA ...
- CUDA软件架构—网格(Grid)、线程块(Block)和线程(Thread)的组织关系以及线程索引的计算公式
网格(Grid).线程块(Block)和线程(Thread)的组织关系 CUDA的软件架构由网格(Grid).线程块(Block)和线程(Thread)组成,相当于把GPU上的计算单元分为若干(2~3 ...
- jQuery.noop
一个空函数 当你仅仅想要传递一个空函数的时候,就用他吧.这对一些插件作者很有用,当插件提供了一个可选的回调函数接口,那么如果调用的时候没有传递这个回调函数,就用jQuery.noop来代替执行.