修改不同狀態的系統控制項外觀

控制項在不同的狀態下，會有不同的外觀。例如，將滑鼠指標移至狀態的上方時，按鈕的顏色會稍微改變。「MouseOver」是狀態按鈕之一。您可以自訂不同狀態的系統控制項外觀。

下列程序會使用按鈕，但是您可以自訂任何隨附在 Microsoft Expression Blend 2 中的系統控制項，或任何從 [Control] 類別匯入的自訂 Silverlight 2 控制項。

修改不同狀態的按鈕外觀

1. 建立系統控制項可重複使用的範本 如 [按鈕]  控制項。

2. 若尚未準備進入範本的編輯模式，請在畫板的控制項上按一下滑鼠右鍵，然後指向 [編輯控制項組件 (範本)] 並按一下 [編輯範本]。您也可以選擇在階層連結列中選取物件然後按一下 [範本]。

   

3. 進入範本編輯模式時，[互動] 面板的 [狀態] 下會顯示按鈕的狀態 (如 [Normal] 和 [MouseOver])。狀態會內含在狀態群組中 (如 [CommonStates] 和 [FocusStates])。

   

   範本的組件會在 [物件與時間軸] 下顯示。而這些組件的外觀是已選取狀態的可修改部分。

   

4. 在 [狀態] 下，按一下 [MouseOver]。請注意出現在畫板上方的紅色圓形，該圖形表示已開啟狀態錄製。而這代表在已選取的 狀態中會錄製任何您所變更的屬性。在 [物件與時間軸] 下，Expander 按鈕周圍的紅色圓形會識別範本組件與選取 [Base] 時的不同屬性設定。

   

5. 若要修改按鈕在 [MouseOver] 狀態中的大小，請按一下 [物件與時間軸] 下方的 [格線]。

   秘訣：
   [格線]  是根據水平對齊、垂直對齊和邊界來排列子物件的版面配置面板。如需版面配置面板的詳細資訊，請參閱版面配置概觀 與 格線面板。

6. 在 [屬性] 面板的 [轉換] 下，按一下 [縮放] 索引標籤。將 [X] 和 [Y] 的值變更為 1.1。

7. 儲存檔案 (CTRL+S)，然後按 F5 鍵以建置並測試您的應用程式。在瀏覽器視窗中開啟應用程式之後，將滑鼠指標移至按鈕上方將其展開。

疑難排解

• 某些範本組件的屬性繫結範本外的值。例如，[Background] 組件的 [Fill] 屬性是「範本繫結」至按鈕的 [Background] 屬性。這表示當使用此範本繪製按鈕時，範本會自動套用該按鈕所設定的值。雖然範本繫結可讓使用者設計自訂的控制項，但將控制項加入應用程式時仍會啟用部分變更。

  範本中的橘色週框方塊會識別繫結屬性。若要變更範本繫結屬性，請依序按一下屬性旁的 [進階屬性選項]  按鈕和 [重設]。

  

• 無法將自訂狀態和狀態群組加入系統控制項的範本。但是，您可以建立自訂使用者控制項，然後定義自訂狀態並加入程式碼，進而根據使用者互動來變更狀態。如需詳細資訊，請參閱在 Silverlight 2 專案中建立新的使用者控制項、定義使用者控制項的不同視覺狀態和切換時間與根據使用者互動變更狀態。

• 若您無法在瀏覽器中檢視應用程式，那麼，您所安裝的 Silverlight 2 執行階段可能不正確。如需詳細資訊，請參閱安裝 Silverlight 2 工具和執行階段。

下一步

• 您可以變更滑鼠指標移到按鈕上方時，展開按鈕所需的時間。如需詳細資訊，請參閱修改系統控制項中狀態之間的切換。

• 您可以加入動畫，例如當滑鼠指標移到按鈕上方時按鈕會旋轉。如需詳細資訊，請參閱新增狀態變更後播放的動畫。

• 您也可以套用此範本至專案中的按鈕，或繪製已指派範本的新按鈕。如需詳細資訊，請參閱套用樣式資源。

請參閱

概念

在 Silverlight 2 專案中繪製控制項

修改系統控制項中狀態之間的切換