Blog Ning Zhang

Introducción

Este es el segundo de la serie Silverlight Toolkit Personalizar controles. Este mensaje se muestra cómo personalizar Expander, y proporciona las personalizaciones más solicitados de Silverlight Toolkit foro .

Expansor de personalización

Para personalizar Expander, que es muy importante para comprender su API y la plantilla predeterminada, y sabe cómo usar un control de mezcla a volver a la plantilla. Yo recomiendo leer mi post anterior de control de expansión en el Silverlight Toolkit , si todavía no has. La clave para personalizar Expander:

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

• entender plantilla de expansión por defecto. La siguiente captura de pantalla muestra cómo la plantilla por defecto se encarga de la distribución de las cuatro direcciones y ampliar el comportamiento de expandir / contraer proporcionando storyboard para la ExpansionStates y ExpandDirectionStates grupos visual del estado:
  • La cabecera de todo es un ToggleButton plantilla, así que hacer clic en la cabecera de todos modos pueden expandir / contraer el área de contenido.
  • Se utiliza un 2 × 2 de cuadrícula para el diseño de encabezado y el área de contenido.
  • Presenta el expansor de acuerdo con ExpandDirection por haber estado de animación ExpandDirectionStates:
    • Presenta áreas de encabezado y contenido por la animación de sus propiedades y Grid.Row Grid.Column.
    • Se basa en el botón de cabecera de cambiar correctamente al cambiar su plantilla.
  • Que se expande / colapsa las áreas de contenido por la animación de su atributo de visibilidad en las transiciones de estado ExpanionStates.

Por debajo de captura de pantalla muestra las personalizaciones más solicitados. Si tiene instalado Silverlight 2.0 y su lector soporta vivir aplicación de Silverlight, se puede jugar con él aquí también:

• PDC08 muestra el expansor en la versión actual en CodePlex. Hay un error en ExpanderRightHeaderTemplate (utilizado si se establece ExpandDirection a la derecha) que hace que la CPU y uso de memoria. Este es fija y la solución estará en nuestro próximo lanzamiento en 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 yo todavía no puedo creer lo frágil xaml y animación. Me tomó mucho tiempo para localizar a la solución de un carácter: uno (de decenas) ObjectAnimationKeyFrames tiene atributo Duration accidentalmente a "1" en lugar de "0". Que llevó a Silverlight frutos secos en tiempo de ejecución y la CPU del cerdo / memoria.
• Nuevo (ExpanderStyle) muestra la nueva plantilla que se publicará pronto.
• Fade In / Out (ExpanderFadeStyle) personaliza el expandir / contraer comportamiento se anima la opacidad a desaparecer el contenido de entrada y salida.
• Escala de entrada / salida (ExpanderScaleStyle) personaliza el expandir / contraer comportamiento animando ScaleTransform.ScaleX y ScaleTransform.ScaleY entre 1 y 0 para ampliar y reducir el tamaño del contenido.
• No Button (ExpanderNoButtonStyle) personaliza el diseño, eliminando el círculo con el botón de la flecha de alternancia. Todavía se puede expandir / contraer el contenido con el ratón o el teclado.
• Botón Abajo / Derecha (ExpanderBottomRightButtonStyle) personaliza el diseño, poniendo el círculo con la flecha de alternancia a la parte inferior / derecha de la cabecera.

Código Fuente

Usted puede encontrar el archivo de proyecto comprimido:

Conclusión

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