Sugerencias para la aplicación de estilos al control PasswordBox para controles de Silverlight en Blend

Puede utilizar la plantilla de control PasswordBox integrada para crear una plantilla PasswordBox personalizada. La apariencia predeterminada del control PasswordBox es la siguiente:

Elementos de la plantilla PasswordBox

El control PasswordBox tiene un elemento: ContentElement. Este elemento es obligatorio.

Sugerencia

Para ver los elementos de la plantilla, abra el panel Elementos al modificar la plantilla.

Estados del control PasswordBox

De forma predeterminada, el control PasswordBox puede estar en uno de los cuatro estados del grupo de estados CommonStates, que se pueden ver en el panel Estados al modificar una plantilla PasswordBox:

Nombre del estado	Descripción
Normal	Apariencia del control PasswordBox cuando no hay interacción con el control.
MouseOver	Apariencia del control PasswordBox cuando el usuario mueve el puntero sobre él.
Disabled	Apariencia del control PasswordBox cuando la propiedad IsEnabled está establecida en False.

El control PasswordBox puede estar en alguno de los dos estados siguientes del grupo de estados FocusStates:

Nombre del estado	Descripción
Unfocused	Apariencia del control PasswordBox cuando no tiene el foco del teclado.
Focused	Apariencia del control PasswordBox cuando tiene el foco del teclado. Por ejemplo, un usuario puede presionar la tecla Tab para pasar de un objeto a otro en la aplicación hasta que el foco del teclado esté en el control PasswordBox.

El control PasswordBox puede estar en alguno de los tres estados siguientes del grupo de estados ValidationStates:

Nombre del estado	Descripción
Valid	Apariencia del control PasswordBox cuando es válido.
InvalidUnfocused	Apariencia del control PasswordBox cuando no es válido y no tiene el foco del teclado.
InvalidFocused	Apariencia del control PasswordBox cuando no es válido y tiene el foco del teclado.

Sugerencia

Un grupo de estados contiene los estados visuales que forman parte de la misma categoría lógica y que no se pueden mostrar al mismo tiempo.Por ejemplo, el grupo CommonStates incluye estados relacionados con la interacción del usuario mediante un dispositivo de entrada como el mouse.Solo se puede mostrar un estado de este grupo de estados por vez, pero un estado de un grupo sí se puede mostrar al mismo tiempo que un estado de otro grupo de estados.

Al seleccionar un estado, se activa la grabación del estado y se grabarán todos los cambios que se realicen para dicho estado. Para desactivar la grabación del estado, haga clic en el Indicador de modo de grabación  o seleccione Base en el panel Estados. Para modificar la apariencia del control cuando dos estados diferentes están activos, puede anclar una vista previa de un estado de un grupo de estados mientras modifica un estado de otro grupo de estados.

Enlace de plantillas

Puede enlazar mediante plantilla las propiedades Background, BorderBrush, Foreground, BorderThickness o Padding. Para obtener más información, vea Trasladar propiedades de objetos a la plantilla en Blend.

Para convertir objetos en un control PasswordBox

La imagen siguiente es un diseño integral de un PasswordBox:

En este ejemplo se utiliza el código XAML del paso 2 del siguiente procedimiento, que corresponde al gráfico anterior para crear un cuadro de contraseña personalizado mediante la plantilla de control PasswordBox.

1. Abra un nuevo proyecto de Microsoft Silverlight. En la Vista de código, busque el código siguiente y, a continuación, elimine la barra diagonal (/) de cierre.

   <Grid x:Name="LayoutRoot" Background="White"/>
   

2. Copie y pegue el código siguiente en el nuevo proyecto, después del código que encontró en el paso 1.

   <Grid Height="20" Width="120">
   <Rectangle Fill="#FF333333" RadiusX="5" RadiusY="5"/>
   <TextBlock Margin="5,0" Foreground="White" Text="*****" VerticalAlignment="Center"/>
   </Grid>
   

3. Agregue una etiqueta Grid de cierre (</Grid>) después del código que acaba de pegar.

4. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en Cuadrícula y, a continuación, haga clic en Crear en control. En el cuadro de diálogo Crear en control, haga clic en PasswordBox y, a continuación, haga clic en Aceptar.

5. En el panel Objetos y escala de tiempo, haga clic en Grid. En el panel Elementos, haga doble clic en ContentElement.

6. Copie las propiedades VerticalAlignment y Margin de TextBlock y péguelas en ContentElement. Haga clic en ContentElement en el panel Objetos y escala de tiempo y, a continuación, en el panel Propiedades, realice lo siguiente:

   • **VerticalAlignment   **Establézcala en Center.

   • **Margin   **Establezca los siguientes valores:

     • Izquierdo   5

     • Derecho   5

     • Superior   0

     • Inferior   0

7. En el panel Objetos y escala de tiempo, haga clic en TextBlock y, a continuación, presione Supr.

8. En el panel Objetos y escala de tiempo, haga clic en Plantilla y, a continuación, haga clic en **Devolver ámbito a **. Con Estilo seleccionado en el panel Objetos y escala de tiempo, en la categoría Pinceles del panel Propiedades, establezca Foreground en #FFFFFFFF.

9. En el panel Objetos y escala de tiempo, haga clic en **Devolver ámbito a **.

10. En el panel Propiedades, en el cuadro de texto Contraseña de la categoría Propiedades comunes, escriba abcde.

11. En la categoría Texto del panel Propiedades, haga clic en Mostrar propiedades avanzadas. En el cuadro de texto PasswordChar, escriba *.

12. Compile el proyecto (Ctrl+Mayús+B) y, a continuación, presione F5 para probarlo.

Para obtener información acerca de cómo aplicar la nueva plantilla PasswordBox a otros objetos PasswordBox, vea Aplicar o quitar un recurso en Blend.

Referencias

Encontrará información detallada acerca de las propiedades y eventos del control PasswordBox de Silverlight en la página de controles y cuadros de diálogo de Silverlight en MSDN.

Vea también

Conceptos

Sugerencias para la aplicación de estilos a controles Silverlight comunes en Blend

Diseñar un control que admita plantillas en Blend

Dibujar texto en Blend