<igDP:CurrencyField Label="Salary" Mask"{}{currency:7.2}" Name="Salary" NullText="No Salary" />
このトピックでは、データ プレゼンター フィールド エディターのコントロールを構成する方法を説明します。
このトピックをより理解するために、以下のトピックを参照することをお勧めします。
さまざまなデータ型に対するデフォルトのエディター タイプのトピックで説明するように、データ プレゼンター ファミリーからのコントロールは、各フィールドのデータ型に応じて異なるタイプのエディターをデフォルトで割り当てます。FieldSettings オブジェクトの EditorType プロパティを使用して 1 つまたは複数のフィールドに割り当てられたエディターの変更 (フィールドへの xamEditor の埋め込みのトピックを参照)、および以下のコード例のようにこれらのエディターの構成 (またはそのいずれか) することができます。
これらのコントロールを構成するには、 FieldSettings オブジェクトの EditorStyle プロパティを使用して、特定のエディターにスタイルを設定する必要があります。
注:
以下の表は、このトピックで使用したコード例をまとめたものです。
以下のコード スニペットは、以下の構成の場合に CurrencyField を使用する方法を示します。
記録された値が null 値の場合は、「No Salary」がテキストに表示されます。
整数部に 7 桁まで、小数部に 2 桁を設定可能にするマスクの設定
以下のコードはこの例を実装します。
XAML の場合:
<igDP:CurrencyField Label="Salary" Mask"{}{currency:7.2}" Name="Salary" NullText="No Salary" />以下のコード スニペットは、 XamComboEditor をフィールド エディターとして使用して、エディターのドロップダウン リストに選択可能な項目を事前設定する方法を示します。
XAML の場合:
<igDP:XamDataGrid.Resources>
<igEditors:ComboBoxItemsProvider x:Key="ComboItemsProvider">
<igEditors:ComboBoxItemsProvider.Items>
<igEditors:ComboBoxDataItem DisplayText="Accounting" Value="Accounting"/>
<igEditors:ComboBoxDataItem DisplayText="Admin" Value="Admin"/>
<igEditors:ComboBoxDataItem DisplayText="Board of Directors" Value="Board of Directors"/>
<igEditors:ComboBoxDataItem DisplayText="Human Resources" Value="Human Resources"/>
<igEditors:ComboBoxDataItem DisplayText="Sales" Value="Sales"/>
</igEditors:ComboBoxItemsProvider.Items>
</igEditors:ComboBoxItemsProvider>
</igDP:XamDataGrid.Resources>
<igDP:Field Name="department" Label="Department">
<igDP:Field.Settings>
<igDP:FieldSettings
EditorType="{x:Type igEditors:XamComboEditor}">
<igDP:FieldSettings.EditorStyle>
<Style TargetType="{x:Type igEditors:XamComboEditor}">
<Setter Property="DropDownButtonDisplayMode" Value="MouseOver"/>
<Setter Property="ItemsProvider" Value="{StaticResource ComboItemsProvider}" />
</Style>
</igDP:FieldSettings.EditorStyle>
</igDP:FieldSettings>
</igDP:Field.Settings>
</igDP:Field>以下のコード スニペットは、 XamDateTimeEditor をフィールド エディターとして使用して、年、月、日の順序で日付の編集を要求するマスクを構成する方法を示します。
XAML の場合:
<igDP:Field Label="Date of Birth" DataType="{x:Type sys:DateTime}" BindingType="Unbound">
<igDP:Field.Settings>
<igDP:FieldSettings EditorType="{x:Type igEditors:XamDateTimeEditor}">
<igDP:FieldSettings.EditorStyle>
<Style TargetType="{x:Type igEditors:XamDateTimeEditor}">
<Setter Property="Mask" Value="yyyy/mm/dd" />
</Style>
</igDP:FieldSettings.EditorStyle>
</igDP:FieldSettings>
</igDP:Field.Settings>
</igDP:Field>以下のコード スニペットは、 XamNumericEditor をフィールド エディターとして使用して、下限値と上限値を設定する方法を示します。
XAML の場合:
<igDP:Field Label="Leave Left" DataType="{x:Type sys:Int32}" BindingType="Unbound">
<igDP:Field.Settings>
<igDP:FieldSettings EditorType="{x:Type igEditors:XamNumericEditor}">
<igDP:FieldSettings.EditorStyle>
<Style TargetType="{x:Type igEditors:XamNumericEditor}">
<Setter Property="ValueConstraint">
<Setter.Value>
<igEditors:ValueConstraint MinInclusive="0" MaxInclusive="10" />
</Setter.Value>
</Setter>
</Style>
</igDP:FieldSettings.EditorStyle>
</igDP:FieldSettings>
</igDP:Field.Settings>
</igDP:Field>以下のコード スニペットは、 XamMaskedEditor をフィールド エディターとして使用して、0 から 50 の範囲で数の編集を要求するマスクの設定方法を示します。
XAML の場合:
<igDP:Field Label="Leave Left" DataType="{x:Type sys:Int32}" BindingType="Unbound">
<igDP:Field.Settings>
<igDP:FieldSettings EditorType="{x:Type igEditors:XamMaskedEditor}">
<igDP:FieldSettings.EditorStyle>
<Style TargetType="{x:Type igEditors:XamMaskedEditor}">
<Setter Property="Mask" Value="{}{number:0-50}" />
</Style>
</igDP:FieldSettings.EditorStyle>
</igDP:FieldSettings>
</igDP:Field.Settings>
</igDP:Field>以下のコード スニペットは、 XamMaskedEditor をフィールド エディターとして使用して、特定の形式で電話番号の入力を要求するマスクを設定する方法を示します。
XAML の場合:
<igDP:Field Label="Phone" DataType="{x:Type sys:String}" BindingType="Unbound">
<igDP:Field.Settings>
<igDP:FieldSettings EditorType="{x:Type igEditors:XamMaskedEditor}">
<igDP:FieldSettings.EditorStyle>
<Style TargetType="{x:Type igEditors:XamMaskedEditor}">
<Setter Property="Mask" Value="{}{pass:[(###)-###-####]}" />
</Style>
</igDP:FieldSettings.EditorStyle>
</igDP:FieldSettings>
</igDP:Field.Settings>
</igDP:Field>このトピックの追加情報については、以下のトピックも合わせてご参照ください。