[ Expression Blend 4 ] Expression Blend的初心筆記Ch.8 –一個蘿蔔一個坑 - [Canvas]範例實做

  • 4405
  • 0

[ Expression Blend 4 ] Expression Blend的初心筆記Ch.8 –一個蘿蔔一個坑 - [Canvas]範例實做
上回介紹了Canvas為何物,今天讓我們利用Canvas來做個小小的排版效果。


上回介紹了Canvas為何物,今天讓我們利用Canvas來做個小小的排版效果。

Crtl+Shift+N開啟一個新專案,選擇Silverlight Application + Website輸入專案名稱"prj_canvas_sample"。

我希望我的網頁可以在瀏覽器的中間呈現固定置中的版面,所以首先點選LayoutRoot元件,設定大小為640*480、垂直水平對齊置中、隨意填入一個背景色,為了看置中效果是否有用,
layout_set

接著點選到舞台元件UserControl,在Layout視窗中,設定寬高自動填滿,按F5,改變瀏覽器視窗大小看看版面是否有置中。
userControl

確認置中的效果沒問題後,我們回到舞台中間,用方形工具(M)隨意拉出四個方形,填入四個不同顏色,
bg_square

將四個方塊隨意堆疊後,同時選取四個方形元件,
A.在元件上按滑鼠右鍵叫出快捷選單 > Group Into > Canvas,將他們群組化為一個Canvas。
B.在Properties或是物件與時間軸視窗中,將群組元件取名為bg_square。
 bg_square_2

接著新增項目(Crtl+N),匯入預先準備好的四張小圖進專案檔,將四張小圖拖曳到舞台上,各自替他們取名,
2011-03-05_031845

同時選取四張圖,將檔案縮小一點,然後群組化成一個Canvas,取名為gp_img。
gp_img

接著我希望在畫面中,物件可以被使用者拖曳移動位置,先點選"bg_square"物件,接著看到左上方的Assets / 元件庫視窗 > Behaviors / 行為 > MouseDragElementBehavior / 滑鼠拖曳元件行為,點選兩下,此時我們以經可以看到下面的元件與時間軸視窗,元件"bg_square"的下方出現MouseDragElementBehavior的控制項,這樣我們已經把這個行為成功加到元件上了。
 canvas_assets

Assets中有許多Blend預先寫好的函式套件可以運用,滑鼠物件拖曳就是其中之一,簡單的點選兩下,不用寫程式馬上就可以達成物件拖曳的效果,是設計師製作網頁的利器!!!可以好好研究一下其中提供些怎樣的資源可供應用,可以讓你縮短許多工作時程喔!接著讓我們按F5來預覽一下拖曳物件的效果。
 2011-03-08_003629

可以看到上圖我們已經可以藉由點選"bg_square"元件來達成拖曳的效果,可是發現我們拖曳的元件可以超出舞台,我希望可以將元件控制在舞台範圍中,所以讓我們看到在右方有個Common Properties / 常見屬性視窗,可以設定一些關於我們套用的效果的參數,MouseDragElementBehavior的屬性視窗如下,裡面有個"ConstrainToParentBounds / 限制在母元件的邊界內"的選項,勾選他,再按下F5預覽看看,可以發現拖曳的元件不會超出母元件的範圍了。
 common_properties

接著可以發現滑鼠移到物件上時出現的滑鼠游標是箭頭,這樣不清楚狀況的使用者可能不會知道這是可以拖曳的物件,所以我們將游標顯示的符號改為手的形狀。首先先點到"bg_square"的元件後,看到右邊的Common Properties / 常見屬性視窗,設定Cursor / 游標Hand/手的形狀,預覽後就可以看到當滑鼠移到"bg_square"時,游標變為手的形狀了。
cursor 2011-03-08_011931

接著我希望四個動物都可以被拖曳,所以相同的個別在他們上面插入滑鼠拖曳元件行為,記得要修改他們的游標樣式,一樣設定"限制在母元件的邊界內"的選項,接著將包有四張動物圖的"gp_img"元件,拉出一個想要限定動物圖出現的範圍如下,這樣動物圖的拖曳區塊大小就會如下圖淺藍色框所顯示的範圍。
 2011-03-08_020248

接著按下F5預覽,就可以看到效果如下!!!!可以隨意拖動動物圖案或是背景的底色,重新排出不同的感覺。
2011-03-08_020617

---------------------------------------------------------------------------------------------------------------------------------

這張我們利用Canvas的畫布特性,套用滑鼠拖曳的效果做出一個小範例,希望大家可以更了解Canvas!!!!

範例網頁 / canvas_sample.html

btn_downloadcanvas_sample.zip