Ning Zhang Blog

Introduction

C'est le deuxième poste de la série Personnaliser Silverlight Toolkit contrôles. Ce message montre comment personnaliser Expander, et fournit les personnalisations les plus fréquemment posées à partir de Silverlight Toolkit forum .

Personnalisation Expander

Pour personnaliser Expander, il est très important de comprendre son API et le modèle par défaut, et de savoir comment utiliser Blend pour re-modèle d'un contrôle. Je vous recommande fortement de lire mon précédent post de contrôle Expander dans Silverlight Toolkit , si vous n'avez pas encore. La clé pour personnaliser Expander:

• comprendre l'interface d'extension, en particulier son contrat de contrôle:
  • Expander s'attend à un composant de modèle, un bouton à bascule nommé "ExpanderButton", dans son modèle. Son expansion / la fonction effondrement dépend de l'existence de ce composant de modèle, parce que Silverlight ne prend pas en charge les deux sens de liaison.
  • Expander expose ExpansionStates visuelle état du groupe (y compris développé et réduit deux états visuels) pour les utilisateurs de personnaliser son développement et de réduction des comportements.
  • Expander expose ExpandDirectionStates visuelle état du groupe (y compris ExpandDown, ExpandUp, ExpandLeft, ExpandRight) aux utilisateurs de personnaliser la mise en page pour chacun des quatre élargir direction.
  • Expander expose également des propriétés HeaderTemplate et ContentTemplate aux utilisateurs de personnaliser son en-tête et une partie du contenu. Vous pouvez trouver ce genre de personnalisation à partir de Silverlight Control Toolkit échantillon .

• comprendre le modèle par défaut Expander. La capture d'écran ci-dessous montre comment le modèle par défaut gère la disposition des quatre directions d'élargir et le comportement de plier / déplier en fournissant StoryBoard pour les ExpansionStates et les groupes ExpandDirectionStates Etat visuels:
  • L'en-tête est un ensemble basé sur un modèle ToggleButton, donc un clic sur l'en-tête de toute façon peut ouvrir / fermer la zone de contenu.
  • Il utilise une 2 × 2 de la grille à-tête mise en page et zone Contenu.
  • Il établit le Expander selon ExpandDirection en ayant l'animation d'État pour ExpandDirectionStates:
    • Il énonce les zones d'en-tête et le contenu en animant leur Grid.Row et Grid.Column propriétés.
    • Il s'appuie sur le bouton à bascule en-tête correctement en changeant son modèle.
  • Il élargit / s'effondre zones de contenu en animant son attribut visibilité dans les transitions d'état ExpanionStates.

Ci-dessous l'écran photo montre les personnalisations les plus fréquemment posées. Si vous avez installé Silverlight 2.0 et prend en charge votre lecteur en direct application Silverlight, vous pouvez jouer avec lui ici aussi:

• PDC08 montre l'extension de version actuelle sur CodePlex. Il ya un bogue dans ExpanderRightHeaderTemplate (utilisé si vous définissez ExpandDirection à droite) qui provoque élevée du processeur et de mémoire. Ce problème est résolu et le correctif sera dans notre prochaine version dans quelques semaines. Je m'excuse pour la gêne occasionnée. Expander est mon tout premier contrôle Silverlight. Je ne savais pas quoi que ce soit sur Silverlight ou WPF avant que je rejoigne l'équipe de Shawn il ya quelques mois, et je ne peux toujours pas croire à quel point fragile xaml et l'animation sont. Il m'a fallu beaucoup de temps pour traquer le correctif d'un caractère: un (sur des dizaines) ObjectAnimationKeyFrames a l'attribut Durée accidentellement mis à "1" au lieu de "0". Cela a conduit Silverlight écrous d'exécution et de porc cpu / mémoire.
• Nouveau (ExpanderStyle) montre le nouveau modèle à paraître prochainement.
• Fade In / Out (ExpanderFadeStyle) personnalise le plier / déplier le comportement en animant l'opacité pour atténuer le contenu dans et hors.
• Échelle In / Out (ExpanderScaleStyle) personnalise le plier / déplier le comportement en animant ScaleTransform.ScaleX et ScaleTransform.ScaleY entre 1 et 0 pour agrandir ou réduire le contenu.
• Pas de bouton (ExpanderNoButtonStyle) personnalise la mise en page en enlevant le cercle avec le bouton flèche bascule. Vous pouvez toujours ouvrir / fermer le contenu avec la souris ou le clavier.
• Bas / Droite Bouton (ExpanderBottomRightButtonStyle) personnalise la mise en page en mettant le cercle de la flèche avec le bouton à bascule sur la partie bas / droite de l'en-tête.

Code Source

Vous pouvez trouver le fichier de projet zippé:

Conclusion

Expander a été le mot-clé supérieure à mon blog. Il s'agit d'un contrôle très utile et relativement difficile à personnaliser. Espérons que ce post vous aidera dans l'utilisation et la personnalisation Expander. Merci!