Ning Zhang blog

Présentation

Le Mars 2009 Communiqué de Silverlight Toolkit a beaucoup de nouvelles fonctionnalités et améliorations. Parmi eux, des mises à jour des caractéristiques de conception du temps:

• un installateur MSI qui offre une intégration étroite avec Visual Studio et Blend hors de la boîte, ce qui rend le développement de Silverlight avec le Toolkit beaucoup plus facile;
• soutenir à la fois le développement Silverlight 2 avec Visual Studio 2008 et Blend 2, et Silverlight 3 de développement avec Visual Studio 2008 et Blend 3;
• ajouter des fonctionnalités temps de conception pour les six nouveaux contrôles ( Accordéon , DomainUpDown , LayoutTransformer , TimePicker , TimeUpDown , TransitioningContentControl );
• effet de levier le cadre nouveau design le temps d'extensibilité dans Blend 3 (et bientôt dans Visual Studio 2010) et d'améliorer les caractéristiques du temps de conception des contrôles existants, comme intializers défaut, AlternateContentPropertyAttribute et éditeurs personnalisés, pour offrir une expérience de conception beaucoup mieux, surtout dans Blend 3.

Ce post est une mise à jour pour mon poste avant Caractéristiques moment du design dans Silverlight Toolkit .

Silverlight 2 pour le développement avec Visual Studio 2008 et Blend 2

Configuration

• Tout d'abord, suivez les étapes 1 et 2 sur http://silverlight.net/GetStarted installer Silverlight 2 et Blend 2:

• Ensuite, suivez l'étape 4 pour Silverlight Toolkit CodePlex page, cliquez sur "Télécharger la dernière version" lien:

• Cliquez sur le "Silverlight 2 Mars 2009 Installer Toolkit" lien, et exécuter le MSI: (Vous pouvez également enregistrer le msi à votre ordinateur et l'exécuter plus tard)

Après l'installation terminée, vous verrez Silverlight Toolkit 2 est installé sur votre ordinateur:

S'il vous plaît noter:

• il ya un espace de noms (les deux CLR et le préfixe xmlns) et le changement de nom d'assembly à partir Microsoft.Windows.Controls dans les versions précédentes d'System.Windows.Controls dans ce communiqué. S'il vous plaît voir Shawn Burke 's message Silverlight Toolkit Mars 2009 Communiqué pour une bonne explication pour le changement et ses implications pour le développement avec Silverlight Toolkit.
• en plus des quatre existants assemblées toolkit (contrôles, Controls.Input, Control.DataVisualization et Controls.Theming) dans les versions précédentes, il ya une nouvelle assemblée ajouté dans cette version: Controls.Layout, qui contenait Accordéon, LayoutTransfer et TransitioningContentControls.
• nous suivons encore la même convention pour les assemblages de temps de conception: il ya trois ensembles de temps de conception pour chaque assemblage moment de l'exécution (conception, expression.design et visualstudio.design...), et toutes les assemblées du temps de conception réside dans le sous-dossier de conception.

Il ya aussi un nouveau Microsoft Silverlight Toolkit 2 Mars 2009 Groupe élément Menu Démarrer de fournir un accès facile à toutes les informations liées Toolkit, comme docs, des échantillons, le code source sur l'ordinateur local, et Silverlight Toolkit forums et CodePlex la page sur le web:

Procédure pas à pas

Nous allons utiliser une procédure pas à pas comment créer un contrôle Chart dans Blend pour démontrer les fonctionnalités du temps de conception pour Silverlight Toolkit:

• Créez un nouveau projet Silverlight Application 2 dans le mélange:

• Ajouter une référence à des assemblées Toolkit: (Ici, je ajouter toutes les assemblées Toolkit, mais seulement System.Windows.Controls.DataVisualization.Toolkit.dll est nécessaire pour cette procédure)

• Bibliothèque ouverte Asset, cliquez sur Personnalisé onglet Commandes, puis double cliquez sur le contrôle graphique:

• Ajoutez un contrôle Chart à la surface de conception, de définir sa propriété Titre sous la catégorie de visualisation des données dans le panneau de propriétés:

• Cliquez sur le bouton Nouveau à côté de la propriété DataContext sous Propriétés communes, sélectionnez PointCollection du dialogue Sélectionner un objet, puis cliquez sur OK:

• Dans l'éditeur XAML, remplacez le code XAML généré "<PointCollection />« d'être comme ceux soulignés ci-dessous capture d'écran, de fournir certaines données pour le contrôle graphique pour afficher:

• Cliquez sur le bouton ... à côté de "Série (Collection)» sous la catégorie de propriété Propriétés communes, cliquez sur "Ajouter un autre élément" bouton dans la boîte de dialogue Éditeur Collection Série, sélectionnez ColumnSeries de dialogue Sélectionner un objet, puis cliquez sur OK:

• Retour à la boîte de dialogue Éditeur Collection Série, définir des propriétés pour l'ColumnSeries nouvellement créée dans le volet de droite Propriétés:
  • Set DependeptValuePath à X et à Y IndependentValuePath, tant dans la catégorie Propriétés communes
    
  • Cliquez sur le rectangle à droite de la propriété ItemsSource, sélectionnez Liaison de données ... dans le menu contextuel surgi:
    
  • Sélectionnez l'élément seulement, PointCollection (Array) article, dans listbox champs dans la boîte de dialogue Créer la liaison de données, puis cliquez sur le bouton Terminer:
    
  • Retour à la boîte de dialogue Éditeur Collection Série nouveau, remarquez la propriété ItemsSource est maintenant entourée d'un rectangle jaune, indiquant qu'il a désormais une valeur contraignante données modifiées. Cliquez sur OK pour fermer la boîte de dialogue Éditeur Série Collection:
    

• Nous sommes de retour au Mélange fenêtre principale, et voila, nous avons un contrôle Chart rendu gentiment dans la vue de conception:

Nous pouvons frapper sur F5 pour générer et exécuter le projet de mélange, ou ouvrez le projet dans Visual Studio pour continuer à modifier le XAML et le code. Avis au-dessous capture d'écran que la boîte à outils Visual Studio est auto peuplées avec des contrôles Toolkit:

Silverlight 3 pour le développement avec Visual Studio 2008 et Blend 3

Configuration

Avant de commencer, s'il vous plaît lire les notes des développeurs importants sur http://silverlight.net/getstarted/silverlight3/default.aspx # outils de soin (en dessous de capture d'écran aussi).

• Tout d'abord, suivi des trois premières étapes sur http://silverlight.net/getstarted/silverlight3/default.aspx # outils de page pour installer Silverlight 3 Beta Tools, le SDK (certains des contrôles Toolkit précédente, comme DockPanel, WrapPanel, expander, Viewbox, HeaderedContentControl, HeaderedItemsControl, TreeView, etc AutoCompleteBox, et leurs assemblées le temps de conception, ont déménagé à SDK de Silverlight 3), et Blend 3 Extrait:
• Ensuite, suivez la quatrième étape de Silverlight Toolkit site CodePlex Projet , cliquez sur Télécharger la dernière version lien, puis cliquez sur Installer et exécuter le Toolkit Silverlight 3 Mars 2009:

Après l'installation est complété, vous verrez Silverlight 3 beta du SDK et Toolkit installé sur votre ordinateur:

• SDK:

• Boîte à outils:

Et le Microsoft Silverlight Toolkit 3 Mars 2009 Groupe élément du menu Démarrer pour un accès facile à toutes les informations Toolkit:

Procédure pas à pas

Maintenant, nous allons faire la même chose de créer une solution de contrôle graphique, mais cette fois avec Blend 3:

• Démarrer Microsoft Expression Blend 3 Extrait du menu Démarrer, créez une nouvelle application Silverlight 3 + projet Site Web:

• Cliquez sur la Bibliothèque d'actifs, un avis sur l'onglet Commandes est pré-rempli avec les contrôles Silverlight runtime et du SDK 3, y compris ceux utilisés pour être dans la trousse, comme DockPanel, Expander, etc TreeView Blend 3 remplit Bibliothèque Asset manière asynchrone, afin que vous remarquerez peut-être quelques-uns secondes de retard avant que l'onglet Contrôles est complètement rempli.

• Cliquez sur l'onglet Commandes, avis, il est pré-rempli avec les contrôles Toolkit:

• Double cliquez sur le contrôle de graphique, cliquez et faites glisser sur la surface de conception, et voila, un contrôle graphique est créé, initialisé avec quelques exemples de données, et joliment rendus. Nous avons dû passer par une procédure manuelle beaucoup dans Blend 2 pour créer le même résultat:

S'il vous plaît noter la capture d'écran ci-dessus:

• dans le panneau des projets sur la droite, la référence à System.Windows.Controls.DavaVisualization.Toolkit.dll est automatiquement ajoutée;
• dans l'éditeur XAML, le xmlns: chartingToolkit définition est automatiquement ajouté
• remarquerez aussi que quelques-uns Blend 3 nouvelles fonctionnalités, comme icône personnalisée pour un contrôle graphique (dans les deux objets et le volet Calendrier et volet Propriétés), initialiseur défaut qui génère le XAML initiale pour le contrôle Chart.

Depuis le contrôle Chart est si facile de créer, nous allons faire un peu plus dans Blend 3 walkthrough.

• Cliquez sur l'onglet Propriétés sur la droite, et d'élargir le contrôle Chart dans Objets et chronologie sur le volet gauche:

S'il vous plaît noter la capture d'écran ci-dessus:

• Dans le Panneau de propriétés, les petits points blancs sur la droite en évidence les propriétés initialisées par défaut initialiseur Chart contrôle;
• Dans panneau Objets et chronologie, il ya LegendItem et les propriétés des axes relevant de l'objet graphique, et les propriétés IndependentAxis et DependentRangeAxis sous l'objet ColumnSeries. Ceux sont appelées propriétés de contenu alternatif. Les afficher dans la hiérarchie des objets permet d'accéder facilement à ces propriétés au moment du design. Par exemple, on peut glisser et déposer un LinearAxis à la propriété des axes:

Donc la comparaison des mêmes créer une solution de contrôle Chart dans Blend 3 et Blend 2, nous pouvons voir que Blend 3 un concepteur beaucoup mieux, et nos assemblées du temps de conception pour Blend 3 ont permis de mobiliser de nombreuses capacités de conception nouvelle extension du temps, comme par défaut et l'initialiseur propriété du contenu alternatif, d'améliorer considérablement l'expérience de la conception des contrôles Toolkit.

Maintenant, ouvrez le projet dans Visual Studio:

S'il vous plaît noter que:

• La boîte à outils sur la gauche est pré-rempli avec les commandes du SDK et Toolkit.
• Les fenêtres de sortie au bas de droite affiche un message d'erreur Échec de chargement de l'assemblage de conception. Ignorez toute sécurité.

Expérience en conception dans Visual Studio 2008 (deux Silverlight 2 et 3)

Expérience de conception dans Visual Studio Toolkit est à peu près les mêmes pour les deux Silverlight 2 et Silverlight 3, afin que nous puissions poursuivre la suivante à partir du dessus des deux soluces. Par souci de commodité, nous continuerons de la solution Silverlight 3 ci-dessus.

Maintenant, faites glisser et déposez le contrôle d'Accordéon boîte à outils pour l'éditeur XAML:

Nous pouvons voir que:

• En XAML rédacteur en chef
  • est automatiquement ajouté
  • <layoutToolkit:Accordion> </ layoutToolkit: Accordéon> est automatiquement ajouté
• Dans l'Explorateur de solutions
  • références à System.Windows.Controls.Layout.Toolkit assemblage, et les deux assemblées dont elle dépend, en System.windows.Controls.Toolkit Toolkit et du SDK de System.Windows.Controls, sont ajoutés automatiquement au projet

Maintenant, faites glisser et déposez un peu de contrôles de boîte à outils pour l'éditeur XAML.

S'il vous plaît avis que la capture ci-dessus:

• en XAML Editor
  • nous pouvons voir que nous avons glissé et déposé Calendrier, AutoCompleteBox et NumericUpDown à l'accordéon
  • appropriée des définitions xmlns et le code XAML sont automatiquement ajoutés
• Dans la fenêtre Aperçu
  • Code XAML est correctement rendu comme nous éditons en XAML rédacteur en chef
• Dans l'éditeur de code
  • Remarquez la IntelliSense et InfoTip
  • Ignorer les erreurs dans la fenêtre d'erreurs que nous taper dans XAML ou éditeurs de code avant de terminer la déclaration
• Dans l'Explorateur de solutions:
  • références aux assemblys nécessaires sont automatiquement ajoutés

Appuyez sur F5, et il construit et fonctionne bien:

Crédits

J'espère bien que vous êtes excité à propos des améliorations expérience de conception, depuis que j'ai appliqué la plupart de celui-ci Jeff Wilcox en œuvre du programme d'installation, et Justin Ange a écrit la spécification pour les deux l'expérience du temps de conception et d'installation. Beaucoup de mes collègues d'autres ont contribué à la conception de l'expérience aussi, surtout RJ Boeke , Jafar Husain , et David Anson . Un grand merci aux gens dans les équipes de Blend et cidre, notamment Unni Ravindranathan , Gary Linscott, Pierre de Blois; Brian Pepin, et Eric Fisk. Sans eux, aucun des améliorations expérience de conception serait possible. Et pour Shawn Burke , pour son soutien et mettant l'accent sur ​​les caractéristiques de la conception, et l'implication profonde dans la résolution de problèmes techniques clés durs.

Je vais écrire un communiqué de suivi post sur les mises à jour de conception le temps de mise en œuvre en Mars 2009. Restez à l'écoute!