アーカイブ

5月のアーカイブ2009年

Silverlightのコントロールのモデルとデフォルト初期化子を編集

11日、2009年05月 4コメント

はじめに

これでデザイン時の機能の実装上のシリーズの一部であるSilverlightのツールキット 。 この記事は、Silverlightコントロールの既定の初期化を実装し、基本的な編集モデルのアーキテクチャを説明する方法を説明するために、チャートのデフォルト初期化子を使用しています。

経験

あなたがインストールした場合、 Silverlight 3のツールキットをで2009年3月リリースには、ブレンドアセットライブラリからChartコントロールをドラッグしてデザイナにドロップし、あなたはうまく初期化され、レンダリングされたグラフを持つことができます。

Chart default initializer

あなたが前の記事でそれについての詳細を読むことができSilverlight Toolkitのデザイン時機能：2009年3月リリース更新 。

アーキテクチャ

DefaultInitializer

それは、Silverlightコントロールの既定の初期化を提供するために、実際にはかなり単純です。

以下のスクリーンショットは、DefaultInitializer抽象基底クラス、まもなく議論されるMicrosoft.Windows.Design.Model名前空間内の他のクラスの実装を示しています。

DefaultInitializer

初期化はInitializeDefaultsのオーバーライドで行われ、その結果は、XAMLにシリアライズされます。 ので、デフォルトの初期化を実装する最初のステップは、生成されることが望ましいXAMLを定義することです。

モデルの編集

結果は、XAMLが定義されれば、私は、XAMLを取ると、より高いレベルの抽象化/メソッドが存在したいと思います。 しかし、残念ながら我々のようなクラスで構成されたモデルの編集と呼ばれる非常に低いレベル（したがって、より柔軟で強力な）必須のAPIを使用する必要がありModelItemを 、 ModelProperty 、 ModelEvent 、 ModelFactoryとModelServiceを 。 MSDNのページを編集モデルのアーキテクチャは、基本的な概要を示します。

設計時の実装では、編集モデルと呼ばれるプログラミングインターフェースしかし、実行時のコントロールと対話します。 設計されているオブジェクトが編集可能なオブジェクトと呼ばれています。

あなたのコントロールは、拡張可能アプリケーションマークアップ言語（XAML）で定義されています。 あなたは、プログラム編集モデルを使用して、コントロールのXAMLを更新します。

モデル、ラッパー、およびビュー

モデル、モデルを抽象化するパブリックラッパー、およびモデルのユーザーインターフェイス（UI）を表すビュー：編集モデルは、3つの機能ユニットで構成されています。 モデルとビューは別ですが、ラッパーとモデルが密接に関連しています。 次の図は、3つのサブユニット間の関係を示します。

モデル、ModelItemを、とビューの関係

設計環境は、使用ModelItemを基礎となるモデルと通信するタイプ。 すべての変更がに行われModelItemをの基礎となるモデルに影響を与えるラッパー。 このモデルはシンプルにすることができます。 ModelItemをのラッパーは、そのようなトランザクションのサポートなどの複雑なデザイナ機能を処理追跡元に戻すと、変更通知。

クラス図の下に編集モデルのコアクラスの間の相互作用を説明するのを助ける可能性があります。

Editing Model Class Diagram

例として、XAMLの下に使用します。 

  •   ModelItemを：変数項目は、上記の ButtonコントロールのModelItemをであると仮定し、 
    •   XAMLでName属性：名前は xとして永続化されitem.Name = "ボタンが" XとしてXAML内で永続化されています。名= "ボタン"を参照してください 。 
    •  ItemTypeは、基礎となるコントロールのTypeオブジェクトであり、XAMLで使用するタグを決定する：item.PropertyType == tyepof（ボタン）、およびXAMLタグは<Button />です。 
    •  プロパティは、基になるコントロールのModelProperty型でラップされたプロパティの集合です。 たとえば、次の項目["ClickMode"] = ClickMode.ReleaseはClickMode = "リリース"のようにXAMLで永続化されます。 
    •  コンテンツはContentControl（およびそのサブクラスによって継承さ）で定義されているContentプロパティを表します。item.Contentは、Rectangleオブジェクトを表すModelItemをです。 
    •  ソース：ModelItemを別の要素のプロパティの要素を表す場合、ソースは、そのプロパティのModelPropertyラッパーです。 たとえば、item.Content.Value.Source == item.Content / /長方形 。 
    •  イベントはModelEventタイプに包まれた基本的なコントロールのイベントのコレクションを表します。 私のデバッグの経験から、それは常にnullですので、イベントのプロパティがまだまだSilverlight3のためBlend3によってサポートされていないようです。 
    •  親は、ModelItem型に包まれた、基になるコントロールのロジックの親です。 例：item.Parentは、グリッドのModelItemをです。 
    •  ルートは、ルートビジュアル、EXのModelItemをラッパーです。item.Rootは、UserControlを表しています。 
  •   ModelProperty：変数propが Button.Content、すなわちプロペラ= item.ContentためのModelPropertyであると仮定し、 
    •  名前は、基礎となるコントロールのプロパティの名前です。 これは、属性名としてXAMLに保存されます。 例：prop.Name == "コンテンツ"といいます 。 
    •   PropertyTypeは、このModelPropertyオブジェクトが表す基になるコントロールのプロパティの型オブジェクトです。 例：prop.PropertyType = typeof演算（オブジェクト）。 
    •   AttachedOwnerTypeは、最初にこのModelPropertyオブジェクトが表すプロパティを定義するコントロールのTypeオブジェクトです。 例：prop.AttachedOwnerType == typeof演算（ContentControlを）/ /注：いないボタン。 
    •  値は、ModelItem型でラップされた基になるコントロールのプロパティの値です。 例：prop.Valueは、Rectangleオブジェクトを表すModelItemをです。 
    •  親は、プロパティが属するのModelItemを型に包まれたコントロールです。 例：prop.Parent ==アイテム 。 
  •   ModelEvent：前述したように、item.Eventsは常にnullになりますので、そのModelEventがまだSilverlight3のためBlend3でサポートされていないようです。 しかし、それが動作すると仮定し、変数EVTは、Button.Clickの、IEのModelEventは、EVT = item.Events ["をクリックして"]、 
    •  名前は、イベントの名前です。 例：evt.Name == "をクリックしてください。" 
    •   EventTypeは、イベントデリゲートの型であり、例：evt.EventType == typeof演算（RoutedEventHandler）。 
    •  ハンドラはイベントハンドラの文字列のコレクションである、例：evt.Handlers =新しい文字列[] {"Button_Clickが"}をクリックして= "Button_Click"として永続化される。 注：ModelEventはまだサポートされていませんので、これは、純粋な憶測であり、私はかどうか/時/それは、Silverlightでサポートされるか分からない。 
    •  親は、このイベントが属しているのModelItemを型に包まれたコントロールです。 例：evt.Parent ==アイテム 。 
 インプリメンテーション 
 チャートのデフォルト初期化子のクラスChartDefaultInitializerはChartDefaultInitializer.csに実装され、ChartMetadata.csに登録されています。 両方のファイルはSilverlight.Controls.Design.slnのControls.DataVisualization.Toolkit.Design.csprojである。 前の記事をお読みくださいシルバーToolkitのデザイン時の機能の実装詳細については、します。 
 結果XAML 
 最初のステップとして、ChartDefaultInitializerによって生成される結果、XAMLを定義します。 
 Title ="Chart < グラフ：グラフの タイトル = "チャート 
 登録 
 次のコードでChartMetadata.csで行わ： 
  (ChartDefaultInitializer))); b.AddCustomAttributes（ 新しいFeatureAttribute（typeof演算 （ChartDefaultInitializer）））; 
 参照 
 下のスクリーンショットを参照してください。 
 References 
  DefaultInitializerがMicrosoft.Windows.Design.Interaction.dllのバージョン3.5で定義されているにもかかわらず（％のdevenvdir％の下の\ PublicAssemblies、すなわちC：32ビットWindows上の\プログラムファイル\のMicrosoft Visual Studio 9.0 \ Common7 \ IDEに\ PublicAssemblies）、それは、 Blend2またはSilverlightのVisual Studio 2008でサポートされていません。 それはBlend3とVisual Studio 2010でサポートされているが、Microsoft.Windows.Design *。DLL（Blend 3のプレビューのために3.7、Blend 3のRTMおよびVisual Studio 2010の4.0）の新しいバージョンには、スイッチの両方されているので、我々は、とリンクする必要があるMWDsの新しいバージョン。 前のポストを参照してください。ブレンド3、およびVisual Studio 2010 Visual Studio 2008で、ブレンド2：すべてのデザイナーのために、Silverlightのデザインタイムを書く方法を参照してください。 
 また、SilverlightのSystem.Windows.dllへの参照がエイリアスされており、PointCollectionは、特にSilverlightの1ではなく、WPFのであることが判明と呼ばれることに注意してください。  WPFとSilverlightを共有し、同じ名前空間内のクラスのたくさんあるので、 それは、Silverlightの種類ではなく、WPFのは、Silverlightコントロールのデフォルトの初期化子でModelItemをとModelPropertyの作成 ​​に使用されることが重要である 。 
 コレクション 
 他のすべてのプロパティ値がModelProperty.SetValueを介して設定することができますが、その下のスクリーンショットに注意してください。 
ChartDefaultInitializer 
  Chart.Seriesは、コレクション型（コレクション<Series>）であるので、その値は最初の値ModelFactory.CreateItem経由ModelItemを作成し、ModelProperty.Collection.Add経由して作成されたModelItemを追加することによって設定する必要があります。 それ以外の場合は、適切なXAMLが生成されるかもしれませんが、ブレンドが正常にChartコントロールをレンダリングするために更新されません、あなたはそれが正しくレンダリングされているためにページをリロードする必要があります。 
  ChartDefaultInitializer.cs 
 alias / /（C）著作権Microsoft Corporationの。/ /このソースは、Microsoftパブリックライセンス（Ms-PL）の対象となります。/ /詳細については、http://go.microsoft.com/fwlink/?LinkID=131993を参照してください。/ /他のすべての内容は著作権を有します。externエイリアス  SSWM = Silverlight::System.Windows.Media; namespace System.Windows.Controls.DataVisualization.Design { /// <summary> /// Default initializer for chart. /// </summary> internal class ChartDefaultInitializer : DefaultInitializer { /// <summary> /// Sets the default property values for chart. /// </summary> /// <param name="item">Chart ModelItem.</param> 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> // <Point X="1" Y="10" /> // <Point X="2" Y="20" /> // <Point X="3" Y="30" /> // <Point X="4" Y="40" /> // </PointCollection> // </Charting:Chart.DataContext> SSWM::PointCollection defaultItemsSource = new SSWM::PointCollection(); for ( int i = 1; i <= 4; i++) { defaultItemsSource.Add( new 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); =シルバー:: System.Windows名前。SSWD =シルバー:: System.Windows.Dataを使用して、 名前空間 System.Windows.Controls.DataVisualization.Design {/ / / <summary> /; SSWM =シルバー:: System.Windows.Media名前を使用して、 チャートの/ /デフォルトの初期化/ / / </概要> 内部クラス ChartDefaultInitializer：DefaultInitializer {/ / / <summary> / / /セットのグラフのデフォルトのプロパティ値/ / / </概要> / / / <パラメータ名を指定します。 = "項目">チャートModelItemを</ PARAM> 公共オーバーライドボイド InitializeDefaults（ModelItemを項目）{ 文字列 propertyNameは、。/ / <Charting:Chart Title="Chart Title"> propertyNameの= Extensions.GetMemberName <Chart>（X => X 。タイトル）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> / / </チャート：Chart.DataContext> SSWM :: PointCollection defaultItemsSource = 新しい SSWM :: PointCollection（）; するfor（int i = 1; I <= 4は、i + +）{defaultItemsSource.Add（ 新 SSW： ：点（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" /> / / </チャート：Chart.Series> ModelItemをColumnSeriesが= ModelFactory.CreateItem（item.Context、 typeof演算 （ColumnSeriesが））; propertyNameの= Extensions.GetMemberName <ColumnSeries>（X => x.ItemsSource）;  ); propertyName = Extensions.GetMemberName<Chart>(x => x.Series); item.Properties[propertyName].Collection.Add(columnSeries); } } } propertyNameは= Extensions.GetMemberName <ColumnSeries>（X => x.DependentValuePath）columnSeries.Properties [propertyNameの] SetValueメソッド（ "X"）;。propertyNameの= Extensions.GetMemberName <ColumnSeries>（X => x.IndependentValuePath）ColumnSeriesが。 [プロパティ] [propertyNameの] SetValueメソッド（ "Y"）;。propertyNameの= Extensions.GetMemberName <Chart>（X => x.Series）item.Properties [propertyNameの] Collection.Add（ColumnSeriesが）;}}} 
  Technoratiの 
  Tags:  ,  ,  ,  ,  ,  カテゴリー： デザインタイム 、 Silverlightの タグ：  、  、  、  、  、