XamGrid は バージョン 21.1 を最後に廃止されたコントロールであるため、XamDataGrid コントロールに移行することをお勧めします。今後、新機能、バグ修正、サポートは提供されません。コードベースの XamDataGrid への移行に関する質問は、サポートまでお問い合わせください。
XamGrid の TextColumn にバリデーション機能を実装したい場合は、
— モデル側の実装 —
1. モデル側に IDataErrorInfo インターフェースを実装する。
— ビュー側の実装 —
1. XamGrid を配置する。
2. 検証エラー時の視覚的なフィードバックを提供する ControlTemplate を実装する。
3. TextBox をターゲットとする Style クラス オブジェクトで Validation.ErrorTemplate 添付プロパティに 2 の ControlTemplate を設定する。
4. XamGrid のバリデーション機能を実装したい TextColumn の EditorStyle プロパティに 3 で作成した Style クラス オブジェクトを設定する。
で可能です。このうちモデル側の実装の 1 とビュー側の実装の 2 と 3 は .NET Framework / .NET もしくは WPF 一般の内容になりますのでそれに倣って自分で実装する領域になります。
では、実装していきましょう。先に実装完了後の実現イメージを載せておきます。
実装完了後の実現イメージ
[モデル側の実装 – 1] IDataErrorInfo インターフェースを実装する。
IDataErrorInfo の公式ドキュメントはこちらです。
- 「IDataErrorInfo インターフェイス」(※註: API リファレンスです)
- 「方法: カスタム オブジェクトに検証ロジックを実装する」(※註: 実装コード例が確認できます)
モデルとして次の Person クラスを想定しましょう。
// Person.cs
internal class Person : ObservableObject
{
private String _id;
public String ID
{
get { return _id; }
set { _id = value; OnPropertyChanged(); }
}
private String _familyName;
public String FamilyName
{
get { return _familyName; }
set { _familyName = value; OnPropertyChanged(); }
}
private String _givenName;
public String GivenName
{
get { return _givenName; }
set { _givenName = value; OnPropertyChanged(); }
}
public Person()
{
}
}
この Person クラスの FamilyName プロパティに対して「空文字列であってはならない」というバリデーション検証を実装したい場合、以下のような実装になります。
// Person.cs
internal class Person : ObservableObject, IDataErrorInfo // IDataErrorInfo インターフェースを追加する。
{
... (省略) ...
#region IDataErrorInfo 実装部分
public string Error
{
get { return null; }
}
public string this[string columnName]
{
get
{
if(columnName == "FamilyName")
{
if (String.IsNullOrEmpty(this._familyName)) return "姓を空欄にすることはできません。";
}
return null;
}
}
#endregion
... (省略) ...
}
モデル側の実装は以上で完了です。
ビューモデル側で ObservableCollection<Person> 型の People プロパティを実装し、コンストラクターで各 Person を生成する処理を追加しておきます (この記事では割愛します)。
[ビュー側の実装 – 1] XamGrid を配置する。
XamGrid を配置します。列を手動で定義します (AutoGenerateColumns=”False”)。編集機能を有効にします (AllowEditing=”Cell”)。列を Columns に追加していきます。
<!-- MainWindow.xaml -->
<Window ...>
<Grid>
<ig:XamGrid
x:Name="xamGrid1"
ItemsSource="{Binding People}" AutoGenerateColumns="False">
<ig:XamGrid.EditingSettings>
<ig:EditingSettings AllowEditing="Cell"/>
</ig:XamGrid.EditingSettings>
<ig:XamGrid.Columns>
<ig:TextColumn Key="ID"/>
<ig:TextColumn Key="FamilyName"/> <!-- ←バリデーション機能を実装したい列 -->
<ig:TextColumn Key="GivenName"/>
</ig:XamGrid.Columns>
</ig:XamGrid>
</Grid>
</Window>
[ビュー側の実装 – 2] 検証エラー時の視覚的なフィードバックを提供する ControlTemplate を実装する。
公式が出しているドキュメントはこちらです。
- 「視覚的なフィードバックを提供する」
この情報に従って ControlTemplate を実装します。
<!-- MainWindow.xaml -->
<Window ...>
<Window.Resources>
<ControlTemplate x:Key="validationTemplate">
<StackPanel Orientation="Horizontal">
<Border
BorderThickness="3" BorderBrush="Red" CornerRadius="0.7"
VerticalAlignment="Top">
<AdornedElementPlaceholder x:Name="adorner"/>
</Border>
<Border BorderBrush="Blue" Background="Blue" Margin="8,3,8,3">
<TextBlock
Text="{Binding ElementName=adorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"
HorizontalAlignment="Center"
Foreground="White" Margin="8,3,8,3" TextWrapping="Wrap"/>
</Border>
</StackPanel>
</ControlTemplate>
</Window.Resources>
...
</Window ...>
[ビュー側の実装 – 3] TextBox をターゲットとする Style クラス オブジェクトで Validation.ErrorTemplate 添付プロパティに 2 の ControlTemplate を設定する。
TextBox をターゲットとする Style クラス オブジェクトを作成し、Validation.ErrorTemplate 添付プロパティに [ビュー側の実装 – 2] で実装した ControlTemplate のキーを設定します。
<!-- MainWindow.xaml -->
<Window ...>
<Window.Resources>
<!-- 検証エラー時の ControlTemplate の実装 -->
<ControlTemplate x:Key="validationTemplate">
...
</ControlTemplate>
<!-- TextBox をターゲットとする Style クラス オブジェクトの実装 -->
<Style TargetType="{x:Type TextBox}" x:Key="TextBoxStyleForFamilyNameColumn">
<Setter Property="Validation.ErrorTemplate" Value="{StaticResource validationTemplate}" />
</Style>
</Window.Resources>
...
</Window ...>
[ビュー側の実装 – 4] XamGrid のバリデーション機能を実装したい TextColumn の EditorStyle プロパティに 3 で作成した Style クラス オブジェクトを設定する。
バリデーション機能を実装したい列の EditorStyle プロパティに [ビュー側の実装 – 3] で実装した Style のキーを設定します。
<!-- MainWindow.xaml -->
...
<ig:XamGrid ...>
...
<ig:XamGrid.Columns>
<ig:TextColumn Key="ID"/>
<ig:TextColumn Key="FamilyName" EditorStyle="{StaticResource TextBoxStyleForFamilyNameColumn}"/>
<ig:TextColumn Key="GivenName"/>
</ig:XamGrid.Columns>
</ig:XamGrid>
...
以上で完成です！
