上一篇，我介紹了Silverlight控件被分為三種類型， 第一類： Layout Controls（布局控件) 第二類： Item?Controls （項目控件) 第三類： User Interaction Controls（用戶交互控件) ? 在以上三種控件類型中，布局控件是最基礎的，所以，我從布局控件開始一個快速入門介紹，根據前文所述，我們知道Silverlight標準控件中，包括以下四種布局控件： Grid控件 Canvas控件? StackPanel控件 Border控件 經過上一篇文章的學習，我們已經對Grid有了了解，?本文將繼續介紹另外一個布局控件Canvas。 Canvas布局控件，相對于其他布局控件的優勢在于可以自由的設定其包含區域內控件的位置。該控件在Silverlight游戲設計中最為常見，可以實現游戲中獨立部件控制。 使用Blend設置Canvas很簡單，我在上一篇項目基礎上，在0行0列和0行1列中分別創建兩個Canvas，然后在兩個Canvas中創建兩個控件。 選中Canvas后，可以在右邊“Properties”屬性欄中修改其屬性，從屬性欄中可以看出，Canvas是嵌套在Grid中，所以，其位置可以由Grid屬性控制。 選中Canvas中的控件，可以在右邊“Properties”屬性欄中看到該控件在容器Canvas中的位置，包括左距離，頂距離，以及Z坐標值。 其中Left可以理解為X坐標值，Top為Y坐標值，ZIndex（Z坐標值），如果從3D的角度來理解，是相對于平面的立體值。對于ZIndex的使用，可以看看下例，如果有兩個Canvas控件，位置坐標相同，會形成覆蓋，這里定義ZIndex，值越大的將會在上方覆蓋ZIndex值小的控件。通過這個參數設置，我們可以實現很多不同的布局效果。 從上圖可以看到，Canvas中的子控件，屬性欄中，沒有Grid控件中的Margin屬性，而是使用Left和Top進行定位。根據微軟官方的解釋，Canvas中的控件，使用Canvas.left和Canvas.top定位，傳遞該數值到父容器控件Canvas，重載父容器Canvas的AttachedProperty（附加屬性），這樣意味著父容器Canvas不能更改子控件的位置。這里引入了AttachedProperty（附加屬性），該屬性是屬于父控件的屬性，但是可以被子控件進行設置。 上一篇，我們提到過布局控件Group的功能，這里使用Canvas group的功能，將多個Canvas嵌入到一個Canvas控件中，通過父Canvas控件統一控制子容器控件的屬性。 這里我創建四個Canvas，每個Canvas中包含一個圓形控件。當前，處于相互覆蓋狀態。 按著Shift，分別選中四個Canvas控件，點擊鼠標右鍵，“Group into” - > “Canvas“， 選中后，Blend將生成新的Canvas父控件，將選中的四個Canvas控件，作為子控件。 ?1?<Canvas?Margin="14,58,130,104"?Grid.Row="1">
?2?????<Canvas?Height="88"?Width="100">
?3?????????<Ellipse?Fill="Red"?Stroke="Black"?Height="84"?Width="83"?Canvas.Left="11"?Canvas.Top="2"/>
?4?????</Canvas>
?5?????<Canvas?Width="100"?Height="88"?Canvas.Left="64">
?6?????????<Ellipse?Fill="#FF0081FF"?Stroke="Black"?Height="84"?Width="83"?Canvas.Left="11"?Canvas.Top="2"/>
?7?????</Canvas>
?8?????<Canvas?Height="88"?Width="100"?Canvas.Left="127">
?9?????????<Ellipse?Fill="#FF71FF00"?Stroke="Black"?Height="84"?Width="83"?Canvas.Left="11"?Canvas.Top="2"/>
10?????</Canvas>
11?????<Canvas?Height="88"?Width="100"?Canvas.Left="192">
12?????????<Ellipse?Fill="#FFF4FF1C"?Stroke="Black"?Height="84"?Width="83"?Canvas.Left="11"?Canvas.Top="2"/>
13?????</Canvas>
14?</Canvas> 現在選中父控件的Canvas，將Opacity修改為40，可以看到，所有子控件的Opacity統一修改為40.效果如下： 如果，我們分別設置父控件下的四個Canvas控件Opacity屬性，即可看到各自Canvas將按照自己屬性為主，效果如下： Canvas通過Group的功能，可以實現多個控件實現相同方式下動畫效果，在Silverlight開發中也是常用的功能。 Canvas布局控件快速入門就介紹到這兒了。

總結

以上是生活随笔為你收集整理的Expression Blend实例中文教程(4) - 布局控件快速入门Canvas的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。