天天看點

Blend4精選案例圖解教程(四):請給我路徑指引

路徑在界面設計中,可以起到很好的輔助作用,我常常使用它來對元素進行規則排列和非規則排列控制。

本次教程将示範,Blend中路徑的正常用法。

1、建立項目,在預設設計視圖中添加一個橢圓(Elipse),按住Shift鍵可以畫圓

Blend4精選案例圖解教程(四):請給我路徑指引

2、從繪制的圓中提取路徑,右鍵點選圓,彈出的視窗選擇Path-Make Layout Path,在視圖樹中顯示為PathListBox,這就是我們需要的路徑

Blend4精選案例圖解教程(四):請給我路徑指引

3、選中PathListBox,通過輕按兩下圖檔,往PathListBox中添加需要通過路徑排列的元素

Blend4精選案例圖解教程(四):請給我路徑指引

4、為了檢視效果,暫時把elipse的可見關閉

Blend4精選案例圖解教程(四):請給我路徑指引

5、路徑帶來的效果已初步展現,下面在進行屬性設定,使圖檔的排列更符合我們的要求。

確定選中PathListBox,然後在屬性視窗中進行屬性調整

Blend4精選案例圖解教程(四):請給我路徑指引

ZIndex:2 使圖檔顯示在elipse(elipse的ZIndex屬性為1)

Blend4精選案例圖解教程(四):請給我路徑指引

排列屬性:平均

Blend4精選案例圖解教程(四):請給我路徑指引

方向:随路徑居中

Blend4精選案例圖解教程(四):請給我路徑指引

6、對elipse進行簡單的屬性設定,作為圖檔顯示的背景

Blend4精選案例圖解教程(四):請給我路徑指引

7、OK,效果出來了,是不是有點像八卦圖。呵呵,咱們繼續!

Blend4精選案例圖解教程(四):請給我路徑指引

8、使用鋼筆工具建立不規則路徑,對圖檔進行不規則排列

建立一個UserControl

Blend4精選案例圖解教程(四):請給我路徑指引

9、使用鋼筆工具,随意畫出一些路徑

Blend4精選案例圖解教程(四):請給我路徑指引

10、提取路徑,加入圖檔元素

Blend4精選案例圖解教程(四):請給我路徑指引

11、把UserControl的背景設定為白色,改變分布(Distribution)屬性為Even(平均)

Blend4精選案例圖解教程(四):請給我路徑指引

12、得到不規則排列圖

Blend4精選案例圖解教程(四):請給我路徑指引

<a href="http://files.cnblogs.com/YGYH/PathListDemo.zip">本教程項目下載下傳</a>