零元學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，中文我把它翻譯為「布局修整」
?
根據MSDN對UseLayoutRounding的介紹
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
如下圖：
?
請設定一個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>
?
請把工作區的大小倍數拉大，或是仔細看
發現不一樣的地方了嗎?
?
左邊的Rectangle邊框是清楚的，但右邊的邊框有點模糊
看右邊的Rectangle時會感覺好像是眼睛度數不夠一樣，物件邊框會霧化，不夠精細
?
這就是UseLayoutRounding設定值的差異
UseLayoutRounding可以改善邊框鋸齒狀與霧化的狀態，取而代之的是明亮乾凈的畫面
?
我將畫面截下來使用繪圖軟體放大到300倍以上
差異就很明顯了
下圖是右邊未使用UseLayoutRoundin的左上角
?
右邊沒有使用UseLayoutRounding的Rectangle周圍出現了灰色的線條
但左邊有使用UseLayoutRounding的Rectangle周圍卻是很平整的
?
有的布局會用切Grid或百分比的方式來切割版面(Grid的介紹請看這裏)
假如說切三等分，那每一等份就是0.33333333，不會是一個整數
?
所以在裏面的物件大小也就不會是整數，畫出來就會有毛毛的感覺
有使用UseLayoutRounding的話，繪圖引擎會強制把它用整數畫出來
看起來就不會毛毛的
?
但另一個布局容器Canvas裏面的物件就不會被影響到，因為Canvas不會影響布局
想了解更多Canvas請到這裏
?
UseLayoutRounding是個很容易被忽略的設定項目
但若能註意到很小的設定，會對你Silverlight的制作加分喔!
?
?
本篇的教學就到此。
?
?
?
(若有任何錯誤的地方，請各位前輩或同好能不吝指教，小女子都會虛心接受；若是你喜歡我的教學，請給我點鼓勵，謝謝。)
一步一步邁向HIE之路
喜歡我文章請推我一下或給我個回應，你的鼓勵會給我無限的動力喔!
若是您有其他問題或是特別需要，請在文章回應處留言，我會盡快回覆您
零元學Expression Blend 4 - Chapter 34 啊~!!我不要毛毛的感覺!-使用布局修整「UseLayoutRounding」