Zhang Ning blog

Introducción

Este es el segundo puesto de la serie de Silverlight Toolkit Personalizar controles. Este artículo muestra cómo personalizar Expander, y proporciona la mayor parte de las personalizaciones preguntó Silverlight Toolkit foro .

Expansor de personalización

Para personalizar Expander, es muy importante para comprender su API y plantilla predeterminada, y saber cómo utilizar Mezcla de volver a la plantilla de un control. Yo recomiendo que lea mi anterior post de control Expander en Silverlight Toolkit si usted no tiene todavía. La clave para personalizar Expander:

• entender el interfaz Expander, especialmente su contrato de control:
  • Expander espera un elemento de plantilla, un botón de activación denominada "ExpanderButton", en su plantilla. Su expandir o contraer la función depende de la existencia de este elemento de plantilla, ya que Silverlight no admite dos de carácter vinculante.
  • Expander expone grupo ExpansionStates estado visual (incluyendo expandir y contraer dos estados visuales) a los usuarios personalizar sus expandir y contraer el comportamiento.
  • Expander expone grupo ExpandDirectionStates estado visual (incluyendo ExpandDown, ExpandUp, ExpandLeft, ExpandRight) para los usuarios para personalizar el diseño para cada uno de los cuatro ampliar dirección.
  • Expander también expone HeaderTemplate y propiedades ContentTemplate a los usuarios personalizar su encabezamiento y parte de contenido. Usted puede encontrar este tipo de personalización de Silverlight Control Toolkit muestra .

• entender por defecto Expander la plantilla. La captura de pantalla a continuación muestra cómo la plantilla predeterminada se encarga de la distribución de las cuatro direcciones y ampliar el comportamiento de expandir o contraer proporcionando storyboard para la ExpansionStates y ExpandDirectionStates grupos visual del estado:
  • El conjunto de cabecera es una plantilla ToggleButton, así que hacer clic en el encabezado de todos modos puede expandir o contraer el área de contenidos.
  • Se utiliza una cuadrícula de 2 × 2 de la disposición de cabecera y el área de contenido.
  • Presenta el expansor de acuerdo con ExpandDirection por haber estado de animación ExpandDirectionStates:
    • Presenta áreas de encabezado y dinamizando sus contenidos y propiedades Grid.Row Grid.Column.
    • Se basa el botón de alternancia encabezado correctamente cambiando su plantilla.
  • Se expande / colapsa las áreas de contenido animando su atributo de visibilidad en las transiciones de estado ExpanionStates.

que aparece a continuación muestra la pantalla de las personalizaciones más frecuentes. Si tiene instalado Silverlight 2.0 y su lector apoya la aplicación de Silverlight en vivo, puedes jugar con él aquí también:

• PDC08 muestra el Expander en versión actual en CodePlex. Hay un error en ExpanderRightHeaderTemplate (utilizado si se establece ExpandDirection a derecha) que causa el elevado de CPU y uso de memoria. Esta es fijo y la revisión estará en nuestro próximo lanzamiento en unas pocas semanas. Pido disculpas por las molestias. Expander es mi primer control de Silverlight. Yo no sabía nada acerca de Silverlight o WPF antes de que se unió al equipo de Shawn hace unos meses, y todavía no puedo creer lo frágil y la animación son xaml. Me tomó mucho tiempo para encontrar a los personajes una solución: una (de docenas) ObjectAnimationKeyFrames ha Duración atributo accidental establece en "1" en vez de "0". Eso condujo Silverlight tuercas tiempo de ejecución y la CPU del cerdo y la memoria.
• Nueva (ExpanderStyle) muestra la nueva plantilla que sea liberado pronto.
• Fade In / Out (ExpanderFadeStyle) personaliza el expandir o contraer el comportamiento animando a desaparecer la opacidad en el contenido y por fuera.
• Escala de entrada / salida (ExpanderScaleStyle) personaliza la expandir o contraer el comportamiento animando ScaleTransform.ScaleX y ScaleTransform.ScaleY entre 1 y 0 para ampliar y reducir el tamaño del contenido.
• Ningún botón (ExpanderNoButtonStyle) personaliza el diseño, eliminando el círculo con botón de la flecha de alternancia. Usted todavía puede expandir o contraer el contenido con el ratón o el teclado.
• Inferior / Botón derecho (ExpanderBottomRightButtonStyle) personaliza el diseño, poniendo el círculo con la flecha del botón de alternar en la parte inferior / parte derecha de la cabecera.

Código fuente

Usted puede encontrar el proyecto de archivo comprimido:

Conclusión

Expander ha sido la clave más a mi blog. Es un control muy útil y relativamente difícil de personalizar. Esperemos que este mensaje le ayudará en el uso y personalización Expander. Gracias!