SimpleExpander

Expander 是一種「已加上標題的內容控制項」，具有一個標題及一個可顯示內容的摺疊視窗。在 Microsoft Expression Blend 中，您可以修改 Header 屬性為 Expander 加上標題。按兩下 Expander 並在 Expander 中繪製元素，就可以填入 Expander 的內容。若要在 Expander 中放置多個元素，則必須先新增版面配置面板 (例如 [格線] 或 [畫布])。根據預設，Expander 也可以顯示文字；若要編輯文字，您可以用滑鼠右鍵按一下 Expander，然後按一下 [編輯文字]。若要在畫板上檢視已經展開的 Expander，您可以用滑鼠右鍵按一下 [物件與時間軸] 下的 Expander，然後按一下 [展開 Expander]。

SimpleExpander 控制項的畫板檢視

深入控制項範本

SimpleExpander 控制項範本由下列項目組成：

• Grid：在 Expander 中容納多個子項目所需的版面配置面板。Grid 可讓應用程式使用者介面 (UI) 設計師輕鬆地將更多元素新增至範本。格線分為兩個區域：呈現標題的 Border 區域及呈現內容的 ExpandSite 區域。

• Border 元素：此元素有 BorderThickness 屬性，可以透過範本繫結至套用此範本之 Expander 控制項的 BorderThickness 屬性。

• ToggleButton 元素：放在 Border 元素內，可展開和摺疊 Expander。

• ContentPresenter 元素：放在 Border 元素內，且會自動繫結至套用此範本之 Expander 控制項的 Header 屬性。

• ExpandSite 區域下的 ContentPresenter：用來顯示套用此範本之 Expander 的 Content 屬性。兩個 ContentPresenter 元素都必須存在，Expander 才能依預期運作。

  物件檢視：SimpleExpander 控制項的基本部分 (範本)

  

回到頁首

使用屬性觸發程序

控制項範本中的屬性觸發程序，可讓控制項回應屬性變更。您可以在 [互動] 面板中，按一下 [觸發程序] 底下的項目，檢視觸發程序啟動時變更的屬性。例如，在 SimpleExpander 範本中，當 IsExpanded 屬性變成 True 時，就會顯示 ExpandSite 區域。

回到頁首

使用筆刷

SimpleExpander 範本會使用 SimpleStyles.xaml 資源字典中的下列筆刷資源：

• 當沒有使用中的觸發程序時，Background 屬性會設為使用 LightBrush，而當 IsEnabled 為 False 時，則會設為使用 DisabledBackgroundBrush。

• 當沒有使用中的觸發程序時，BorderBrush 屬性會設為使用 NormalBorderBrush，而當 IsEnabled 為 False 時，則會設為使用 DisabledBorderBrush。

• 當沒有使用中的觸發程序時，Border 元素的 Background 屬性會設為使用 NormalBrush。

• 當沒有使用中的觸發程序時，ExpandSite 元素的 Background 屬性會設為使用 WindowBackgroundBrush。

• 當沒有使用中的觸發程序時，ExpandSite 元素的 BorderBrush 屬性會設為使用 SolidBorderBrush。

• 當 IsEnabled 為 False 時，Foreground 屬性會設為 DisabledForegroundBrush。

回到頁首

最佳作法與設計方針

• 一般而言，如果您希望設計師在控制項上新增更多視覺元素，請使用 Grid 控制項作為範本的根。Expression Blend 會搜尋類似 Grid 控制項的版面配置面板，並且將它設為預設啟用，讓新增至畫板的新元素成為版面配置面板的子元素。

• 由於 Expander 有兩個 ContentPresenter 元素 (一個針對標題，另一個則針對內容)，標題中的 ContentPresenter 必須明確設為控制項的類別。作法是將 ContentPresenter 元素的 ContentSource 屬性 (在範本的 [框線] 節點中) 設為 [Header]。

• ToggleButton 元素使用名稱為 ExpanderToggleButton 的不同範本。若要修改該範本，請用滑鼠右鍵按一下 ToggleButton 元素，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本] 或 [編輯複本]。ToggleButton 藉由將 ToggleButton 上的 IsChecked 與 Expander 上的 IsExpanded 進行繫結來與 Expander 其餘部分相連。為正確更新此屬性，您必須保留此繫結 — 此雙向繫結可讓您以程式設計方式展開 Expander。

• 根據預設，ExpandSite 區域會呈摺疊狀態，且由觸發程序來顯示。因為觸發程序會參照 ExpandSite 元素的名稱，因此若變更或取代 ExpandSite 元素，也必須更新 IsExpanded 觸發程序。

回到頁首