零元学Expression Blend 4 - Chapter 34 啊~!!我不要毛毛的感觉!-使用布局修整「UseLayoutRounding」

简介: 原文:零元学Expression Blend 4 - Chapter 34 啊~!!我不要毛毛的感觉!-使用布局修整「UseLayoutRounding」 本章将介绍UseLayoutRounding,中...
原文: 零元学Expression Blend 4 - Chapter 34 啊~!!我不要毛毛的感觉!-使用布局修整「UseLayoutRounding」

本章将介绍UseLayoutRounding,中文我把它翻译为「布局修整」

英文原文为:Gets or sets a value that determines whether to use rounding behavior that aligns layout to whole pixels.

?

本章将介绍UseLayoutRounding,中文我把它翻译为「布局修整

?

根据MSDNUseLayoutRounding的介绍

UseLayoutRounding:为取得或设定值,这个值决定是否要使用将配置对齐整数像素的进位行为

?

我查了一下英文原文为:

Gets or sets a value that determines whether to use rounding behavior that aligns layout to whole pixels.

?

我想,应该还有更好的表达方式

让我来带大家看看何谓UseLayoutRounding吧!

?

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

?

01

请在专案的工作区中放入两个Rectangle

宽高皆设定为:100.7

按下进阶箭头,你可以在延伸的功能中找到UseLayoutRounding

如下图:

ch34_01.jpg

?

请设定一个Rectangle勾选UseLayoutRounding,另一个Rectangle则不勾选

你也可以直接复制下面的Xaml

   1: <Grid x:Name="LayoutRoot" Background="White">
   2:? 
 
  
 
  
           
  
   3: <Grid.ColumnDefinitions>
 
  
 
  
           
  
   4:? 
 
  
 
  
           
  
   5: <ColumnDefinition Width="0.5*"/>
 
  
 
  
           
  
   6:? 
 
  
 
  
           
  
   7: <ColumnDefinition Width="0.5*"/>
 
  
 
  
           
  
   8:? 
 
  
 
  
           
  
   9: </Grid.ColumnDefinitions>
 
  
 
  
           
  
  10:? 
 
  
 
  
           
  
  11: <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Center" Margin="0" Stroke="Black" Width="100.7" Height="100.7" VerticalAlignment="Center" StrokeThickness="10"/>
 
  
 
  
           
  
  12:? 
 
  
 
  
           
  
  13: <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Center" Margin="0" Stroke="Black" Width="100.7" UseLayoutRounding="False" Height="100.7" Grid.Column="1" VerticalAlignment="Center" StrokeThickness="10"/>
 
  
 
  
           
  
  14:? 
 
  
 
  
           
  
  15: </Grid>
 
  
 
 

?

请把工作区的大小倍数拉大,或是仔细看

发现不一样的地方了吗?

ch34_02.jpg

?

左边的Rectangle边框是清楚的,但右边的边框有点模糊

看右边的Rectangle时会感觉好像是眼睛度数不够一样,物件边框会雾化,不够精细

?

这就是UseLayoutRounding设定值的差异

UseLayoutRounding可以改善边框锯齿状与雾化的状态,取而代之的是明亮乾净的画面

?

我将画面截下来使用绘图软体放大到300倍以上

差异就很明显了

下图是右边未使用UseLayoutRoundin的左上角

ch34_04.jpg

?

右边没有使用UseLayoutRounding的Rectangle周围出现了灰色的线条

但左边有使用UseLayoutRounding的Rectangle周围却是很平整的

ch34_03.jpg

?

有的布局会用切Grid百分比的方式来切割版面(Grid的介绍请看这里)

假如说切三等分,那每一等份就是0.33333333,不会是一个整数

ch34_05.jpg

?

所以在里面的物件大小也就不会是整数,画出来就会有毛毛的感觉

有使用UseLayoutRounding的话,绘图引擎会强制把它用整数画出来

看起来就不会毛毛的

?

但另一个布局容器Canvas里面的物件就不会被影响到,因为Canvas不会影响布局

想了解更多Canvas请到这里

?

UseLayoutRounding是个很容易被忽略的设定项目

但若能注意到很小的设定,会对你Silverlight的制作加分喔!

?

?

本篇的教学就到此。

?

?

?

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

一步一步迈向HIE之路

 

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

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

 

 

目录
相关文章
|
容器
零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I
原文:零元学Expression Blend 4 - Chapter 13 用实例了解布局容器系列-「Pathlistbox」I 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布...
1305 0
|
容器
零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II
原文:零元学Expression Blend 4 - Chapter 14 用实例了解布局容器系列-「Pathlistbox」II 本章将延续上一章的范例,步骤解析。
1301 0
零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里
原文:零元学Expression Blend 4 - Chapter 31 看如何简单的把SampleData 绑进ListBox里 前面几章连续讲到ListBox的运用,本章要讲得是如何简单的把Samp...
1233 0
零元学Expression Blend 4 &ndash; Chapter 43 如何指定Childwindow PopUp位置
原文:零元学Expression Blend 4 &ndash; Chapter 43 如何指定Childwindow PopUp位置 有网友询问我有关Childwindow是否能指定弹出位置? 其实只...
1293 0
|
容器 前端开发
零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」
原文:零元学Expression Blend 4 - Chapter 12 用实例了解布局容器系列-「Viewbox」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的-「Viewbox」; 以及加码赠送安装扩充元件-「Silverlight Toolkit」。
1596 0
|
Web App开发 容器
零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」
原文:零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的是Blend 4 里的布局容器大哥-「Grid」。
1346 0
零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷
原文:零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷 我针对工作区跟视窗的快捷键整理了八个Expression Blend4的快捷,也是...
1196 0
|
内存技术
零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧
原文:零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧 本章将延续上篇零元学Expression Blend4 - Chapter 4元件重复运用的观念所制作的图来进行,教你如何将图做X、Y、Z空间的延伸。
1339 0
|
Web App开发 前端开发 容器
零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」
原文:零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」 本系列将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里被我称为忠於原味的傻大姊-「Canvas」。
1254 0
|
容器
零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」
原文:零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」 将教大家以实做案例认识Blend 4 的布局容器,此章介绍的布局容器是Blend 4 里的专情王子-「Border」。
1265 0