長らくフォームアプリやVBAと戯れているへっぽこSEですが、最近になってWPFにも手を出しはじめました。
XAMLの編集がちょっとホームページビルダーを思い出させて、なんともいえない気持ちになる。
で、チームメンバーに教えてもらいながら実装していて、DataGriの必要なことを自分用にメモ。
まず、基本の形。
DataGridに表示するパラメータは ObservableCollection<T> でViewModelに持たせておけば良さげ。
<DataGrid
ItemsSource="{Binding ViewParam}"
AutoGenerateColumns="False"
CanUserAddRows="False"
Style="{StaticResource DataGrid-normal}"
>
<!-- エラー時の行!マークを非表示 -->
<DataGrid.RowStyle>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="ValidationErrorTemplate" Value="{x:Null}"/>
</Style>
</DataGrid.RowStyle>
<DataGrid.Columns >
<DataGridTextColumn Header="{StaticResource dasi-columnHeader-item1}"
ElementStyle="{StaticResource DataGrid-column-error}"
EditingElementStyle="{StaticResource TextBox-normal}"
Width="1*" Binding="{Binding Item1, UpdateSourceTrigger=PropertyChanged}" />
<DataGridTextColumn Header="{StaticResource dasi-columnHeader-item2}"
ElementStyle="{StaticResource DataGrid-column-error}"
EditingElementStyle="{StaticResource TextBox-normal}"
Width="1*" Binding="{Binding Item2, UpdateSourceTrigger=PropertyChanged}" />
<DataGridTextColumn Header="{StaticResource dasi-columnHeader-item3}"
ElementStyle="{StaticResource DataGrid-column-error}"
EditingElementStyle="{StaticResource TextBox-normal}"
Width="1*" Binding="{Binding Item3, UpdateSourceTrigger=PropertyChanged}" />
</DataGrid.Columns>
</DataGrid>編集可＆入力値チェック
「！」マーク
標準だと入力値が不正だと、その行の右端に「！」が出る。
出るのは良いんだけど、入力し直しても消えない…。
これがちょっと厄介らしいので、はじめから「！」を出さなくしたい。
それがここ。
<!-- エラー時の行!マークを非表示 -->
<DataGrid.RowStyle>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="ValidationErrorTemplate" Value="{x:Null}"/>
</Style>
</DataGrid.RowStyle>
DataGridTextColumn
入力中はTextBox、それ以外はTextBoxとして扱われるので、それぞれのスタイルの指定が必要。
EditingElementStyle と ElementStyle に指定します。
へ～
ElementStyle="{StaticResource DataGrid-column-error}"
EditingElementStyle="{StaticResource TextBox-normal}"
入力エラー時のスタイルはこんな感じ。
背景は淡い赤、エラー内容はツールチップ表示にしています。
選択中に標準の白文字になると見づらいので、常に黒になるよう Foreground も指定。
<Style x:Key="DataGrid-column-error" TargetType="{x:Type TextBlock}" BasedOn="{StaticResource TextBlock-normal}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="True">
<Setter Property="Background" Value="MistyRose"/>
<!-- 選択時フォントが白くならないよう明示的に黒を指定 -->
<Setter Property="Foreground" Value="Black"/>
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)/ErrorContent}" />
</Trigger>
</Style.Triggers>
</Style>あと入力中、リアルタイムで入力チェックが行われるように UpdateSourceTrigger を指定。
Binding="{Binding Item2, UpdateSourceTrigger=PropertyChanged}"てか、調べる上で公式の解説になかなかたどり着かないってことが一番やっかいだったわ！
他にもニッチなIT関連要素をまとめていますので、よければ一覧記事もご覧ください。
