ホーム >のデザイン時Silverlightの編集用のSilverlightコントロール値>プロパティ

Silverlightのコントロールのプロパティ値の編集

導入

これは、変化の実装設計時に一部のシリーズがSilverlight Toolkitの3 2009リリース。 このポストはどのように制御する使用してプロパティの値エディタ、型コンバータをSilverlightのプロパティの編集の経験を高めるために説明します。 私は例を、デザイナーのSilverlight編集アーキテクチャのWPF /プロパティが開始と記述全体の拡張フレームワークを使用して、 Silverlightをツールキット3月 2009リリースを行っている方法を示すことは、どのように、独特の問題時間発展設計/トリックでSilverlightの。

プロパティの編集アーキテクチャ

視覚的に編集オブジェクトのプロパティは、デザイナの重要な部分です。 設計者は通常、カスタムタイプ(クラス、インターフェイスを構造体)、多くの素敵な編集のユーザーインターフェイスを提供するために以下のプロパティをレンダリングするのか分からない。 コントロールの開発者は、通常提供to need TypeConverterをPropertyValueEditor 、または両方を、renderingを提供する/編集のUIと、カスタム型のproperties for XAMLののシリアル化。

デザイナー拡張フレームワークは、プロパティの値エディタの3種類の:インラインエディタ、拡張エディタ、ダイアログエディタは、各クラスで実装された:

PropertyValueEditor class diagram

編集UIは、編集者の方で定義されてDataTemplateを プロパティは、エディタにさらされて編集されてDataContextの PropertyValueのタイプ エディタのUIのプロパティの3つの通常バインドするための基本となる1つの編集中を介してプロパティPropertyValueの: StringValueまたはコレクション。

PropertyValueEditor

PropertyValueEditorはで保持している1つのインライン定義されてエディタをInlineEditorTemplate プロパティ インラインエディタのプロパティウィンドウ内で表示されます。 以下の簡単な例ですInlineEditorTemplate プロパティを編集しますTextBoxをしに表示:

  x:Key ="TextBoxEditor" > <は>を DataTemplateを のx:キー ="TextBoxEditor"
     Text ="{Binding Path=Value}" /> < テキストボックス  テキスト ="(バインディングパス=値)"/>
 > <は/>を DataTemplateを 

ExtendedPropertyValueEditor

ExtendedPropertyValueEditorはからある2つのエディタ:インライン継承エディタPropertyValueEditor および追加の拡張エディタを定義ExtendedEditorTemplateプロパティ 拡張エディタを介してエディタインラインでポップアップ通常PropertyValueEditorCommands ShowExtendedPinnedEditor または PropertyValueEditorCommands ShowExtendedPopupEditor コマンド 以下は簡単な例です:インラインエディタのボタンです。クリックすると、それが表示され、基になるプロパティを編集するスライダーを使用して拡張エディタをポップアップ表示されます。
  x:Key ="inlineEditor" > <DataTemplate のx:キー ="inlineEditor">
     Content ="..." Command ="{x:Static PropertyEditing:PropertyValueEditorCommands.ShowDialogEditor}" /> < ボタン コンテンツ ="..." コマンド ="(x:は静的PropertyEditing:PropertyValueEditorCommands.ShowDialogEditor)"/>
 > <は/>を DataTemplateを
 x:Key ="extendedEditor" xmlns:PropertyEditing ="clr-namespace:Microsoft.Windows.Design.PropertyEditing;assembly=Microsoft.Windows.Design.Interaction" > <  、DataTemplate は、x:キー ="extendedEditor" xmlns:> PropertyEditing ="CLRの名前空間を:Microsoft.Windows.Design.PropertyEditing;アセンブリ= Microsoft.Windows.Design.Interaction"
     x:Name ="slider" Value ="{Binding Path=Value}" /> < スライダー のx:Name ="スライダが" 値が ="(")バインド値をパス= />
 > <は/>を DataTemplateを 

DialogPropertyValueEditor

DialogPropertyValueEditorはあまりにも2つのエディタを持つ:インラインエディタからの継承PropertyValueEditor および追加のダイアログエディタで定義されてDialogEditorTemplateのプロパティです。 ダイアログエディタを介してエディタインラインでポップアップ通常PropertyValueEditorCommands ShowDialogEditor コマンド 以下は簡単な例です:

  x:Key ="inlineEditor" > <DataTemplate のx:キー ="inlineEditor">
     Content ="..." Command ="{x:Static PropertyEditing:PropertyValueEditorCommands.ShowDialogEditor}" /> < ボタン コンテンツ ="..." コマンド ="(x:は静的PropertyEditing:PropertyValueEditorCommands.ShowDialogEditor)"/>
 > <は/>を DataTemplateを
 x:Key ="dialogEditor" xmlns:PropertyEditing ="clr-namespace:Microsoft.Windows.Design.PropertyEditing;assembly=Microsoft.Windows.Design" > <  、DataTemplate は、x:キー ="dialogEditor" xmlns:> PropertyEditing ="CLRの名前空間を:Microsoft.Windows.Design.PropertyEditing;アセンブリ= Microsoft.Windows.Design"
     > < グリッド >
         > <の Grid.ColumnDefinitionsに >
             Width ="Auto" /> <の ColumnDefinition  ="自動"/>
             Width ="*" /> <の ColumnDefinition  ="*"/>
         > </ Grid.ColumnDefinitions>
         > <の Grid.RowDefinitionsに >
             Height ="*" /> <の RowDefinition   ="*"/>
             Height ="*" /> <の RowDefinition   ="*"/>
         > </ Grid.RowDefinitions>
         Text ="User Name:" VerticalAlignment ="Center" HorizontalAlignment ="Right" Margin ="0,0,4,4" /> <の TextBlockのテキスト ="ユーザ名:"VerticalAlignment ="センター"HorizontalAlignment ="右" マージン ="0,0,4,4"/>
         Text ="{Binding Path=Value}" VerticalAlignment ="Center" HorizontalAlignment ="Stretch" Margin ="0,0,4,4" Grid . Column ="1" /> < テキストボックス  テキスト ="(バインディングパス=値)"VerticalAlignment ="センター"HorizontalAlignment ="ストレッチ" マージン ="0,0,4,4" グリッドカラム ="1"/>
     > </ グリッド >
 > <は/>を DataTemplateを 

実装カスタムプロパティエディタ

Silverlightコントロールのカスタムプロパティエディタを実装するには:

  • カスタムプロパティエディタクラスを実装する
  • カスタムプロパティエディタをSilverlightコントロールのプロパティを持つAddCustomAttributes呼び出し、何かのように経由アソシエイト
      attributeTableBuilder.AddCustomAttributes(
         typeof演算 (myControlを)
         "myPropertyに"
         (MyValueEditor))); 新しいPropertyValueEditor.CreateEditorAttribute(typeof演算 (MyValueEditor))); 

    正しく実装プロパティの値エディタは、次の要件を満たす必要があります:

  • プロパティ値のエディタがそうインラインエディタと拡張エディタ部分が独立して使用できるように設計する必要があります。
  • プロパティ値エディタは、状態を格納しないでください。 プロパティ値エディタはステートレスです、ホストの実装、およびキャッシュされるため、再複数のプロパティの値を越えて使用することができます。
  • プロパティ値エディタは1つだけの値エディタ部分(ビュー/インラインは/拡張)コントロールを負いませんする必要がありますアクティブ指定時のものです。 たとえば、ダイアログボックスで、ビュー部分は、インラインの一部を持つことが、同時にUIの部分をアクティブに延長した。
  • コントロールは、プロパティの値エディタの一環として、状態を格納しないでください実装した。 コントロールは、値エディタの一環として、それは1つだけのプロパティ値にバインドされると仮定しないでください実装した。 コントロールは、さまざまなプロパティ値を変更するにはリサイクルされることがあります。 データモデルが更新された場合キャッシュされるすべての情報がフラッシュされる必要があります。
  • コントロールは、プロパティの値エディタの一部としてホストまたはその親コントロールについての仮定をしてはならない実装した。 必要がありますが使用されるメカニズムは、通信のみですPropertyValueの方法により 、モデルデータのDataContextに、セットコマンドの標準。

    リファレンスの両方WPFとSilverlightアセンブリ

    設計アセンブリはの.NET / WPFのアセンブリVisual Studioまたはブレンドで読み込まれると、それは通常のSilverlightアセンブリ(参照するSilverlightコントロールのアセンブリ、少なくともそれは設計時の機能を提供する)必要があります。 これは、設計アセンブリのプロジェクトの参照のあいまいさを作成することができます:それは時々参照同じ両方のWPFとSilverlightの完全修飾型には、両方のPresentationFramework.dll WPFとSystem.Windows.dll SilverlightののSystem.Windows.FrameworkElementを言う必要があります。 スタジオをVisualするため混乱は、使用することができますのexternエイリアスを参照のSilverlightを見分けるWPFと。

    たとえば、参照してくださいToolkitには3のSilverlightプロジェクトでControls.DataVisualization.Toolkit.Designの下のスクリーンショット3月2009リリース:

    image

    • プロジェクト参照の両方PresentationFrameworkとSystem.Windowsが、System.Windowsは、Silverlightのエイリアス下にあるのではなく、既定のグローバルエイリアス。 Silverlightの偽名を使ってSystem.Windowsリファレンスには、はに保持されます。以下のようにcsprojファイル:
        Include ="System.Windows, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e, processorArchitecture=MSIL" > < リファレンス を含める ="System.Windows、バージョン= 2.0.5.0、文化= PublicKeyTokenニュートラル= 7cec85d7bea7798e、processorArchitecture = MSILを">
         > False </ SpecificVersion > <SpecificVersion / SpecificVersionの >> Falseの<
         > ..\Binaries\System.Windows.dll </ HintPath > <HintPath> .. \バイナリ\ System.Windows.dll </ HintPath>
         > False </ Private ></ プライベート > < プライベート >
         > Silverlight </ Aliases > <は<を エイリアス > Silverlightの/ 別名 >
       > </ リファレンス > 

    • 我々は追加のソースコードで、
        のexternエイリアスのSilverlight。
       Silverlightを使用して南南西=::System.Windows。 

      と参照SilverlightのFrameworkElementは南南西を介して::FrameworkElementは。

    TextBoxEditor

    またインラインエディタTextBoxEditor Controls.DataVisualization.Toolkit.Designプロジェクトで[エリア|バー|バブル|コラム|ライン|パイ|散布]シリーズとグラフコントロール、以下のようにオブジェクトの種類の編集Titleプロパティ表示です:

    TextBoxEditor

    テキストはタイトルフィールドの[プロパティ]ウィンドウの右側に入力が自動的XAMLおよび中間のデザインビューで表示されます。

    TextBoxEditorの実装手順をする前に概要を説明:

    TextBoxEditor.cs

    • TextBoxEditorはPropertyValueEditorのサブクラスです。 これは、設定InlineEditorTemplateをコンストラクタでのデフォルトの。 ここでは、構文を使用するコードを代わりにXAMLのDataTemplateをを、ために何らかの形で私は、構築することができないのXAML、とにかくすべてのC#ですることができますXAMLはさ書き直される。
    • これは、(ChartMetadata.cs関連付けられているChart.Titleで参照してください実装でSilverlight Toolkitの機能デザイン時のファイルの詳細については、上* Metadata.csの)

    TextBoxEditor.cs:

      / /(c)の著作権マイクロソフト株式会社。
     / /このソースは)さんは被写体に、Microsoft Public Licenseの(のPL。
     / /詳細については、http://go.microsoft.com/fwlink/?LinkID=131993を参照してください。
     / /他のすべての権利を保有。
    
    システムを使用して;
     Microsoft.Windows.Design.PropertyEditingを使用して;
     System.Windowsを使用して;
     System.Windows.Dataを使用して;
    
     名前空間 System.Windows.Controls.DataVisualization.Design
    
         / / / <summary>
         / / /単純なTextBoxのインラインエディタ。
         / / / </概要>
         公共部分クラス TextBoxEditor:PropertyValueEditor
        
             / / / <summary>
             /プリザーブコンストラクタのプロトタイプからPropertyValueEditor / /。
             / / / </概要>
             / / / <param name="inlineEditorTemplate">インラインエディタはテンプレートです。</パラメータの>
             公共 TextBoxEditor(DataTemplateをinlineEditorTemplate)
                ベースは (inlineEditorTemplate)
             ()
    
             / / / <summary>
             / / /デフォルトのコンストラクタは、テンプレートのビルドのデフォルトのTextBoxインラインエディタを。
             / / / </概要>
             公共 TextBoxEditor()
            
                 (TextBox)); FrameworkElementFactoryテキストボックス= 新しいFrameworkElementFactory(typeof演算 (テキストボックス));
                 )バインディング= 新しいバインディングを(;
                 ); binding.Path = 新しい PropertyPath("値");
                 binding.Mode = BindingMode.TwoWay;
                 (TextBox.TextProperty、バインディング)textBox.SetBinding;
    
                 DataTemplateをdtを= 新しい )DataTemplateを(;
                 dt.VisualTree =テキスト;
    
                 InlineEditorTemplate = dtが。
            
        
     

    CultureInfoEditor

    私の同僚のRJは、 XAMLのリードが無効のためのCultureInfoをブレンド経験はTimePicker.CultureプロパティCultureInfoEditorエディタインライン書き込みの編集のデフォルトのためです。 以下のスクリーンショットCultureInfoEditorを示していますコンボボックスは、すべてのCultureInfoを表示するために使用して、右のXAMLを生成します。

    CultureInfoEditor

    CultureInfoEditorはTextBoxEditorよりも複雑な例では、実際にどのよう基になるプロパティがDataContextプロパティを介してエディタに関連付けられて表示されますです。

    CultureInfoEditor.cs:

      / /(c)の著作権マイクロソフト株式会社。
     / /このソースは)さんは被写体に、Microsoft Public Licenseの(のPL。
     / /詳細については、http://go.microsoft.com/fwlink/?LinkID=131993を参照してください。
     / /他のすべての権利を保有。
    
     します 。using System.Reflection;
     Microsoft.Windows.Design.PropertyEditingを使用して;
     System.Globalizationを使用して;
     System.ComponentModelを使用して;
    
     名前空間 System.Windows.Controls.Input.Design
    
         / / / <summary>
         /エディタのCultureInfo / /。
         / / / </概要>
         / / / <remarks>現在、>発言/しないサポートしていないXAMLのバインディングから、エディタ。<
         パブリッククラス CultureInfoEditor:PropertyValueEditor
        
             / / / <summary>
             / / /コンボボックスの値を編集するされて使用されます。
             / / / </概要>
             プライベート ComboBoxの_owner;
    
             / / / <summary>
             /プリザーブコンストラクタのプロトタイプからPropertyValueEditor / /。
             / / / </概要>
             / / / <param name="inlineEditorTemplate">インラインエディタはテンプレートです。</パラメータの>
             公共 CultureInfoEditor(DataTemplateをinlineEditorTemplate)
                ベースは (inlineEditorTemplate)
             ()
    
             / / / <summary>
             / / /デフォルトのコンストラクタは、テンプレートのビルドComboBoxのインラインエディタを。
             / / / </概要>
             公共 CultureInfoEditor()
            
                 ここからサポートしていないSilverlightはしないバインディング/使用していない/
                 / / WPFのCultureConverterブレンドで使用されます。
                 (ComboBox)); FrameworkElementFactoryコンボボックス= 新しいFrameworkElementFactory(typeof演算 (コンボ));
                 comboBox.AddHandler(
                     ComboBox.LoadedEvent、
                     新しいの RoutedEventHandler(
                         (送信者、電子)⇒
                        
                             _owner =(ComboBoxの)送信者;
                             +は= EditorSelectionChanged _owner.SelectionChanged;
                             = _owner.DataContext として INotifyPropertyChangedのデータINotifyPropertyChangedの。
                             )もしデータ!= null)
                                 + = DatacontextPropertyChangedはdata.PropertyChanged;
                            
                             = CultureDatacontextChanged +を_owner.DataContextChanged;
                         )));
    
                 comboBox.SetValue(ComboBox.IsEditablePropertyの場合 false);
                 comboBox.SetValue(ComboBox.DisplayMemberPathProperty、"表示");
                 comboBox.SetValue(ComboBox.ItemsSourceProperty、CultureInfo.GetCultures(CultureTypes.SpecificCultures));
                 DataTemplateのdtを= 新しい )DataTemplateのを(;
                 dt.VisualTree = comboBoxの;
    
                 InlineEditorTemplate = dtが。
            
    
             / / / <summary>
             / / /コントロールのオーナーイベントを処理SelectionChanged。
             / / / </概要>
             / / / <paramのname="sender">イベントのソースです。</パラメータの>
             / / / <paramのname="e"> <seeのcref="System.Windows.Controls.SelectionChangedEventArgs"/>を
             / / /インスタンス>を</パラメータの格納イベントデータを。
             sender, SelectionChangedEventArgs e) します。private void EditorSelectionChanged( オブジェクト送信者、SelectionChangedEventArgs e)の
            
                 / /名前とシリアル化します。
                     オブジェクトのDataContext = _owner.DataContext;
                     DataContextの
                         。はgettype()
                         。GetPropertyを("値"、BindingFlags.Public | BindingFlags.Instance | BindingFlags.GetProperty)
                         。SetValueを(DataContextに、((CultureInfoを)_owner.SelectedItem)の名前は、 新しいオブジェクト []());
            
    
             / / / <summary>
             / / /オブジェクトのコンテキストイベントを処理にPropertyChanged。
             / / / </概要>
             / / / <paramのname="sender">イベントのソースです。</パラメータの>
             / / / <param>をname="e"> <see cref="System.ComponentModel.PropertyChangedEventArgs"/>のparam。</インスタンスを含むイベントデータを
             sender, PropertyChangedEventArgs e) します。private void DatacontextPropertyChanged( オブジェクト送信者、PropertyChangedEventArgs e)の
            
                 / /名前から逆シリアル化。
                 ) == 場合 (e.PropertyName"値")
                
                     オブジェクトの値は =送信
                         。はgettype()
                         。GetPropertyを("値"、BindingFlags.Public | BindingFlags.Instance | BindingFlags.GetProperty)
                         。GetValueメソッド(送信者は、 新しいオブジェクト []());
    
                     != null ) 値するif(!= null)
                         )文字列場合は値は
                        
                             .ToString());のCultureInfo setCulture = 新しいカルチャ(  ToStringメソッド());
                             _owner.SelectedItem = setCulture;
                        
                    
                
            
    
             / / / <summary>
             / / /変更時に呼び出されているコンテキストが。
             / / / </概要>
             / / / <paramのname="sender">送信します。</パラメータの>
             / / / <param>をname="e"> <see cref="System.Windows.DependencyPropertyChangedEventArgs"/>のparam。</インスタンスを含むイベントデータを
             sender, DependencyPropertyChangedEventArgs e) します。private void CultureDatacontextChanged( オブジェクト送信者、DependencyPropertyChangedEventArgs e)の
            
                 = e.OldValue として INotifyPropertyChangedの古いINotifyPropertyChangedの。
                 ) 場合 )(旧!= nullの
                
                     -= DatacontextPropertyChanged old.PropertyChanged;
                
                 INotifyPropertyChangedのnewDataContext = e.NewValue INotifyPropertyChangedのように
                 ) newDataContext するif(!= null)
                     + = DatacontextPropertyChangedはnewDataContext.PropertyChanged;
                
            
        
     

    ExpandableObjectConverter

    冒頭に、カスタムプロパティの値がエディタに加えて説明したように、場合によっては良い編集の経験とXAMLのシリアル化を提供するために適切な型コンバータを使用することができます。 1つの例では、ColumnSeries.DependentRangeAxis:それはIRangeAxisタイプのですが、ブレンドはどのように編集する分かっていないので、DependentRangeAxisのプロパティパネルのみで読むように表示されます。 関連付けることによりExpandableObjectConverterを ColumnSeries.DependentRangeAxisする:

      b.AddCustomAttributes(
         Extensions.GetMemberName <ColumnSeries>が(x => x.DependentRangeAxis)
         (ExpandableObjectConverter))); 新しいTypeConverterAttribute(typeof演算 (ExpandableObjectConverter)));
     b.AddCustomAttributes(
         Extensions.GetMemberName <ColumnSeries>が(x => x.IndependentAxis)
         (ExpandableObjectConverter))); 新しいTypeConverterAttribute(typeof演算 (ExpandableObjectConverter))); 

    ブレンドは、[新規]ボタンのプロパティパネル]の[このプロパティの横に表示されます。クリックすると、それは、プロパティの型IRangeAxisでフィルタを選択オブジェクトのダイアログを開く:

    ExpandableObjectConverter

    結論

    ブレンドは、Silverlightを一緒にデザイナーが実際のコントロールに対して驚くほどのUIを作成できるように直接、それは非常にコントロールdevelopers、全体的な制御設計と実装のpart、デザイナーの経験をtake重要です。 素敵な編集UIを提供し、適切なXAMLは、デザイナーの経験の重要な部分が生成されますカスタムプロパティエディタを持つ。 うまくいけば、この記事では、どのようにカスタムプロパティエディタを作成するために理解することができます。 ありがとう!

    共有し、楽しみなさい:

    • Print
    • email
    • RSS
    • Twitter
    • TwitThis
    • del.icio.us
    • LinkedIn
    • Technorati
    • Facebook
    • Google Bookmarks
    • Live
    • MySpace
    • QQ书签
    1. コメントはまだありません。
    1. いいえトラックバックはまだありません。