Zhang Ning blog

Introduction

Cela fait partie de la série sur la fonctionnalité de mise en œuvre de la conception dans Silverlight Toolkit . Ce message utilise par défaut l'initialisation graphique pour illustrer la façon d'appliquer d'initialisation par défaut des contrôles Silverlight, et d'expliquer l'architecture sous-jacente du modèle d'édition.

Expérience

Si vous installez Silverlight 3 Toolkit en Mars 2009 Release , vous pouvez faire glisser le contrôle graphique de Blend Asset Bibliothèque et déposez-le sur la surface de designer, et vous avez un tableau bien initialisé et rendu:

Vous pouvez en lire davantage en avant post Silverlight Toolkit Design intègre Time: Mars 2009 Communiqué de mise à jour .

Architecture

DefaultInitializer

Il est en fait assez simple à fournir une initialisation par défaut pour un contrôle Silverlight:

• mettre en œuvre une sous-classe des DefaultInitializer , et passer outre à ses InitializeDefaults fonction
• associer la classe initialiseur par défaut avec la classe de contrôle via un FeatureAttribute

capture d'écran ci-dessous montre la mise en œuvre de la classe de base abstraite DefaultInitializer, et d'autres classes de l'espace de noms Microsoft.Windows.Design.Model qui sera discuté prochainement:

L'initialisation se fait en InitializeDefaults emporter, et le résultat est sérialisé en XAML. Donc la première étape dans la mise en œuvre d'un initialiseur de défaut est de définir le XAML voulu être produites.

D'édition de modèles

Une fois le code XAML résultat est défini, je souhaite qu'il y est une abstraction de niveau supérieur / méthode qui vient de prendre le XAML. Mais malheureusement, nous devons utiliser un niveau inférieur beaucoup (et donc plus souple et plus puissant) impératif appelé modèle d'édition API qui se compose de classes comme ModelItem , ModelProperty , ModelEvent , ModelFactory et ModelService . La page MSDN d'édition de modèles d'architecture donne un aperçu de base:

Votre conception de la mise en œuvre à temps interagit avec les contrôles d'exécution si une interface de programmation appelé le modèle d'édition. Les objets en cours de conception sont appelés objets modifiables.

Votre système de contrôle sont définies dans Extensible Application Markup Language (XAML). Vous mettez à jour le code XAML pour vos contrôles par programme en utilisant le modèle d'édition.

Modèle, Wrapper et amis

Le modèle d'édition se compose de trois sous-unités fonctionnelles: un modèle, un wrapper public que les résumés du modèle, et un affichage qui représente l'interface utilisateur (UI) du modèle. Le modèle et la vue sont distinctes, mais l'emballage et le modèle sont étroitement liées. L'illustration suivante montre la relation entre les trois sous-unités.

L'environnement de conception utilise la ModelItem type de communiquer avec le modèle sous-jacent. Toutes les modifications sont apportées à la ModelItem emballages, qui affectent le modèle sous-jacent. Cela permet au modèle d'être simple. Le ModelItem wrappers poignée éléments de design complexe, comme le support des transactions, l'annulation de suivi et des notifications de changement.

Ci-dessous le diagramme de classes peut aider à expliquer les interactions entre les classes de base du modèle d'édition:

Utilisez ci-dessous XAML comme un exemple:

  <UserControl
     xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns: x = "http://schemas.microsoft.com/winfx/2006/xaml"
     Width ="640" Height ="480" > x: Class = "ModelTest.Page" width = "640" height = "480">
     x:Name ="LayoutRoot" Background ="White" > Grille <x: Name = "LayoutRoot" Background = "blanc">
         x:Name ="Button" > Button <x: Name = "Bouton">
             x:Name ="Rectangle" /> Rectangle <x: Name = "Rectangle» />
         > </ Button>
     > /> Grille <
 > /> UserControl < 

• ModelItem: supposons élément variable est la ModelItem pour le contrôle bouton ci-dessus,
  • Nom est sauvegardé comme attribut x: Name en XAML: item.Name = "Button" est persisté en XAML comme x: Name = "Button".
  • ItemType est l'objet Type de contrôle sous-jacent, et décide de l'étiquette utilisée en XAML: item.PropertyType == tyepof (Button), et la balise XAML est <Button />.
  • Propriétés de la collection de propriétés, enveloppé dans le type ModelProperty de la commande de base. Par exemple: [point "ClickMode"] = ClickMode.Release sera persisté en XAML comme ClickMode = "sortie".
  • Contenu représente la propriété de contenu définis dans ContentControl (et héritée par ses sous-classes): item.Content est le ModelItem représentant l'objet Rectangle.
  • Source: quand un ModelItem représente un élément qui est une propriété d'un autre élément, source est le wrapper ModelProperty de cette propriété. Par exemple, item.Content.Value.Source == item.Content / / le rectangle.
  • Événements représente la collecte des événements de contrôle sous-jacent, enveloppé dans le type ModelEvent. D'après mon expérience de débogage, il est toujours nulle, il semble donc bien événements n'est pas encore supporté par Blend3 pour Silverlight3 encore.
  • Parent est la mère de la logique de contrôle sous-jacent, enveloppé dans le type ModelItem. ex: Item.Parent est le ModelItem pour Grid.
  • Root est le wrapper ModelItem pour root visuelle, ex: item.Root représente le UserControl.
• ModelProperty: supposons que la proposition est la variable ModelProperty pour Button.Content, c.-à-prop = item.Content,
  • Nom est le nom de la propriété de contrôle sous-jacent. Il est persisté en XAML comme nom d'attribut. ex: prop.Name == "Contenu".
  • PropertyType est l'objet Type de la propriété de contrôle sous-jacent de cet objet ModelProperty représente. ex: prop.PropertyType = typeof (objet).
  • AttachedOwnerType est l'objet type de contrôle qui définit d'abord la propriété de cet objet ModelProperty représente. ex: prop.AttachedOwnerType == typeof (ContentControl) / / note: pas de boutons.
  • La valeur est la valeur de la propriété de contrôle sous-jacent, enveloppé dans le type ModelItem. ex: prop.Value est le ModelItem représentant l'objet Rectangle.
  • Parent est le contrôle, enveloppé dans le type ModelItem, dont la propriété appartient. : Prop.Parent == élément ex.
• ModelEvent: comme indiqué plus haut, item.Events est toujours nul, il ne semble pas que ModelEvent est pris en charge pour Blend3 Silverlight3 encore. Mais supposons qu'il fonctionne, et evt variable est la ModelEvent pour Button.Click, c'est à dire, evt = item.Events ["Cliquez sur"],
  • Nom est le nom de l'événement. ex: evt.Name == "Click".
  • EventType est le type du délégué d'événement, ex: evt.EventType == typeof (RoutedEventHandler).
  • Maîtres-chiens est la collecte de chaîne de gestionnaires d'événements, ex: evt.Handlers = new String [] ("Button_Click") sera sauvegardé comme Click = "Button_Click". Note: ce n'est que pure spéculation, car ModelEvent n'est pas encore supporté, et je ne sais pas si / quand / comment il sera pris en charge pour Silverlight.
  • Parent est le contrôle, enveloppé dans le type ModelItem, dont cet événement appartient. : Evt.Parent == élément ex.

Exécution

Le graphique par défaut d'initialisation de classe ChartDefaultInitializer est mis en œuvre ChartDefaultInitializer.cs, et enregistré dans ChartMetadata.cs. Les deux fichiers sont dans Controls.DataVisualization.Toolkit.Design.csproj de Silverlight.Controls.Design.sln. S'il vous plaît lire avant après le temps de conception d'entité de mise en œuvre dans Silverlight Toolkit pour plus d'informations.

Résultat XAML

Comme première étape, définir le résultat XAML pour être produite par ChartDefaultInitializer:

  Title ="Chart Title" > Tracer <: Titre du graphique "Titre du graphique =">
     > Tracer <:> Chart.DataContext
         > > PointCollection <
             X ="1" Y ="10" /> Point <X = "1" Y = "10" />
             X ="2" Y ="20" /> Point <X = "2" Y = "20" />
             X ="3" Y ="30" /> Point <X = "3" Y = "30" />
             X ="4" Y ="40" /> Point <X = "4" Y = "40" />
         > /> PointCollection <
         > Tracer <: Chart.Series>
             ItemsSource ="{Binding}" Tracer <: ColumnSeries ItemsSource = "(Binding)"
                 DependentValuePath = "X"
                 IndependentValuePath = "Y" />
         > </ Tracer: Chart.Series>
     > / Tracer: Chart.DataContext> <
 > </ Tracer:> Graphique 

Enregistrement

Fait en ChartMetadata.cs avec le code suivant:

  (ChartDefaultInitializer))); b.AddCustomAttributes (FeatureAttribute nouvelles (typeof (ChartDefaultInitializer))); 

Références

Voir ci-dessous capture d'écran:

Même si DefaultInitializer est défini dans la version 3.5 de Microsoft.Windows.Design.Interaction.dll (sous%% DevEnvDir PublicAssemblies \, c'est à dire C: \ Program Files \ Microsoft Visual Studio 9.0 \ Common7 \ IDE \ PublicAssemblies sur 32 bits de Windows), il est pas pris en charge par Blend2 ou Visual Studio 2008 pour Silverlight. Il est soutenu par Blend3 et Visual Studio 2010, mais tous deux passer à version plus récente de Microsoft.Windows.Design *. dll (3,7 pour Blend 3 Aperçu, 4,0 pour Blend 3 RTM et Visual Studio 2010), nous avons donc besoin de se lier à la nouvelle version de MWDs. S'il vous plaît voir avant post Comment écrire Silverlight moment du design pour tous les concepteurs: Visual Studio 2008, Blend 2, Blend 3 et Visual Studio 2010 pour plus d'informations.

S'il vous plaît également remarquer que la référence à System.Windows.dll Silverlight est un alias, et le PointCollection est spécifiquement appelé à être le Silverlight, pas de WPF. Depuis WPF Silverlight et de partager un grand nombre de classes dans les mêmes espaces de noms, il est important que les types de Silverlight, WPF pas, sont utilisés dans la création et ModelItem ModelProperty dans l 'initialisation par défaut des contrôles Silverlight.

Collections

S'il vous plaît note ci-dessous capture d'écran que si tous les autres biens de valeur peut être réglée via ModelProperty.SetValue:

Chart.Series est du type de collection (Collection <Series>), sa valeur doit être fixée par les premiers par la création d'un ModelItem ModelFactory.CreateItem pour la valeur, puis ajoutez le ModelItem créé par ModelProperty.Collection.Add. Sinon, même si le XAML correcte peut être généré, Blend ne seront pas actualisées pour rendre le contrôle de la carte correctement, vous devez recharger la page pour l'avoir rendu correctement.

ChartDefaultInitializer.cs

  / / (C) Copyright Microsoft Corporation.
 / / Cette source est soumis à la Microsoft Public License (Ms-PL).
 / / S'il vous plaît voir http://go.microsoft.com/fwlink/?LinkID=131993 pour plus de détails.
 / / Tous les autres droits réservés.

 extern alias Silverlight;
 utilisant System.Windows.Controls.DataVisualization.Charting;
 utilisant System.Windows.Controls.Design.Common;
 utilisant Microsoft.Windows.Design.Metadata;
 utilisant Microsoft.Windows.Design.Model;
 utilisant SSW = Silverlight:: System.Windows;
 utilisant SSWD = Silverlight:: System.Windows.Data;
 utilisant SSWM = Silverlight:: System.Windows.Media;

 namespace System.Windows.Controls.DataVisualization.Design
 (
     / / / <summary>
     / / / Initialisation par défaut pour le graphique.
     / / / / Summary> <
     classe interne ChartDefaultInitializer: DefaultInitializer
     (
         / / / <summary>
         / / / Définit les valeurs de propriété par défaut pour le graphique.
         / / / / Summary> <
         / / / Name="item"> Graphique ModelItem. </ Param> <param
         InitializeDefaults public override void (point ModelItem)
         (
             propertyName chaîne;

             / / Title"> Title="Chart <Charting:Chart
             propertyName = Extensions.GetMemberName <Chart> (x => x.Title);
             item.Properties [] propertyName. SetValue (Properties.Resources.ChartTitle);

             / / <Charting:Chart.DataContext>
             / / <PointCollection>
             / / <Point X="1" Y="10" />
             / / <Point X="2" Y="20" />
             / / <Point X="3" Y="30" />
             / / <Point X="4" Y="40" />
             / / /> PointCollection <
             / / </ Tracer: Chart.DataContext>

             SSWM:: defaultItemsSource PointCollection = SSWM nouvelles:: PointCollection ();
             i = 1; i <= 4; i++) for (int i = 1; i <= 4; i + +)
             (
                 defaultItemsSource.Add (SSW nouvelles:: Point (i, 10 * i));
             )

             propertyName = Extensions.GetMemberName <Chart> (x => x.DataContext);
             item.Properties [] propertyName. SetValue (defaultItemsSource);

             / / <Charting:Chart.Series>
             / / <Tracer: ColumnSeries ItemsSource = "(Binding)"
             / / DependentValuePath = "X"
             / / IndependentValuePath = "Y" />
             / / </ Tracer: Chart.Series>

             columnSeries ModelItem = ModelFactory.CreateItem (item.Context, typeof (ColumnSeries));
             propertyName = Extensions.GetMemberName <ColumnSeries> (x => x.ItemsSource);
             columnSeries.Properties [] propertyName. (ModelFactory.CreateItem (columnSeries.Context SetValue, typeof (SSWD:: reliure)));
             propertyName = Extensions.GetMemberName <ColumnSeries> (x => x.DependentValuePath);
             columnSeries.Properties [] propertyName. SetValue ("X");
             propertyName = Extensions.GetMemberName <ColumnSeries> (x => x.IndependentValuePath);
             columnSeries.Properties [] propertyName. SetValue ("Y");

             propertyName = Extensions.GetMemberName <Chart> (x => x.Series);
             item.Properties [] propertyName. Collection.add (columnSeries);
         )
     )
 )