Ning Zhang Blog

Einführung

Dies ist der zweite Beitrag des Silverlight-Toolkits Anpassen Bedienelemente Serie. Dieser Beitrag zeigt, wie Expander anzupassen, und stellt die am häufigsten gestellten Anpassungen aus Silverlight-Toolkit Forum .

Expander Customization

Um Expander anpassen, ist es sehr wichtig, ihre API-und Standard-Template zu verstehen und wissen, wie man Blend Re-Vorlage verwenden eine Kontrolle. Ich würde empfehlen Sie lesen meinem vorherigen Post Expander-Steuerelement 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 Erweitern / Reduzieren-Funktion hängt von der Existenz dieser Vorlage Teil, da Silverlight nicht unterstützt Zwei-Wege-Bindung.
  • Expander macht ExpansionStates visuellen Zustand Gruppe (einschließlich ein-und ausgeblendet zwei visuelle Staaten) für Benutzer anpassen seinem Verhalten erweitern und reduzieren.
  • Expander macht ExpandDirectionStates visuellen Zustand Gruppe (einschließlich ExpandDown, ExpandUp, ExpandLeft, ExpandRight) für die Nutzer das Layout für jede der vier erweitern Richtung anpassen, um.
  • Expander macht auch HeaderTemplate ContentTemplate und Eigenschaften für die Nutzer seiner Kopf-und Inhaltsbereich anpassen zu. Sie finden diese Art der Anpassung von Silverlight Control Toolkit Probe .

• verstehen Expanders Standardvorlage. Der nachfolgende Screenshot zeigt, wie der Standard-Vorlage das Layout der vier Richtungen zu erweitern und das Verhalten der zeigen / durch die Bereitstellung Storyboard für das ExpansionStates und ExpandDirectionStates visuellen Zustand zusammenbrechen Gruppen behandelt:
  • Der ganze Kopf ist ein Template-ToggleButton, so klicken Sie sowieso auf die Kopf kann expand / collapse den Inhaltsbereich.
  • Es verwendet eine 2 × 2-Grid-Layout, um Kopf-und Content-Bereich.
  • Sie legt den Expander nach ExpandDirection, indem er staatliche Animation für ExpandDirectionStates:
    • Sie legt Kopf-und Content-Bereiche durch die Animation ihre Grid.Row und Grid.Column Eigenschaften.
    • Er zieht den Kopf Umschaltfläche korrekt durch eine Änderung seiner Vorlage.
  • Es erweitert / zusammenbricht Content-Bereiche durch die Animation seiner Sicht Attribut in ExpanionStates Zustandsübergänge.

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

• 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 ist behoben und das Update wird im nächsten Release in wenigen Wochen sein. Ich für die Unannehmlichkeiten entschuldigen. Expander ist meine erste Silverlight-Steuerelement. Ich wusste nichts über Silverlight oder WPF, bevor ich Shawns Team beigetreten 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) hat ObjectAnimationKeyFrames Dauer Attribut versehentlich auf "1" gesetzt statt "0". Das trieb Silverlight-Laufzeit Nüssen und Schwein CPU / Speicher.
• Neu (ExpanderStyle) zeigt die neue Vorlage in Kürze veröffentlicht werden.
• Fade In / Out (ExpanderFadeStyle) passt das Aufklappen / Zuklappen Verhalten animieren Deckkraft auf den Inhalt und Ausblenden.
• Scale-In / Out (ExpanderScaleStyle) passt das Aufklappen / Zuklappen Verhalten animieren ScaleTransform.ScaleX und ScaleTransform.ScaleY zwischen 1 und 0 zu erweitern und verkleinern Sie den Inhalt.
• Kein Button (ExpanderNoButtonStyle) passt das Layout, indem Sie den Kreis mit Pfeil Toggle-Buttons. Sie können immer noch expand / collapse Inhalte mit Maus oder Tastatur.
• Unten / Rechts-Taste (ExpanderBottomRightButtonStyle) passt das Layout, indem Sie den den Kreis mit Pfeil Umschaltfläche unten / rechts im Header.

Source Code

Hier finden Sie die gezippte Projektdatei:

Abschluss

Expander ist die Top-Keyword auf meinem Blog. Es ist eine sehr nützliche Kontrolle und relativ schwer zu gestalten. Hoffentlich Dieser Beitrag wird Ihnen bei der Verwendung und Anpassung von Expander helfen. Vielen Dank!