天天看點

建立可擴充的silverlight 應用架構 step-2

“本文适合silverlight界面設計師參考,程式開發人員最好也了解一下“

先看看需要實作的效果

這裡是我的office 2010的截圖

我想要模拟這個效果。

因為普通按鈕和,類似TapControl是混排在一起的,不太适合用TapControl。是以這裡我選擇了ToggleButton。

是以本節主要就是制作ToggleButton的樣式。

其實制作樣式并不複雜,隻要了解好視圖狀态這個感念以及你現在所要做樣式的控件結構基本就沒什麼問題了。

我想大多數朋友都是Button控件制作過了樣式。  他的視圖狀态相對來說比較簡單。

這裡看一下button和ToggleButton

若是在多個VisualStateGroup同時改變同一個元素的屬性,blend就會出現如下的提示:

這裡實際的操作一下

先确定狀态,我需要的是

普通狀态:

滑鼠滑入:

選中:

确認了狀态後就可以具體的制作樣式了。

由于和原先的ToggleButton示範變化比較大,是以這裡我選擇了建立空項。

确認選中base

在這裡,把各個狀态的示範都分開繪制上去。

由于這個樣式比較簡單,是以我選擇了Opacity,這樣在展示效果上會更好一些。

再看一下這三個狀态

普通:

滑入:

接下來在對應狀态時候将他們的透明度改成100%即可,最後在設定一下過渡所需要的時間以及過渡效果即可。

樣式建立好之後,我在左部放置了多個ToggleButton,并把他們組合到一個StackPanel中。

為每一個ToggleButton應用樣式,設定屬性。

示範位址:

<a target="_blank" href="http://dl.dropbox.com/u/432136/Samples/OperatingTableDemo/step-2/OperatingTableTestPage.html">http://dl.dropbox.com/u/432136/Samples/OperatingTableDemo/step-2/OperatingTableTestPage.html</a>

<a target="_blank" href="http://www.cnblogs.com/nasa/archive/2010/01/27/dropbox-host-silverlight.html">申請Dropbox來host你的Silverlight</a>

作者:Nasa 

版權聲明:本文的版權歸作者與部落格園共有。轉載時須注明本文的詳細連結,否則作者将保留追究其法律責任。