零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」
原文:零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」
本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的-「Viewbox」;
以及加码赠送安装扩充元件-「Silverlight Toolkit」。
?
本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的-「Viewbox」;
以及加码赠送安装扩充元件-「Silverlight Toolkit」。
?
就是要让不会的新手都看的懂!
?
?<扩充元件>
若是你的Expression Blend 4里面没有Viewbox,那麽请到这里下载扩充元件
?
?下载後解压缩执行安装完成就可以使用了!
?
01
我们一步一步来做,看看 Viewbox到底的功用是什麽?
开启一个新专案後,在主要工作区放入一个Viewbox,并调整到适当的位子
?
接着,在Viewbox里面放入你想放的照片或图片;直接拖拉进Viewbox就可以了
再来用在Grid章节学到的,让我们的整个版面可以随着视窗放大缩小
(忘记了吗?快点去复习一下!)
?
完成後,按F5来看效果
?
我们的图片是不是保持等比例的缩放呢?
?
?02
Viewbox可以直接对应Transform的设定
对於Transform的设定,我在先前的章节-2.5D转换的使用技巧-里已经有介绍过了
?
最後附上此范例的Xaml,其实非常简单
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="viewbox.MainPage">
6:?
7: <Grid x:Name="LayoutRoot" Background="White">
8: <Viewbox Margin="0" HorizontalAlignment="Center" VerticalAlignment="Bottom">
9: <Viewbox.Projection>
10: <PlaneProjection RotationX="-63.989" RotationY="14.123" RotationZ="-17.461"/>
11: </Viewbox.Projection>
12: <Image Source="阿兵搞背香蕉(colorful).jpg"/>
13: </Viewbox>
14: </Grid>
15: </UserControl>
?
03
到这边,我们来重点整理:
(1)其实,Viewbox不只可以放入图档,也可以放影片
???? 所以如果想要做到全萤幕显示时,Viewbox是很好的Layout Controls
(2)Viewbox跟Border一样,一次至只能容纳一个子物件
??? 若是你想在Viewbox内加入第二个以上的子物件,那你必须先放入一个容器
??? 例如Grid、StackPanel、Canvas,而Broder若是用在这边,效用就不大了,请看Broder的介绍。
?
??? 我直接引用了msdn的xaml,有很清楚的示范;用的是StackPanel,里面放入了两个Image
1: <Grid x:Name="LayoutRoot" Background="White">
2: <Viewbox Height="500" Width="600">
3: <StackPanel Orientation="Horizontal">
4: <Image Source="flower.jpg" />
5: <Image Source="licorice.jpg" />
6: </StackPanel>
7: </Viewbox>
8: </Grid>
?
(3)Viewbox可以决定其子物件如何伸缩、对齐
(4)ViewBox可以使置入的子物件能随着视窗的缩放,但保持等比例
?
04
这里有一个外国人运用Viewbox所做出来的9格拼图小游戏
?
不过比较不一样的是,他是反过来用的
平常是拿Viewbox当容器,但是这边是把Viewbox当成笔刷的显示容器
这里的运用是让你把视窗拉大时,拼图的图片也可以变大来玩
?
?
老话一句,想要有好的版面设计、想要设计出心里想要的布局,一定要会善用容器喔!
还有很多Layout Controls,让我们慢慢的来学习吧! :)
?
?
本篇的教学就到此。
?
?
(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)
一步一步迈向HIE之路
喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您
零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」的更多相关文章
- 零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I
原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局 ...
- 零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」
原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend ...
- 零元学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 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为实作案例. ? ...
随机推荐
- Warning: file_put_contents(常用单词1.txt): failed to open stream: Invalid argument in
Warning: file_put_contents(常用单词1.txt): failed to open stream: Invalid argument in 一.总结 1.上述问题是因为Win ...
- UE4.5.0的Kinect插件(Plugin)---插件使用说明<二>
声明:所有权利保留. 转载必须说明出处:http://blog.csdn.net/cartzhang/article/details/43563959 一.起因: 写了个UE4的Kinect的插件,结 ...
- SQLite编码
•SQLite编码 •讲师:李明杰 •技术博客:http://www.cnblogs.com/mjios •SQLite3 •在iOS中使用SQLite3,首先要添加库文件libsqlite3.dyl ...
- iOS中,MRC和ARC混编
假设一个project为MRC,当中要加入ARC的文件: 选择target -> build phases -> compile sources -> 单击ARC的文件将compil ...
- cordova-plugin-android-update安卓版本更新插件使用
原文:cordova-plugin-android-update安卓版本更新插件使用 安装插件,使用方法官方都有. 安卓7.0以上要在AndroidMainfest.xml里加一句 <uses- ...
- ue 不能初始化ftp组件
进入到ue的安装目录下shift并右键-->在此处打开命令窗口,执行以下命令 regsvr32.exe wodFtpDLX.dll,如果是64位要执行regsvr32.exe wodFtpDLX ...
- Power control within a coherent multi-processing system
Within a multi-processing system including a plurality of processor cores 4, 6operating in accordanc ...
- linux下仅仅有rman备份集的异机不同文件夹恢复
昨天在客户那里做了一次rman异机的恢复,把生产库弄一份给測试库用,总库大概80G,总共花费了2个小时,当时客户的环境是windows 11.2.0.3,今天早晨在linux下又一次測试了一下,记录下 ...
- 分布式事务slides
最近看了<分布式系统概念与设计 第 5 版>的分布式事务章节,整理了一份 ppt.还有恢复部分没有收录进来,有空再整理啦. 下面是传到 deckspeaker 上的 slides 展示: ...
- WPF中 MVVM模式的Slider Binding.
对于Button的Command的绑定可以通过实现ICommand接口来进行,但是Slider并没有Command属性. 另外如果要实现MVVM模式的话,需要将一些Method和Slider的Even ...