Ning Zhang Blog

Einführung

Dies ist der zweite Beitrag des Customize Silverlight Toolkit Steuert Reihe. Dieser Beitrag zeigt, wie Expander anpassen und stellt die am häufigsten gestellten Anpassungen von Silverlight Toolkit Forum .

Expander Customization

So passen Expander, ist es sehr wichtig, seine API und das Standard-Template zu verstehen und wissen, wie man Blend re-Vorlage ein Steuerelement verwenden. Ich würde empfehlen Sie lesen meinem vorherigen Post Expander Control in Silverlight Toolkit , wenn Sie noch nicht haben. Der Schlüssel zum Expander anpassen:

• verstehen, Expander-Schnittstelle, vor allem seine Kontrolle Vertrag:
  • Expander erwartet eine Vorlage Teil, eine Schaltfläche namens "ExpanderButton", in seiner Vorlage. Seine expand / collapse Funktion hängt von der Existenz dieser Vorlage zum Teil, weil Silverlight nicht unterstützt Zwei-Wege-Bindung.
  • Expander macht ExpansionStates visuellen Zustand Gruppe (einschließlich der erweiterten und reduzierten zwei visuelle Staaten) für Benutzer anpassen ihre erweitern und reduzieren Verhalten.
  • Expander macht ExpandDirectionStates visuellen Zustand Gruppe (einschließlich ExpandDown, ExpandUp, ExpandLeft, ExpandRight) für Benutzer das Layout für jede der vier erweitern Richtung anpassen können.
  • Expander macht auch HeaderTemplate und ContentTemplate Eigenschaften für Benutzer seinen Kopf-und Inhaltsbereich anpassen können. Sie finden diese Art der Anpassung von Silverlight Control Toolkit Beispiel .

• verstehen Expander die Standard-Vorlage. Der Screenshot unten zeigt, wie der Standard-Vorlage das Layout der vier Richtungen zu erweitern und das Verhalten der zeigen / durch Storyboard für das ExpansionStates und ExpandDirectionStates visuellen Zustand Gruppen Zusammenbruch Griffe:
  • Der ganze Kopf ist ein Template ToggleButton, so klicken Sie sowieso auf der Kopfzeile kann expand / collapse den Content-Bereich.
  • Es verwendet eine 2 × 2-Grid-Layout Header-und Content-Bereich.
  • Es legt die Expander nach ExpandDirection, indem staatliche Animation für ExpandDirectionStates:
    • Sie legt Kopf-und Content-Bereiche durch die Animation ihre Grid.Row und Grid.Column Eigenschaften.
    • Er zieht die Header Toggle-Button richtig durch Änderung ihrer Vorlage.
  • Es erweitert / zusammenbricht Content-Bereiche durch die Animation ihre Visibility Attribut in ExpanionStates Zustandsübergänge.

Unten Screenshot zeigt die am häufigsten gestellten Anpassungen. Wenn Sie Silverlight 2.0 installiert haben und Ihre Leser unterstützt Live-Silverlight-Anwendung können Sie mit ihm spielen hier auch:

• PDC08 zeigt den Expander in aktuelle Release auf Codeplex. Es ist ein Fehler in ExpanderRightHeaderTemplate (verwendet, wenn Sie ExpandDirection nach rechts gesetzt), die eine hohe CPU-und Speicherauslastung verursacht. Dies wurde behoben und das Update wird im nächsten Release in ein paar Wochen sein. I für die Unannehmlichkeiten entschuldigen. Expander ist mein allererstes Silverlight-Steuerelement. Ich wusste nichts über Silverlight oder WPF, bevor ich Shawn Team trat ein paar Monate zurück, und ich kann immer noch nicht glauben, wie zerbrechlich XAML und Animation sind. Es dauerte eine lange Zeit auf die Spur der ein Zeichen fix: ein (von Dutzenden) ObjectAnimationKeyFrames Duration-Attribut versehentlich auf "1" gesetzt, statt "0". Das trieb Silverlight Runtime Nüssen und hog CPU / Speicher.
• New (ExpanderStyle) zeigt die neue Vorlage in Kürze veröffentlicht werden.
• Fade In / Out (ExpanderFadeStyle) passt das expand / collapse Verhalten animieren Deckkraft, um den Inhalt in-und ausgeblendet werden.
• Scale-In / Out (ExpanderScaleStyle) passt das expand / collapse Verhalten animieren ScaleTransform.ScaleX und ScaleTransform.ScaleY zwischen 1 und 0 zu erweitern und verkleinern den Inhalt.
• Kein Button (ExpanderNoButtonStyle) passt das Layout, indem Sie den Kreis mit Pfeil Toggle-Buttons. Sie können noch expand / collapse Inhalte mit Maus oder Tastatur.
• Unten / Rechts-Taste (ExpanderBottomRightButtonStyle) passt das Layout, indem Sie den Kreis mit Pfeil Umschaltfläche unten / rechts im Header.

Source Code

Hier finden Sie die gezippte Projektdatei:

Abschluss

Expander hat die Top-Keyword auf meinem Blog. Es ist ein sehr nützliches Steuerung und relativ schwer zu gestalten. Hoffentlich Beitrag werden Sie in Verwendung und Anpassung Expander helfen. Vielen Dank!

Gesellig, Share!

•