Ning Zhang's Blog

Einführung

Dies ist Teil der Serie über Design-Zeit-Funktion Umsetzung in Silverlight Toolkit . Dieser Beitrag verwendet die Standard Chart Initialisierung zu veranschaulichen, wie die Standard-Initialisierung für Silverlight-Steuerelemente implementieren, und erläutern die zugrunde liegenden Modells Bearbeitung Architektur.

Erfahrung

Wenn Sie installieren Silverlight 3 Toolkit im März 2009 Release , können Sie ziehen Sie die Chart-Steuerelement aus Blend Asset Library and Drop "auf Designer-Oberfläche, und Sie haben eine Tabelle initialisiert und hübsch gemacht:

Sie können mehr darüber in vorherigen post Silverlight Toolkit Design Time Features: März 2009 Release Update .

Architektur

DefaultInitializer

Es ist eigentlich ganz einfach auf einen Standard-Initialisierung für ein Silverlight-Steuerelement bieten:

• implementieren eine Unterklasse von DefaultInitializer , und überschreiben ihre InitializeDefaults Funktion
• Mitarbeiter der Standard-Klasse mit Initialisierung der Control-Klasse über eine FeatureAttribute

Unten Screenshot zeigt die Umsetzung der DefaultInitializer abstrakte Basisklasse, und andere Klassen im Namespace Microsoft.Windows.Design.Model dass kurz erörtert werden:

Die Initialisierung ist in InitializeDefaults getan, und überschreiben Ergebnis wird in XAML serialisiert. Also der erste Schritt bei der Umsetzung einer Standard-Initialisierung ist die gewünschte XAML zu definieren, hergestellt werden.

Bearbeiten von Model

Sobald das Ergebnis XAML definiert ist, wünsche ich, daß es eine höhere Abstraktion / Methode, die nur nehmen würde das XAML. Aber leider haben wir, wie mit einem viel niedrigeren Niveau (und damit flexibler und leistungsfähiger) Imperativ API namens Bearbeitung Modell besteht aus Klassen, die ModelItem , ModelProperty , ModelEvent , ModelFactory und ModelService . Die MSDN-Seite bearbeiten Model Architecture bietet einen grundlegenden Überblick:

Ihr Design-time Umsetzung interagiert mit Laufzeit-Kontrollen aber eine Programmierschnittstelle namens Editing-Modell. Die Objekte, die ausgelegt sind als bearbeitbare Objekte.

Ihre Kontrollen sind in Extensible Application Markup Language (XAML) definiert. Sie aktualisieren die XAML für Ihre Steuerelemente programmgesteuert mithilfe der Bearbeitung Modell.

Model, Wrapper und Profil

Die Redaktion besteht aus drei funktionellen Untereinheiten: ein Model, ein Wrapper, der Öffentlichkeit das Modell abstrahiert, und ein Blick, dass die Benutzeroberfläche (UI) des Modells darstellt. Das Modell und der Ansicht sind, trennen, aber die Verpackung und das Modell sind eng miteinander verbunden. Die folgende Abbildung zeigt die Beziehung zwischen den drei Untereinheiten.

Die Design-Umgebung nutzt die ModelItem Typ, Modell kommunizieren mit dem Basiswert. Alle Änderungen werden vorgenommen, um die ModelItem Wrapper, welches Modell den Basiswert beeinflussen. Dies ermöglicht das Modell einfach zu sein. Die ModelItem Wrapper Umgang mit komplexen Designer Funktionen wie Transaktionen unterstützen, Undo-Tracking und Änderungsbenachrichtigungen.

Unten Klassendiagramm kann erklären helfen, Interaktionen zwischen Kern-Klassen der Bearbeitung Modell:

Verwenden Sie unter XAML als Beispiel:

  <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" > <Grid x: Name = "LayoutRoot" background = "White">
         x:Name ="Button" > <Button x: Name = "Button">
             x:Name ="Rectangle" /> <Rectangle x: Name = "Rectangle" />
         > </ Button>
     > </ Grid>
 > </ UserControl> 

• ModelItem annehmen: variable Element ist die ModelItem für das Button-Steuerelement oben
  • Name wird beibehalten, wie x: Name-Attribut in XAML: item.Name = "Button" ist beharrte in XAML als x: Name = "Button".
  • ItemType ist der Type-Objekt der zugrunde liegenden Kontrolle, und beschließt den Tag in XAML verwendet item.PropertyType: == tyepof (Button), und der Tag ist XAML <BUTTON />.
  • Eigenschaften ist die Sammlung von Eigenschaften, eingehüllt in ModelProperty Typ, der zugrunde liegenden Kontrolle. Zum Beispiel: item ["ClickMode"] = ClickMode.Release wird in XAML beibehalten werden, wie ClickMode = "Release".
  • Content stellt die Content-Eigenschaft ContentControl definiert in (und durch ihre Unterklassen geerbt): item.Content ist die Vertretung der ModelItem Rectangle-Objekt.
  • Quelle: wenn ein ModelItem ein Element, das eine Eigenschaft eines anderen Elements darstellt, ist die Quelle ModelProperty Wrapper dieser Eigenschaft. Zum Beispiel, item.Content.Value.Source == item.Content / / das Rechteck.
  • Events stellt die Sammlung von der zugrunde liegenden Ereignisse steuern, eingehüllt in ModelEvent Typ. Aus meiner Erfahrung Debugging, es ist immer null, so scheint es, Events Anwesen ist noch nicht durch Blend3 für Silverlight3 noch nicht unterstützt.
  • Parent ist die Muttergesellschaft der Logik der zugrunde liegenden Kontrolle, in ModelItem Art verpackt. ex: item.Parent ist die ModelItem für Grid.
  • Root ist die Wurzel ModelItem Wrapper für visuelle, ex: item.Root die UserControl darstellt.
• ModelProperty annehmen: variable Vorschlags ist die ModelProperty für Button.Content, dh prop = item.Content,
  • Name ist der Name der Eigenschaft des zugrunde liegenden Kontrolle. Es ist beharrte in XAML als Attribut name. ex: prop.Name == "Inhalt".
  • PropertyType ist der Type-Objekt der Eigenschaft des zugrunde liegenden Kontrolle dieser ModelProperty Objekt darstellt. ex: prop.PropertyType = typeof (Objekt).
  • AttachedOwnerType ist der Type-Objekt der Kontrolle, die zunächst definiert, das Eigentum dieser ModelProperty Objekt darstellt. ex: prop.AttachedOwnerType == typeof (ContentControl) / / Hinweis: Button nicht.
  • Value ist der Wert der Eigenschaft des zugrunde liegenden Kontrolle, in ModelItem Art verpackt. ex: prop.Value ist die Vertretung der ModelItem Rectangle-Objekt.
  • Parent ist die Kontrolle, eingehüllt in ModelItem Typs, von denen das Eigentum gehört. ex: prop.Parent == Element.
• ModelEvent: wie oben erwähnt, ist item.Events immer null, so scheint es nicht, dass ModelEvent ist in Blend3 für Silverlight3 noch nicht unterstützt. Aber davon ausgehen dass es funktioniert, und variabel ist der EVT ModelEvent für Button.Click, dh EVT = item.Events ["Click"],
  • Name ist der Name der Veranstaltung. ex: evt.Name == "Click".
  • EventType ist die Art des Ereignisses zu delegieren, ex: evt.EventType == typeof (RoutedEventHandler).
  • Handler ist der String Sammlung von Event-Handler, ex: evt.Handlers = new String [] ("button_click") wird beibehalten wie Click = "button_click". Hinweis: Dies ist reine Spekulation, da ModelEvent wird noch nicht unterstützt, und ich weiß nicht, ob / wann / wie es für Silverlight unterstützt werden.
  • Parent ist die Kontrolle, eingehüllt in ModelItem Typs, von denen dieser Veranstaltung gehört. ex: evt.Parent == Element.

Durchführung

Der Chart Standard Initialisierung Klasse ChartDefaultInitializer ist in ChartDefaultInitializer.cs umgesetzt, und die Eintragung in ChartMetadata.cs. Beide Dateien befinden sich in der Controls.DataVisualization.Toolkit.Design.csproj Silverlight.Controls.Design.sln. Bitte lesen Sie vor post Design Time Feature-Implementierung in Silverlight Toolkit für weitere Informationen.

Ergebnis XAML

Als ersten Schritt definieren Sie das Ergebnis produziert von XAML ChartDefaultInitializer zu sein:

  Title ="Chart Title" > <Charting: Chart Title = "Chart-Titel">
     > <Charting: Chart.DataContext>
         > <PointCollection>
             X ="1" Y ="10" /> <Punkt 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>
         > <Charting: Chart.Series>
             ItemsSource ="{Binding}" <Charting: ColumnSeries ItemsSource = "(Binding)"
                 DependentValuePath = "X"
                 IndependentValuePath = "Y" />
         > </ Charting: Chart.Series>
     > </ Charting: Chart.DataContext>
 > </ Chart: Chart> 

Registrierung

Geschehen in ChartMetadata.cs mit folgenden Code ein:

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

Referenzen

Siehe unten Screenshot:

Obwohl DefaultInitializer in Version 3.5 von Microsoft.Windows.Design.Interaction.dll definiert ist (unter% devenvdir% \ PublicAssemblies, zB C: \ Program Files \ Microsoft Visual Studio 9.0 \ Common7 \ IDE \ PublicAssemblies auf 32bit Windows), ist es nicht durch Blend2 oder Visual Studio 2008 für Silverlight unterstützt. Es wird von Blend3 und Visual Studio 2010, aber beide Schalter auf neuere Version von Microsoft.Windows.Design *. dll (3,7 für Blend 3 Preview, 4.0 für Blend 3 RTM und Visual Studio 2010), so müssen wir gegen Link unterstützt die neuere Version von MWDs. Bitte lesen Sie vor post How to Write Silverlight Design-Time für alle Designer: Visual Studio 2008, Blend 2; Blend 3 und Visual Studio 2010 für weitere Informationen.

Bitte beachten Sie auch, dass die Bezugnahme auf Silverlight System.Windows.dll aliased ist, und die PointCollection ist speziell aus dem Silverlight einen, nicht WPF's genannt werden. Da WPF-und Silverlight-teilen eine Menge von Klassen im gleichen Namespaces, ist es wichtig, dass Silverlight Typen, nicht WPF ist, sind Kontrollen verwendet bei der Schaffung und ModelItem ModelProperty in Verzug Initialisierung für Silverlight.

Collections

Bitte beachten Sie, dass Sie sich unten ein Screenshot, während alle anderen Eigenschaft Wert kann über ModelProperty.SetValue eingestellt werden:

Chart.Series ist der Typ Sammlung (Collection <Series>), so hat ihren Wert, indem Sie erst die Schaffung eines ModelItem via ModelFactory.CreateItem für den Wert, und fügen Sie dann eingestellt werden die erstellten ModelItem via ModelProperty.Collection.Add. Ansonsten, auch wenn die richtige XAML generiert werden kann, Blend wird nicht aktualisieren, um die Chart-Steuerelement korrekt darzustellen, müssen Sie die Seite neu zu laden, um es korrekt gerendert.

ChartDefaultInitializer.cs

  / / (C) Copyright Microsoft Corporation.
 / / Diese Quelle ist unter der Microsoft Public License (Ms-PL).
 / / Bitte beachten Sie http://go.microsoft.com/fwlink/?LinkID=131993 für Details.
 / / Alle anderen Rechte vorbehalten.

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

 Namespaces System.Windows.Controls.DataVisualization.Design
 (
     / / / <summary>
     / / / Default-Initialisierung für Diagramm.
     / / / </ Summary>
     interne Klasse ChartDefaultInitializer: DefaultInitializer
     (
         / / / <summary>
         / / / Legt die Standard-Werte für die Eigenschaft Diagramm.
         / / / </ Summary>
         / / / <param Name="item"> Chart ModelItem. </ P>
         public override void InitializeDefaults (ModelItem item)
         (
             string propertyName;

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

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

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

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

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

             ModelItem columnSeries = ModelFactory.CreateItem (item.Context, typeof (ColumnSeries));
             propertyName = Extensions.GetMemberName <ColumnSeries> (x => x.ItemsSource);
             columnSeries.Properties [propertyName]. SetValue (ModelFactory.CreateItem (columnSeries.Context, typeof (SSWD: Binding)));
             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);
         )
     )
 )