Blog Ning Zhang

Introducción

Esto es parte de la serie sobre la aplicación en tiempo de diseño en función de Silverlight Toolkit . Este mensaje se utiliza el inicializador por defecto para gráficos para ilustrar cómo implementar inicializador por defecto para los controles de Silverlight, y explicar la arquitectura de la edición del modelo subyacente.

Experiencia

Si se instala kit de herramientas de Silverlight 3 de marzo 2009 de lanzamiento , puede arrastrar el control gráfico de la Biblioteca de mezcla de activos y colóquelo en la superficie de diseño, y tiene una carta muy bien inicializado y prestados:

Puedes leer más sobre esto en anteriores mensaje Características Silverlight Toolkit Tiempo de diseño: marzo de 2009 de actualización de los .

Arquitectura

DefaultInitializer

En realidad es bastante simple para proporcionar un inicializador por defecto de un control de Silverlight:

• implementar una subclase de DefaultInitializer , y reemplazar su InitializeDefaults función
• relacionar los tipos de inicializador por defecto con la clase de control a través de un FeatureAttribute

Por debajo de captura de pantalla muestra la aplicación de la clase base abstracta DefaultInitializer, y otras clases del espacio de nombres Microsoft.Windows.Design.Model que se discutirán en breve:

Inicialización se hace en anular InitializeDefaults, y el resultado se serializa en XAML. Entonces el primer paso en la implementación de un inicializador por defecto es definir el deseado xaml que se producirá.

Edición de Modelo

Una vez que el resultado de XAML se define, me gustaría que es un método de alto nivel de abstracción / que acaba de tomar el XAML. Pero, por desgracia, tenemos que usar un nivel mucho más bajo (por lo tanto más flexible y potente) API imperativo llamado de edición de modelo que se compone de clases como ModelItem , ModelProperty , ModelEvent , ModelFactory y ModelService . La página de MSDN Edición de Modelo de Arquitectura ofrece una visión general básica:

El diseño de su implementación en tiempo interactúa con los controles en tiempo de ejecución a través de una interfaz de programación llamado el modelo de edición. Los objetos se están diseñando son llamados objetos editables.

Los controles se definen en Extensible Application Markup Language (XAML). Actualizar el XAML para los controles mediante programación utilizando el modelo de edición.

Modelo, Wrapper y Vista

El modelo de edición consta de tres subunidades funcionales: un modelo, un contenedor público que abstrae el modelo, y una vista que representa la interfaz de usuario (UI) de la modelo. El modelo y la vista son diferentes, pero el envoltorio y el modelo están estrechamente relacionados. La siguiente ilustración muestra la relación entre las tres subunidades.

El entorno de diseño utiliza el ModelItem tipo de comunicarse con el modelo subyacente. Todos los cambios se hacen a la ModelItem envoltorios, que afectan al modelo subyacente. Esto permite que el modelo sea simple. El ModelItem envoltorios de manejar las complejas características de diseño, tales como soporte de transacciones, deshacer el seguimiento y notificación de cambios.

A continuación el diagrama de clase puede ayudar a explicar las interacciones entre las clases fundamentales del modelo de edición:

Temperaturas inferiores a xaml como un ejemplo:

  <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" > <Red x: Name = "LayoutRoot" Background = "White">
         x:Name ="Button" > <Botón x: Name = "Button">
             x:Name ="Rectangle" /> <Rectángulo x: Name = "Rectángulo" />
         > </ Button>
     > </ Grid>
 > </ UserControl> 

• ModelItem: asumir elemento variable es el ModelItem para el control de botón de arriba,
  • Nombre se conserva como atributo x: Name en XAML: item.Name = "Button" se conserva en XAML como x: Name = "Button".
  • ItemType es el objeto Type del control subyacente, y decide la etiqueta utilizada en xaml: item.PropertyType == tyepof (Button), y la etiqueta de XAML es <Button />.
  • Propiedades es la colección de propiedades, envuelto en el tipo de ModelProperty, del control subyacente. Por ejemplo: partida ["ClickMode"] = ClickMode.Release se conservará en XAML como ClickMode = "Release".
  • Contenido representa la propiedad de contenido definidos en ContentControl (y heredado por sus subclases): item.Content es el ModelItem que representa el objeto rectángulo.
  • Fuente: cuando un ModelItem representa un elemento que es una propiedad de otro elemento, de origen es el envoltorio ModelProperty de esa propiedad. Por ejemplo, item.Content.Value.Source == item.Content / / el rectángulo.
  • Eventos representa la colección de eventos del control subyacente, envuelto en el tipo de ModelEvent. Desde mi experiencia de depuración, siempre es nula, por lo que parece propiedad Events todavía no es posible por Blend3 para Silverlight3 todavía.
  • Padre es el padre de la lógica del control subyacente, envuelto en el tipo de ModelItem. por ejemplo: item.Parent es el ModelItem de Grid.
  • La raíz es la envoltura de la raíz ModelItem visual, por ejemplo: item.Root representa el control de usuario.
• ModelProperty: asumir apuntalar la variable es el ModelProperty para Button.Content, es decir, sostener item.Content =,
  • Nombre es el nombre de la propiedad del control subyacente. Que se conserva en XAML como el nombre del atributo. por ejemplo: prop.Name == "Contenido".
  • PropertyType es el objeto Type de la propiedad del control subyace a este objeto ModelProperty representa. por ejemplo: prop.PropertyType = typeof (objeto).
  • AttachedOwnerType es el objeto de tipo del control que primero define la propiedad de este objeto ModelProperty representa. por ejemplo: prop.AttachedOwnerType == typeof (ContentControl) / / Nota: No Button.
  • Valor es el valor de la propiedad del control subyacente, envuelto en el tipo de ModelItem. por ejemplo: prop.Value es el ModelItem que representa el objeto rectángulo.
  • Los padres es el control, envuelto en el tipo de ModelItem, de los que la propiedad pertenece. por ejemplo: == prop.Parent tema.
• ModelEvent: como se mencionó anteriormente, item.Events siempre es nulo, por lo que no parece que se apoya en ModelEvent Blend3 para Silverlight3 todavía. Pero supongamos que funciona, y evt variable es el ModelEvent para Button.Click, es decir, evt = item.Events ["Click"],
  • Nombre es el nombre del evento. por ejemplo: evt.Name == "Click".
  • EventType es el tipo de delegado del evento, por ejemplo: evt.EventType == typeof (RoutedEventHandler).
  • Manipuladores es la colección de cadenas de controladores de eventos, por ejemplo: evt.Handlers = new String [] {"Button_Click"} se conservará como Click = "Button_Click". Nota: esto es pura especulación, ya que ModelEvent todavía no es posible, y yo no sé si / cuándo / cómo va a ser compatible con Silverlight.
  • Los padres es el control, envuelto en el tipo de ModelItem, de los cuales este evento pertenece. por ejemplo: == evt.Parent tema.

Implementación

El valor predeterminado Gráfico ChartDefaultInitializer inicializador de clase se lleva a cabo en ChartDefaultInitializer.cs, e inscrita en ChartMetadata.cs. Ambos archivos se encuentran en Controls.DataVisualization.Toolkit.Design.csproj de Silverlight.Controls.Design.sln. Por favor, lea antes de publicar el tiempo de ejecución de funciones de diseño de Silverlight Toolkit para más información.

Resultados XAML

Como primer paso, definir el resultado xaml que se produce por ChartDefaultInitializer:

  Title ="Chart Title" > <Gráficos: Título del gráfico = "Título del gráfico">
     > <Gráficos: Chart.DataContext>
         > <PointCollection>
             X ="1" Y ="10" /> <El punto X = "1" Y = "10" />
             X ="2" Y ="20" /> <El punto X = "2" Y = "20" />
             X ="3" Y ="30" /> <El punto X = "3" Y = "30" />
             X ="4" Y ="40" /> <El punto X = "4" Y = "40" />
         > </ PointCollection>
         > <Gráficos: Chart.Series>
             ItemsSource ="{Binding}" <Gráficos: ColumnSeries ItemsSource = "{Binding}"
                 DependentValuePath = "X"
                 IndependentValuePath = "Y" />
         > </ Gráficos: Chart.Series>
     > </ Gráficos: Chart.DataContext>
 > </ Gráficos: Gráfico> 

Registro

Hecho en ChartMetadata.cs con el código siguiente:

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

Referencias

Ver más abajo de pantalla:

A pesar de que DefaultInitializer se define en la versión 3.5 de Microsoft.Windows.Design.Interaction.dll (en%% DevEnvDir \ PublicAssemblies, es decir, c: \ Archivos de programa \ Microsoft Visual Studio 9.0 \ Common7 \ IDE \ PublicAssemblies de 32 bits de Windows), es no es compatible con Blend2 o Visual Studio 2008 para Silverlight. Es apoyado por Blend3 y Visual Studio 2010, pero tanto cambiar a una versión más nueva de Microsoft.Windows.Design *. dll (3,7 por Blend 3 Preview, 4,0 por Blend 3 y RTM de Visual Studio 2010), así que tenemos que enlazar con la versión más reciente de MWD. Consulte antes de publicar Cómo escribir Tiempo Silverlight Diseño para todos los diseñadores: Visual Studio 2008, Blend 2, Blend 3, y Visual Studio 2010 para más información.

Tenga también en cuenta que la referencia a System.Windows.dll Silverlight es un alias, y la PointCollection está especialmente llamado a ser el Silverlight uno, no de WPF. Como la cuota de WPF y Silverlight un montón de clases en espacios de nombre mismo, es importante que los tipos de Silverlight, WPF no, se utilizan en la creación de ModelItem y ModelProperty en inicializador por defecto para los controles de Silverlight.

Colecciones

Por favor, tenga en cuenta en la siguiente captura de pantalla y que mientras todas las otras propiedades de valor se puede configurar a través de ModelProperty.SetValue:

Chart.Series es del tipo de colección (<series> Collection), por lo que su valor se debe establecer en primer lugar a través de la creación de un ModelItem ModelFactory.CreateItem para el valor, y luego agregar el ModelItem creado a través de ModelProperty.Collection.Add. De lo contrario, a pesar de la correcta xaml se pueden generar, mezcla no se actualiza para hacer el control Chart correctamente, tienes que recargar la página para que se procesa de forma correcta.

ChartDefaultInitializer.cs

  / / (C) Copyright Microsoft Corporation.
 / / Esta fuente está sujeto a la licencia pública de Microsoft (Ms-PL).
 / / Por favor, vea http://go.microsoft.com/fwlink/?LinkID=131993 para más detalles.
 / / Todos los demás derechos reservados.

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

 espacio de nombres System.Windows.Controls.DataVisualization.Design
 {
     / / / <summary>
     / / Default / inicializador para la tabla.
     / / / </ Summary>
     ChartDefaultInitializer de clases interna: DefaultInitializer
     {
         / / / <summary>
         / / / Establece el valor de las propiedades por defecto para la tabla.
         / / / </ Summary>
         / / / <param Name="item"> ModelItem gráfico. </ Param>
         pública InitializeDefaults override void (elemento ModelItem)
         {
             propertyName cadena;

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

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

             SSWM:: PointCollection defaultItemsSource = new SSWM:: PointCollection ();
             i = 1; i <= 4; i++) for (int i = 1; i <= 4; i + +)
             {
                 defaultItemsSource.Add (nuevo SSW:: Punto (i, 10 * i));
             }

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

             / / <Charting:Chart.Series>
             / / <Gráficos: ColumnSeries ItemsSource = "{Binding}"
             / / DependentValuePath = "X"
             / / IndependentValuePath = "Y" />
             / / </ Gráficos: Chart.Series>

             ColumnSeries ModelItem = ModelFactory.CreateItem (item.Context, typeof (ColumnSeries));
             propertyName = Extensions.GetMemberName <ColumnSeries> (x => x.ItemsSource);
            
             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).;
         }
     }
 }