Ning Zhang Blog

Einführung

Der März 2009 Veröffentlichung des Silverlight Toolkit hat viele neue Features und Verbesserungen. Unter ihnen Updates für Design-Zeit Funktionen:

• ein neues MSI-basierten Installer, der eine enge Integration bietet mit Visual Studio und Blend aus der Box, wodurch Silverlight Entwicklung mit dem Toolkit viel einfacher;
• unterstützen sowohl Silverlight 2-Entwicklung mit Visual Studio 2008 und Blend 2 und Silverlight 3-Entwicklung mit Visual Studio 2008 und Blend 3;
• add Design-Zeit Funktionen für die sechs neuen Kontrollen ( Akkordeon , DomainUpDown , LayoutTransformer , TimePicker , TimeUpDown , TransitioningContentControl );
• Nutzung der neuen Design-Zeit erweiterbares Framework in Blend 3 (und bald auch in Visual Studio 2010) und verbessern Design-Zeit Funktionen für vorhandene Steuerelemente, wie default intializers, AlternateContentPropertyAttribute und benutzerdefinierte Editoren, um ein viel besseres Design-Erfahrung, insbesondere in Blend 3 bieten.

Dieser Beitrag ist ein Update für meinen vorherigen Post Design Time Features in Silverlight Toolkit .

Silverlight 2-Entwicklung mit Visual Studio 2008 und Blend 2

Setup-

• Zunächst folgen Sie Schritt 1 und 2 auf http://silverlight.net/GetStarted zu Silverlight 2 und Blend 2 zu installieren:

• Dann folgen Sie Schritt 4, um Silverlight Toolkit CodePlex-Seite, klicken Sie auf "Download der neuesten Version" verlinken:

• Klicken Sie auf den "Silverlight 2 Toolkit März 2009 Installer"-Link, und führen Sie die msi: (Sie können auch die msi auf Ihren Computer und führen Sie es später)

Nach Abschluss der Installation werden Sie sehen, Silverlight 2 Toolkit auf Ihrem Computer installiert:

Bitte beachten Sie:

• es ist ein Namespace (beide CLR und xmlns-Präfix) und Montage Namensänderung von Microsoft.Windows.Controls in früheren Versionen zu System.Windows.Controls in dieser Pressemitteilung. Bitte beachten Sie Shawn Burke 's Beitrag Silverlight Toolkit März 2009 Veröffentlichung für eine gute Erklärung für den Wandel und seine Auswirkungen auf die Entwicklung mit Silverlight Toolkit.
• neben den bestehenden vier-Toolkit-Baugruppen (Controls, Controls.Input, Control.DataVisualization und Controls.Theming) in früheren Versionen gibt es ein neues Montagewerk in dieser Veröffentlichung aufgenommen: Controls.Layout, die Akkordeon, LayoutTransfer und TransitioningContentControls enthalten.
• wir immer noch die gleiche Konvention für Design-Zeit-Baugruppen: Es gibt drei Design-Zeit-Baugruppen für jede Laufzeit Montage (Design, expression.design und visualstudio.design...), und alle Design-Zeit-Baugruppen in der Design-Unterordner befinden.

Es gibt auch eine neue Microsoft Silverlight 2 Toolkit März 2009 Startmenü-Eintrag Gruppe einen leichten Zugang zu allen Toolkit Informationen, wie Dokumente, Muster, Source-Code auf dem lokalen Computer und Silverlight Toolkit Foren und CodePlex-Seite im Web bieten:

Walkthrough

Lassen Sie uns eine Komplettlösung, wie man ein Chart-Steuerelement in Blend erstellen, um die Design-Zeit Funktionen für Silverlight Toolkit zu demonstrieren:

• Erstellen Sie eine neue Silverlight 2-Anwendung-Projekt in Blend:

• Add Verweis auf die Toolkit-Baugruppen: (Hier füge ich alle Toolkit-Baugruppen, sondern nur System.Windows.Controls.DataVisualization.Toolkit.dll ist für diese exemplarische Vorgehensweise erforderlich)

• Open Asset Library, klicken Sie auf Custom Controls-Registerkarte, und doppelklicken Sie auf das Chart-Steuerelement:

• Fügen Sie ein Chart-Steuerelement auf die Entwurfsoberfläche, setzen Sie die Eigenschaft Titel unter Data Visualization Kategorie in Properties Panel:

• Klicken Sie auf die Schaltfläche Neu neben DataContext-Eigenschaft unter Allgemeine Eigenschaften die Option PointCollection aus dem Select Object Dialog, und klicken Sie dann auf OK:

• In XAML-Editor, ersetzen Sie den generierten XAML "<PointCollection />", um wie in unten Screenshot hervorgehoben werden, um irgendwelche Daten für die Chart-Steuerelement bietet die Anzeige:

• Klicken Sie auf die Schaltfläche ... neben "Series (Collection)" Eigentum unter Allgemeine Eigenschaften Kategorie, klicken Sie auf "Add einem anderen Element" in der Serie Collection Editor Dialogfeld, wählen Sie ColumnSeries in Select Object Dialog, und klicken Sie dann auf OK:

• Zurück zur Serie Collection Editor Dialogfeld Eigenschaften für den neu geschaffenen ColumnSeries im rechten Fensterbereich Eigenschaften:
  • Set DependeptValuePath auf X und Y IndependentValuePath zu, sowohl in allgemeiner Eigenschaften Kategorie
    
  • Klicken Sie auf das Rechteck auf der rechten Seite ItemsSource-Eigenschaft, wählen Sie Data Binding ... aus dem tauchte Kontextmenü:
    
  • Wählen Sie das einzige Element, PointCollection (Array) Element, in Felder listbox in der Create Data Binding Dialog klicken Sie dann auf die Schaltfläche Fertig stellen:
    
  • Zurück zur Serie Collection Editor Dialogfeld erneut, bemerken die ItemsSource-Eigenschaft ist jetzt mit einem gelben Rechteck umgeben ist, angibt, dass es nun einen geänderten Daten verbindlichen Wert. Klicken Sie auf OK, um die Serie Collection Editor Dialogfeld zu schließen:
    

• Wir sind zurück zum Hauptfenster Blend, und voila, wir haben ein Chart-Steuerelement schön in der Design-Ansicht dargestellt:

Wir können drücken Sie F5 zum Erstellen und Ausführen des Projekts von Blend, oder öffnen Sie das Projekt in Visual Studio auch weiterhin die Bearbeitung der XAML-und Code. Beachten Sie in folgenden Screenshot, dass die Visual Studio-Toolbox auto mit Toolkit steuert bevölkert ist:

Silverlight 3-Entwicklung mit Visual Studio 2008 und Blend 3

Setup-

Bevor Sie beginnen, lesen Sie die wichtigen Hinweise für Entwickler auf http://silverlight.net/getstarted/silverlight3/default.aspx # Werkzeuge sorgfältig (in folgenden Screenshot zu).

• Zunächst folgen die ersten drei Schritte auf http://silverlight.net/getstarted/silverlight3/default.aspx # Tools , um Silverlight 3 Beta Tools installieren, SDK (einige der bisherigen Toolkit-Steuerelemente, wie DockPanel, WrapPanel, Expander, Viewbox, HeaderedContentControl, HeaderedItemsControl haben TreeView, AutoCompleteBox etc, und ihre Design-Zeit-Baugruppen, die SDK in Silverlight 3 bewegt), und Blend 3 Preview:
• Dann folgen Sie den vierten Schritt, um Silverlight Toolkit CodePlex-Projekt vor Ort , klicken Sie auf Download der neuesten Version Link, klicken Sie dann auf und führen Sie das Silverlight 3 Toolkit März 2009 Installer:

Nach Abschluss der Installation werden Sie sehen, Silverlight 3 Beta SDK und Toolkit auf Ihrem Computer installiert:

• SDK:

• Toolkit:

Und das Microsoft Silverlight 3 Toolkit März 2009 beginnen Menüpunkt Gruppe für einfachen Zugriff auf alle Toolkit Informationen:

Walkthrough

Jetzt machen wir das gleiche schaffen ein Chart-Steuerelement Komplettlösung, aber dieses Mal mit Blend 3:

• Starten Sie Microsoft Expression Blend 3 Preview aus dem Startmenü, erstellen Sie ein neues Silverlight 3 Application + Website-Projekt:

• Klicken Sie auf die Asset Library, beachten Sie die Registerkarte Steuerelemente mit Silverlight 3 Runtime und SDK Kontrollen vor bevölkert, auch verwendet werden, um in Toolkit werden, wie DockPanel, Expander, TreeView etc. Blend 3 füllt Asset Library asynchron, so können Sie feststellen, ein paar Sekunden, bis der Registerkarte Steuerelemente vollständig aufgefüllt ist.

• Klicken Sie auf die Registerkarte Custom Controls, merken es ist mit Toolkit steuert vorbelegt:

• Doppelklicken Sie auf das Chart-Steuerelement, klicken und ziehen auf der Entwurfsoberfläche, und voila, ein Chart-Steuerelemente erstellt, initialisiert mit einigen Beispieldaten, und schön gemacht. Wir mussten durch viele manuelle Schritte in Blend 2 gehen, um dasselbe Ergebnis zu erstellen:

Bitte beachten Sie in obigen Screenshot:

• in den Projekten auf der rechten wird auf System.Windows.Controls.DavaVisualization.Toolkit.dll automatisch hinzugefügt;
• im XAML-Editor, der xmlns: chartingToolkit Definition wird automatisch hinzugefügt
• auch feststellen, ein paar Blend 3 neue Funktionen, wie benutzerdefiniertes Symbol für Chart-Steuerelement (in beiden Object-und Timeline-Fenster und Fenster Eigenschaften), Standard-Initialisierung, dass die anfängliche XAML generiert für die Chart-Steuerelement.

Da der Chart-Steuerelement so leicht erstellt wird, machen wir ein bisschen mehr in Blend 3 Komplettlösung.

• Klicken Sie auf Eigenschaften Tab auf der rechten Seite, und erweitern Sie den Chart-Steuerelement in Objekte und Zeitachsen auf der linken Seite:

Bitte beachten Sie in obigen Screenshot:

• In Properties Panel, markieren Sie das kleine weiße Punkte auf der rechten Seite die Eigenschaften von Chart-Steuerelement ist standardmäßig Initialisierung initialisiert;
• In Panel Objekte und Zeitachsen gibt es LegendItems und Achsen Eigenschaften unter Chart-Objekt, und IndependentAxis und DependentRangeAxis Eigenschaften unter ColumnSeries Objekt. Diese werden als alternativen Inhalt Eigenschaften. Angezeigte sie in der Objekt-Hierarchie ermöglicht den einfachen Zugriff auf diese Eigenschaften zur Design-Zeit. Zum Beispiel können wir Drag & Drop eine LinearAxis zu den Achsen Eigenschaft:

So vergleicht das gleiche schaffen ein Chart-Steuerelement Komplettlösung in Blend 3 und Blend 2 können wir sehen, dass Blend 3 eine viel bessere Designer und unsere Design-Zeit Baugruppen für Blend 3 haben viele der neuen Design-Zeit Erweiterungsfähigkeiten Leveraged wie Standard-Initialisierung und alternativen Inhalt Eigentum, verbessern die Design-Erfahrung für Toolkit-Steuerelemente.

Nun öffnen Sie das Projekt in Visual Studio:

Bitte beachten Sie, dass:

• Die Toolbox auf der linken Seite mit SDK und Toolkit-Steuerelemente automatisch ausgefüllt.
• Die Ausgabe-Fenster unten rechts zeigt eine Fehlermeldung über fehlgeschlagene zu entwerfen Assembly zu laden. Ignorieren Sie sie sicher.

Design-Experience in Visual Studio 2008 (Beide Silverlight 2 und 3)

Toolkit Design-Erfahrung in Visual Studio ist so ziemlich das gleiche für beide Silverlight 2 und Silverlight 3, so können wir die folgenden entweder von der weiter oben die beiden Komplettlösungen. Für die Bequemlichkeit willen, werden wir von den Silverlight 3 Komplettlösung sofort oben.

Nun ziehen Sie die Accordion-Steuerelement aus der Toolbox auf die XAML-Editor:

Wir sehen, dass:

• In XAML-Editor
  • wird automatisch hinzugefügt
  • <layoutToolkit:Accordion> </ layoutToolkit: Accordion> wird automatisch hinzugefügt
• In Solution Explorer
  • Verweise auf System.Windows.Controls.Layout.Toolkit Montage, und die beiden Baugruppen denen es abhängt, System.windows.Controls.Toolkit in Toolkit und System.Windows.Controls in SDK, werden automatisch dem Projekt hinzugefügt

Jetzt per Drag & Drop ein paar Steuerelemente von Toolbox auf XAML-Editor.

Bitte beachten Sie in obigen Screenshot, dass:

• in XAML-Editor
  • können wir sehen, dass wir und zogen sank Kalender, AutoCompleteBox und NumericUpDown der Accordion
  • geeigneten xmlns-Definitionen und XAML-Code werden automatisch hinzugefügt
• In der Vorschau-Fenster
  • XAML-Code wird richtig gemacht, als wir bearbeiten in XAML-Editor
• In Code-Editor
  • Beachten Sie die Intellisense und infotip
  • Getrost ignorieren die Fehler in Errors-Fenster als wir geben in XAML oder Code-Editoren, bevor wir zum Schlusse
• In Solution Explorer:
  • Verweise auf benötigte Baugruppen werden automatisch hinzugefügt

Hit F5, und es baut und läuft gut:

Credits

Ich hoffe, Sie über die Design-Erfahrung Verbesserungen freuen, da ich das meiste davon umgesetzt Jeff Wilcox implementiert das Installationsprogramm, und Justin Angel schrieb das spec sowohl für die Design-Zeit Erfahrung und Installateur. Viele meiner Kollegen dazu beigetragen, die Design-Erfahrung zu, vor allem RJ Boeke , Jafar Husain , und David Anson . Vielen Dank an die Leute in Blend-und Cider-Teams, vor allem Unni Ravindranathan , Gary Linscott, Peter Blois; Brian Pepin, und Eric Fisk. Ohne sie wäre keiner der Design-Erfahrung Verbesserungen möglich sein. Und Shawn Burke , für seine Unterstützung und Wert auf Design-Zeit Funktionen und tiefe Verstrickung in die Lösung wichtiger und hart technische Probleme.

Ich schreibe ein Follow-up Beitrag am Entwurfszeit Implementierung aktualisiert März 2009 veröffentlichen. Stay tuned!

Gesellig, Share!

•