Compartir a través de


Crear una máscara para los controles del proyecto

Puede personalizar el aspecto de los controles usando recursos estáticos para definir plantillas que se aplican después a los controles. Por ejemplo, puede crear una plantilla para un botón que use imágenes en lugar de rectángulos para crear la apariencia del botón.

Para crear un aspecto común entre diferentes plantillas de control o entre diferentes controles de usuario, puede convertir propiedades individuales en recursos estáticos y aplicarlos a plantillas y controles de usuario. Por ejemplo, puede convertir el color del borde de una plantilla de botón en un recurso y aplicar ese recurso de color a la propiedad de borde de una plantilla de casilla o a un control de usuario personalizado.

Para reutilizar plantillas y recursos en otros proyectos, mueva los recursos a un archivo de diccionario de recursos y agregue ese archivo a otros proyectos. Este archivo de diccionario de recursos se convierte en un repositorio para la máscara de la aplicación.

Crear una plantilla de un control

Crear un control de usuario

Convertir una propiedad en un recurso estático

  1. Seleccione un objeto en la mesa de trabajo que tenga un valor de propiedad que desee reutilizar en otros controles.

  2. En la vista de propiedades Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(ES-ES,Expression.30).png del panel Propiedades, busque la propiedad que desea reutilizar.

    Dd185519.alert_tip(ES-ES,Expression.30).gifSugerencia:

    Use el cuadro de texto Buscar del panel Propiedades para ubicar rápidamente una propiedad buscando los caracteres del nombre de la propiedad.

    Dd185519.a1e4026a-4e48-4f0c-8898-3783121e57fa(ES-ES,Expression.30).png

    El texto que escriba filtrará la lista de propiedades.

    Dd185519.c286ad76-70a6-41f7-bed6-d6d4ad69e549(ES-ES,Expression.30).png

    Para restaurar el panel Propiedades, haga clic en Borrar Dd185519.1d1f5548-6c7a-46bd-9d93-591edc576888(ES-ES,Expression.30).png, junto al cuadro de texto Buscar.

  3. Realice una de las siguientes acciones:

    • Si desea reutilizar un pincel, haga clic en Opciones avanzadas de la propiedad Dd185519.12e06962-5d8a-480d-a837-e06b84c545bb(ES-ES,Expression.30).png junto a la propiedad de pincel (como la propiedad Fill o Background) y elija Convertir en nuevo recurso.

    • Si desea reutilizar un color que tiene aplicado un pincel, seleccione el pincel si es un pincel de color sólido Dd185519.3a66ec96-47bb-47fc-8876-6b9456feec3a(ES-ES,Expression.30).png o seleccione el delimitador de degradado Dd185519.a3c9e482-e99b-4504-8a02-9507487d1791(ES-ES,Expression.30).png del color que desea reutilizar si el pincel es un pincel de degradado Dd185519.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(ES-ES,Expression.30).png. A continuación, haga clic en Convertir color en recurso Dd185519.6bf68607-add8-4d87-b6f4-100c8f05dd17(ES-ES,Expression.30).png.

      Dd185519.89203705-cf66-46e0-b153-52a23cd744f7(ES-ES,Expression.30).png

    • Si desea reutilizar un valor numérico o de otro tipo, haga clic en el botón Opciones avanzadas de la propiedad Dd185519.12e06962-5d8a-480d-a837-e06b84c545bb(ES-ES,Expression.30).png que aparece junto a la propiedad y elija Convertir en nuevo recurso.

      Dd185519.3f69215a-f522-4347-88fb-f6b219f5419e(ES-ES,Expression.30).png

  4. En el cuadro de diálogo que aparece (denominado Crear recurso <tipo>), escriba un nombre significativo para el recurso y haga clic en Aceptar.

    Se crea el recurso y se muestra en el panel Recursos.

    Dd185519.97203920-a26b-4bb5-b0ed-9c71ae6973d3(ES-ES,Expression.30).png

    Para obtener información sobre cómo modificar un recurso después de crearlo, vea Modificar un recurso.

Aplicar un recurso a otra propiedad

Un recurso se puede aplicar a una propiedad de varias formas.

Para aplicar un recurso arrastrándolo desde el panel Recursos

  1. Desde el panel Recursos, arrastre un recurso hasta un control de la mesa de trabajo.

    Arrastrar un recurso de familia de fuentes a un control de casilla

    Dd185519.8290ff37-d8e8-479f-89f3-a04118ab186b(ES-ES,Expression.30).png

  2. En el menú desplegable que aparece, seleccione la propiedad del control a la que desea aplicar el recurso.

    Aplicar un recurso de familia de fuentes a la propiedad FontFamily de la casilla

    Dd185519.2063f03b-e8ad-46cb-9f12-7898b6bc1f43(ES-ES,Expression.30).png

Para aplicar un recurso usando el menú Opciones avanzadas de la propiedad

  1. En la vista de propiedades Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(ES-ES,Expression.30).png del panel Propiedades, busque la propiedad que desea establecer en un recurso.

  2. Haga clic en Opciones avanzadas de la propiedad Dd185519.12e06962-5d8a-480d-a837-e06b84c545bb(ES-ES,Expression.30).png, elija Recurso local y seleccione el nombre del recurso en la lista desplegable que aparece.

Para aplicar un recurso de pincel

  1. En la vista de propiedades Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(ES-ES,Expression.30).png del panel Propiedades, seleccione el pincel que desea establecer en un recurso.

  2. En la ficha Recursos del pincel Dd185519.415db740-5a54-48d2-8678-245ccfa7ee8b(ES-ES,Expression.30).png, seleccione el nombre del recurso.

    Dd185519.af28e5e4-4861-45ac-b02d-e65386520ed7(ES-ES,Expression.30).png

Para aplicar un recurso de color

  1. En la vista de propiedades Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(ES-ES,Expression.30).png del panel Propiedades, seleccione el pincel cuyo color desea establecer en un recurso. Si el pincel es un pincel de degradado Dd185519.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(ES-ES,Expression.30).png, seleccione el delimitador de degradado Dd185519.a3c9e482-e99b-4504-8a02-9507487d1791(ES-ES,Expression.30).png del color.

  2. En la ficha Recursos de color, seleccione el nombre del recurso.

    Dd185519.5cb88f90-c17a-4dad-be87-b6be7d74f410(ES-ES,Expression.30).png

Aplicar una plantilla a otro control del mismo tipo

Se pueden aplicar plantillas a controles de varias formas.

Para aplicar una plantilla seleccionándola en el panel Activos y dibujando un control nuevo

  1. En el panel Herramientas, haga clic en Activos Dd185519.0d8b8d29-1af9-418f-8741-be3097d76eab(ES-ES,Expression.30).png.

  2. En la categoría Estilos del panel Activos, seleccione la plantilla que creó.

  3. En la mesa de trabajo, use el puntero para dibujar un rectángulo de selección.

    Se dibuja un nuevo control que coincide con la plantilla seleccionada y se aplica la plantilla automáticamente.

Para aplicar una plantilla arrastrándola desde el panel Recursos

  1. Desde el panel Recursos, arrastre una plantilla hasta un control de la mesa de trabajo.

  2. En el menú desplegable que aparece, seleccione la propiedad Style.

Para aplicar una plantilla usando el menú Opciones avanzadas de la propiedad

  1. Seleccione el objeto al que desea aplicar una plantilla.

  2. En la vista de propiedades Dd185519.cee1494c-ef95-4dd4-9fbc-9d02edfa78b7(ES-ES,Expression.30).png del panel Propiedades, busque la propiedad Style.

  3. Junto a la propiedad Style, haga clic en Opciones avanzadas de la propiedad Dd185519.12e06962-5d8a-480d-a837-e06b84c545bb(ES-ES,Expression.30).png, elija Recurso local y seleccione el nombre de la plantilla en la lista desplegable que aparece.

Mover recursos al archivo App.xaml

  • Si no definió los recursos en el archivo App.xaml cuando los creó, puede moverlos al archivo App.xaml arrastrándolos en el panel Recursos.

    Dd185519.alert_tip(ES-ES,Expression.30).gifSugerencia:

    Si no ve los recursos, quizá deba expandir los nodos bajo el nodo del documento (normalmente Page.xaml).

Copiar recursos en otros proyectos

  1. En el panel Proyectos, haga doble clic en el archivo App.xaml para abrirlo en la mesa de trabajo.

  2. El archivo App.xaml no se puede ver en la vista Diseño; por tanto, seleccione la ficha XAML en el lado derecho de la mesa de trabajo.

  3. Los recursos se definen entre etiquetas <Application.Resources>.

    <Application.Resources>
    </Application.Resources>
    

    Dentro de estas etiquetas, los recursos de propiedad se definen en etiquetas que representan el tipo de propiedad que son. El atributo Key representa el nombre que dio al recurso.

      <FontFamily x:Key="ApplicationFont">Segoe UI</FontFamily>
      <LinearGradientBrush x:Key="BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000"/>
        <GradientStop Color="#FFC64545" Offset="1"/>
      </LinearGradientBrush>
    

    Las plantillas se definen entre etiquetas <Style>. El atributo Key representa el nombre que dio a la plantilla.

      <Style x:Key="ImageButton" TargetType="Button">
        <Setter Property="Background" Value="#FF1F3B53"/>
        <Setter Property="Template">
          ...
        </Setter>
      </Style>
    
  4. Resalte el código XAML que representa los recursos que desea mover a otro proyecto y presione CTRL+C para copiarlos.

  5. Abra el otro proyecto en Expression Blend, abra el archivo App.xaml en la mesa de trabajo en la vista XAML, inserte el puntero justo después de la etiqueta <Application.Resources> y presione CTRL+V para pegar los recursos.

  6. Asegúrese de que no hay nombres de clave duplicados en recursos que ya existían.

  7. Genere el proyecto (CTRL+MAYÚS+B) para comprobar que los nuevos recursos se copiaron correctamente.

    Dd185519.alert_tip(ES-ES,Expression.30).gifSugerencia:

    Como alternativa, puede copiar el archivo App.xaml completo en un nuevo proyecto y sólo cambiar el nombre en el atributo x:Class por el nombre del nuevo proyecto.

    <Application

    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"

    x:Class="ProjectName.App" ...

Pasos siguientes

  • Puede ver cómo crear una máscara de control para un botón y una casilla en los tutoriales en vídeo sobre procedimientos que encontrará en el sitio web de la comunidad de Expression (puede estar en inglés).

Vea también

Conceptos

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

Sugerencias para la aplicación de estilos a Simple Styles de WPF