Zhang Ning blog

Introduction

C'est le deuxième poste de la série Personnaliser Silverlight Toolkit contrôles. Ce post montre comment personnaliser Expander, et fournit la plupart des personnalisations demandé de Silverlight Toolkit forum .

Expander Customisation

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

• comprendre l'interface d'extension, en particulier de son contrat de commande:
  • Expander attend un composant de modèle, un bouton à bascule nommé "ExpanderButton", dans son modèle. Son expansion / fonction effondrement dépend de l'existence de ce modèle part, parce que Silverlight ne prend pas en charge les deux sens contraignant.
  • Expander expose groupe ExpansionStates état visuel (y compris élargi et s'est effondré deux états visuels) pour les utilisateurs de personnaliser son développement et de réduction des comportements.
  • Expander expose groupe ExpandDirectionStates état visuel (y compris ExpandDown, ExpandUp, ExpandLeft, ExpandRight) pour les utilisateurs de personnaliser la présentation de chacun des quatre élargir direction.
  • Expander expose également HeaderTemplate et les propriétés 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 par défaut d'extension du modèle. La capture d'écran ci-dessous montre comment le modèle par défaut gère la mise en page des quatre directions d'élargir et le comportement des expand / collapse en fournissant Storyboard pour le ExpansionStates et ExpandDirectionStates groupes état visuel:
  • L'ensemble est un en-tête 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 grille de 2 × 2 de mise en page en-tête et zone de contenu.
  • Il énonce les Expander selon ExpandDirection en faisant état d'animation pour ExpandDirectionStates:
    • Il énonce en-tête et les zones de contenu en animant leur Grid.Row et les propriétés Grid.Column.
    • Il s'appuie sur le bouton à bascule en-tête correctement en changeant son modèle.
  • Il étend / effondrements des zones de contenu en animant son attribut de visibilité dans les transitions d'état ExpanionStates.

capture d'écran ci-dessous montre les personnalisations les plus demandés. Si vous avez Silverlight 2.0 installé et votre lecteur prend en charge l'application Silverlight en direct, vous pouvez jouer avec lui ici aussi:

• PDC08 montre les Expander dans la version actuelle sur CodePlex. Il ya un bogue dans ExpanderRightHeaderTemplate (utilisée si vous définissez ExpandDirection à droite) qui provoque des CPU haut et utilisation de la mémoire. Ceci est corrigé 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 de rejoindre 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 caractère One Fix: un (des dizaines) a ObjectAnimationKeyFrames Durée attribut accidentellement réglé sur "1" au lieu de "0". C'est cela qui explique Silverlight noix d'exécution et de porcs cpu / mémoire.
• Nouvelle (ExpanderStyle) présente le modèle à être publiée prochainement.
• Fade In / Out (ExpanderFadeStyle) personnalise l'expand / collapse comportement en animant l'opacité à s'estomper dans le contenu et à la sortie.
• Échelle In / Out (ExpanderScaleStyle) personnalise l'expand / collapse comportement en animant ScaleTransform.ScaleX et ScaleTransform.ScaleY entre 1 et 0 pour agrandir et rétrécir le contenu.
• Aucun bouton (ExpanderNoButtonStyle) personnalise la mise en page en enlevant le cercle avec bouton à bascule flèche. Vous pouvez toujours afficher / masquer le contenu avec la souris ou le clavier.
• Bas / Droite (ExpanderBottomRightButtonStyle) personnalise la mise en page en mettant le cercle avec une flèche du bouton à bascule vers le bas / partie droite de l'en-tête.

Source Code

Vous pouvez trouver le projet fichier zippé:

Conclusion

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