PasswordBox 控制項樣式提示

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

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

Ee341382.4e1556e5-03f0-4881-8283-8281cb11c978(zh-tw,Expression.40).png

PasswordBox 範本的組件

PasswordBox 控制項有一個組件: ContentElement 組件。此組件為強制組件。

tip note秘訣:

若要檢視範本的組件,請在修改範本時開啟 [組件] 面板。

PasswordBox 控制項的狀態

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

狀態名稱 描述

Normal

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

MouseOver

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

Disabled

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

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

狀態名稱 描述

Unfocused

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

Focused

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

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

狀態名稱 描述

Valid

PasswordBox 控制項有效時的外觀。

InvalidUnfocused

PasswordBox 控制項無效且沒有鍵盤焦點時的外觀。

InvalidFocused

PasswordBox 控制項無效但具有鍵盤焦點時的外觀。

tip note秘訣:

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

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

範本繫結

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

將物件轉換成 PasswordBox 控制項

下圖是 PasswordBox 的詳細設計圖 (comp):

PasswordBox

此範例使用下列程序步驟 2 中的 XAML 程式碼 (對應於上一個圖形),利用 PasswordBox 控制項範本來建立自訂密碼方塊。

  1. 開啟新的 Microsoft Silverlight 專案。在 [程式碼] 檢視中,找出下列程式碼,然後刪除結尾的斜線符號 (/)。

    <Grid x:Name="LayoutRoot" Background="White"/>
    
  2. 複製下列程式碼,然後將它貼到新專案中,接在步驟 1 找到的程式碼後面。

    <Grid Height="20" Width="120">
    <Rectangle Fill="#FF333333" RadiusX="5" RadiusY="5"/>
    <TextBlock Margin="5,0" Foreground="White" Text="*****" VerticalAlignment="Center"/>
    </Grid>
    
  3. 在剛貼上的程式碼後面新增結尾 Grid 標籤 (</Grid>)。

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

  5. 在 [物件與時間軸] 面板中,按一下 [Grid]。在 [組件] 面板中,按兩下 [ContentElement]。

  6. 複製 [TextBlock] 的 [VerticalAlignment] 和 [Margin] 屬性,並將它們貼到 [ContentElement] 中。按一下 [物件與時間軸] 面板中的 [ContentElement],然後在 [屬性] 面板中執行下列作業:

    • **VerticalAlignment ** 設為 [Center]。

    • **Margin ** 設為下列值:

      • ** 5

      • ** 5

      • ** 0

      • ** 0

  7. 在 [物件與時間軸] 面板中,按一下 [TextBlock],然後按一下 DELETE。

  8. 在 [物件與時間軸] 面板中,按一下 [Template],然後按一下 [將範圍傳回]** Ee341382.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.40).png。在 [物件與時間軸] 面板中選取 [Style] 後,於 [屬性] 面板的 [筆刷] 類別中,將 [Foreground] 設定為 **#FFFFFFFF

  9. 在 [物件與時間軸] 面板中,按一下 [將範圍傳回]** **Ee341382.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-tw,Expression.40).png

  10. 在 [屬性] 面板中,於 [一般屬性] 類別的 [Password] 文字方塊中,輸入 abcde

  11. 在 [屬性] 面板的 [文字] 類別中,按一下 [顯示進階屬性]。在 [PasswordChar] 文字方塊中,輸入 \* 。

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

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

參照

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

另請參閱

概念

一般 Silverlight 控制項的樣式提示
設定支援範本之控制項的樣式
繪製文字

Copyright © 2011 by Microsoft Corporation. All rights reserved.