CheckBox 控制項樣式提示

Ee371151.0b2c798e-86c6-4ea2-a8a6-5cf1f12be1e2(zh-tw,Expression.40).png

您可以使用內建的 CheckBox 控制項範本來建立自訂 CheckBox 範本。 CheckBox 控制項的預設外觀如下:

Ee371151.1b2a1e45-ffdd-4ac8-941a-d6625b797fd0(zh-tw,Expression.40).png

CheckBox 控制項的狀態

根據預設, CheckBox 控制項可以處於 [CommonStates] 狀態群組中下列四種狀態的其中一種,您可以在修改 CheckBox 範本時於 [狀態] 面板中檢視狀態:

狀態名稱 描述

Normal

與控制項沒有互動時的 CheckBox 控制項外觀。

MouseOver

使用者將指標移到 CheckBox 控制項上方時,控制項所顯示的外觀。

Pressed

當使用者按一下 CheckBox 控制項,或當該控制項具有焦點且使用者按下 ENTER 或空格鍵時,該控制項的外觀。

Disabled

IsEnabled 屬性設為 False 時, CheckBox 控制項的外觀。

CheckBox 控制項可以處於 [FocusStates] 狀態群組的下列兩種狀態之一:

狀態名稱 描述

Unfocused

CheckBox 控制項沒有鍵盤焦點時的外觀。

Focused

CheckBox 控制項具有鍵盤焦點時的外觀。例如,使用者可能會按 TAB 鍵來循環顯示應用程式中的物件,直到鍵盤焦點停留在 CheckBox 控制項為止。

CheckBox 控制項可以處於 [ValidationStates] 狀態群組的下列兩種狀態之一:

狀態名稱 描述

Valid

CheckBox 控制項有效時的外觀。

InvalidUnfocused

CheckBox 控制項無效且沒有焦點時的外觀。

InvalidFocused

CheckBox 控制項無效但具有焦點時的外觀。

CheckBox 控制項可以處於 [CheckStates] 狀態群組的下列三種狀態之一:

狀態名稱 描述

Unchecked

IsChecked 屬性設為 False 時, CheckBox 控制項的外觀。

Checked

IsChecked 屬性設為 True 時, CheckBox 控制項的外觀。

Indeterminate

IsThreeState 屬性設為 True ,且 IsChecked 屬性設為 Null 時, CheckBox 控制項的外觀。

CheckBox 控制項處於核取狀態的預設外觀如下:

Ee371151.df888d99-f032-4084-a93e-3de14ad1c19c(zh-tw,Expression.40).png

tip note秘訣:

狀態群組包含屬於相同邏輯類別且無法同時顯示的視覺狀態。例如,[CommonStates] 群組包含的狀態與使用者和輸入裝置 (例如滑鼠) 的互動有關。雖然控制項一次只能顯示同一狀態群組中的一種狀態,但卻可以同時顯示來自不同狀態群組的兩種狀態。

當您選取狀態時,狀態錄製功能便會開啟,以錄製您對該狀態所做的任何變更。若要關閉狀態錄製功能,請按一下畫板上的錄製按鈕 Ee371151.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(zh-tw,Expression.40).png,或在 [狀態] 面板中選取 [Base]。若要修改控制項在兩種個別狀態同時作用時的外觀,您可以鎖定其中一個狀態群組之狀態的預覽,同時修改另一個狀態群組中的狀態。

範本繫結

您可以對 BackgroundBorderBrushForegroundBorderThicknessPadding 屬性進行範本繫結。如需詳細資訊,請參閱完成範本的物件屬性

將物件轉換成 CheckBox 控制項

下面幾張圖是核取方塊的詳細設計圖 (comp),此核取方塊包含 NormalMouseOverPressedDisabledFocused 狀態:

Normal

處於 Normal 狀態的 CheckBox

MouseOver

處於 MouseOver 狀態的 CheckBox

Pressed

處於 Pressed 狀態的 CheckBox

Disabled

處於 Disabled 狀態的 CheckBox

Focused

處於 Focused 狀態的 CheckBox

Note注意:

請特別注意,前面的圖形還不是 CheckBox 控制項,而是可以轉換為 CheckBox 控制項的圖案。

此範例會使用以下程序之步驟 4 中的 XAML 程式碼 (對應於前面圖形中的 Normal 狀態)。

  1. 開啟新的 Microsoft Silverlight 專案。在 [筆刷] 類別中,按一下 [單色筆刷]。在 [編輯器] 的 [十六進位值] 方塊中,輸入 #FF808080

  2. 按兩下 [工具] 面板中的 [格線] Ee371151.a87ee957-7fbf-4135-a6ab-6de7e63160aa(zh-tw,Expression.40).png,在畫板上建立新容器。在 [屬性] 面板的 [版面配置] 類別中,按一下 [Width] 右側的 [進階選項],然後按一下 [重設]。請針對 [Height] 重複相同的動作。

  3. 在 [程式碼] 檢視中,找出下列程式碼,然後刪除結尾的斜線 (/)。

    <Grid HorizontalAlignment="Left" VerticalAlignment="Top"/>
    
  4. 複製下列程式碼,然後將它貼到新專案中,接在步驟 3 找到的程式碼後面。

    <Grid>
       <Rectangle Stroke="#FF333333" Height="12" Width="12" HorizontalAlignment="Left" Fill="Transparent"/>
       <Path x:Name="check" Height="8" Width="8" Fill="White" Stretch="Fill" 
          Data="M14.8,6.2 C14.9,6.2 14.9,6.3 14.9,6.2 C14.9,6.3 14.9,6.3 14.8,6.5 
          C14.1,7.2 13.4,8.1 12.6,9.2 C11.8,10.4 11.1,11.7 10.6,13 
          C10.4,13.5 10.2,13.8 10.2,13.9 C10.1,14.1 9.8,14.1 9.4,14.1 
          C9.1,14.1 8.9,14.1 8.9,14 C8.8,14 8.7,13.8 8.5,13.5 
          C8.2,13 7.8,12.6 7.5,12.2 C7.3,12 7.2,11.9 7.2,11.8 
          C7.2,11.6 7.3,11.5 7.5,11.3 C7.7,11.2 7.9,11.1 8,11.1 
          C8.2,11.1 8.5,11.2 8.7,11.4 C9,11.6 9.3,12 9.6,12.5 
          C10,11.8 10.3,11.1 10.6,10.4 C11,9.7 11.4,9.11.8,8.5 
          C12.3,7.8 12.6,7.3 12.9,7 C13.1,6.8 13.3,6.6 13.4,6.5 
          C13.5,6.5 13.6,6.4 13.8,6.4 C14.3,6.3 14.6,6.2 14.8,6.2 z"
          HorizontalAlignment="Left" Margin="2,2,0,2"/>
       <TextBlock 
          Foreground="White" Text="Lorem" Margin="15,0,0,0" 
          VerticalAlignment="Center"/>
    </Grid>
    
  5. 在剛貼上的程式碼後面新增結尾 Grid 標籤 (</Grid>)。

  6. 在 [物件與時間軸] 面板中,以滑鼠右鍵按一下 [Grid],然後按一下 [變成控制項]。在 [變成控制項] 對話方塊中,按一下 [CheckBox],然後按一下 [確定]。

    請注意,在 [程式碼] 檢視中,您在前一個步驟中貼上的程式碼已被取代為新 CheckBox 控制項的程式碼。此外,Expression Blend 也已將 CheckBox 控制項變成新 CheckBox 樣式的範本,並將該範本套用至 CheckBox

    詳細設計圖中的 TextBlock 具有白色前景。詳細設計圖中的 TextBlock 還包含文字 Lorem 。此外,前面程式碼中的 TextBlock 也已由與原始 TextBlock 具有相同屬性的 ContentPresenter 所取代。

  7. 若要將 MouseOver 狀態新增至 Button 控制項,請執行下列動作:

    1. 在 [物件與時間軸] 面板中,按一下 [Rectangle]。

    2. 在 [狀態] 面板中,按一下 [MouseOver]。

    3. 在 [屬性] 面板中,選取 [Fill] 並將 [Alpha] 屬性設為 25

      請注意,*Rectangle* 已重新命名為 *rectangle*。

    4. 返回 [狀態] 面板,然後按一下 [Base],結束狀態錄製作業。

  8. 若要將相同屬性套用到 Pressed 狀態,請在 [狀態] 面板中,以滑鼠右鍵按一下 [MouseOver],按一下 [將狀態複製到],然後按一下 [Pressed]。

  9. 若要在核取方塊處於 Pressed 時位移 CheckBox 範本,請執行下列動作:

    1. 在 [狀態] 面板中,按一下 [Pressed]。

    2. 在 [物件與時間軸] 面板中,按一下 [Grid]。

    3. 在 [屬性] 面板中 [轉換] 類別的 [平移] 索引標籤上,將 [X] 和 [Y] 設為 1

      請注意,[物件與時間軸] 面板中的 *Grid* 已重新命名為 *grid*。

    4. 返回 [狀態] 面板,然後按一下 [Base],結束狀態錄製作業。

  10. 在 [狀態] 面板中,選取 [Disabled]。在 [物件與時間軸] 面板中,選取 [grid]。在 [屬性] 面板中,將 [Opacity] 設為 50 。返回 [狀態] 面板,然後按一下 [Base],結束狀態錄製作業。

  11. 若要將互動功能加入到 CheckBox 控制項,請執行下列動作:

    1. 在 [狀態] 面板中,按一下 [Normal],按一下 [新增切換],然後按一下 [Normal 到 MouseOver]。

    2. 在 [切換持續時間] 方塊中輸入 .2

    3. 按一下 [Base],結束狀態錄製作業。

    現在,當您將指標停留在 CheckBox 上方時,從 Normal 狀態切換到 MouseOver 狀態將需 0.2 秒。所有其他切換將會立即發生。

  12. 在 [物件與時間軸] 面板中,按一下 [check]。在 [屬性] 面板的 [外觀] 類別中,將 [Opacity] 設定為 0 。在 [狀態] 面板中按一下 [Checked],然後在 [屬性] 面板中將 [Opacity] 設定為 100 。按一下 [Base],結束狀態錄製作業。

  13. 在詳細設計圖中, Focused 狀態有一個淺藍色矩形外框,這是 Normal 狀態的 XAML 所沒有的。

    若要建立此矩形,請在選取 [Focused] 狀態的情況下新增 Rectangle 物件。這稱為「繪製為狀態」,代表只有在處於您繪製物件的狀態時,新物件才會顯現。

    若要建立 Focused 狀態的矩形,請在 [狀態] 面板中按一下 [Focused],然後按兩下 [工具] 面板中的 [矩形] 工具,建立新的 Rectangle 物件。

  14. 下一個步驟是設定新矩形的屬性。這些屬性必須在 Base 狀態中變更,而非 Focused 狀態。不過,此矩形目前是透明的,而且不會在 Base 狀態下顯示。若要繼續顯示矩形,請按一下 [記錄模式指標] Ee371151.0dcc6415-6d4e-4fcf-a9a3-eb4664cb6cbc(zh-tw,Expression.40).png。請注意,新的矩形 (*rectangle1*) 在 [物件與時間軸] 面板中仍為選取狀態。

    在 [屬性] 面板中,設定 *rectangle1* 的下列屬性:

    • *Fill* 在 [筆刷] 類別中,按一下 [沒有筆刷]。

    • *Stroke* 在 [筆刷] 類別中,按一下 [單色筆刷]。在 [編輯器] 中,將色彩設為 #FF00C0FF

    • *RadiusX* 在 [外觀] 類別中,將 [RadiusX] 設為 2

    • *RadiusY* 在 [外觀] 類別中,將 [RadiusY] 設為 2

    • *Margin* 在 [版面配置] 類別中,將 [Margin] 設為下列值:

      • *Left* -2

      • *Right* -2

      • *Top* 0

      • *Bottom* 0

  15. 按一下 [將範圍傳回] Ee371151.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.40).png。在 [物件與時間軸] 面板中選取 [CheckBox] 後,按 CTRL+C 複製它。按 CTRL+V 四次,再貼四個 *CheckBox* 控制項到容器中。使用 [選取] 工具 Ee371151.2ff91340-477e-4efa-a0f7-af20851e4daa(zh-tw,Expression.40).png 將核取方塊排列在一欄內。在 [物件與時間軸] 面板中選取其中一個 CheckBox 物件後,清除 [屬性] 面板中 [一般屬性] 類別裡的 [IsEnabled] 方塊。

  16. 建置專案 (CTRL+SHIFT+B),然後按 F5 來測試您的專案。

如需將新 CheckBox 範本套用至其他 CheckBox 物件的詳細資訊,請參閱套用或移除資源

參照

您可以在 MSDN 上的 Silverlight Control Gallery Ee371151.xtlink_newWindow(zh-tw,Expression.40).png (Silverlight 控制項陳列庫) 找到有關 Microsoft Silverlight CheckBox 控制項之屬性與事件的詳細資訊。

另請參閱

概念

一般 Silverlight 控制項的樣式提示
SimpleCheckBox
設定支援範本之控制項的樣式

Copyright © 2011 by Microsoft Corporation. All rights reserved.