DevExpress の v14.1 から、Lightweight Templates を使用する最適化モードが導入されました。これによりすべてが高速化されますが、スタイルと DataTriggers の指定方法を変更する必要があります。
軽量テンプレートはUseLightweightTemplates="Row"
、既定でオンになっている添付プロパティによって制御されます。None
下位互換性のために切り替えることができます。
IsDirty
プロパティが任意のグリッド行に設定されている場合に、行に色を付ける方法の実用的な MVVM の例を次に示します。
<dxg:GridControl x:Name="MyGridControl"
ItemsSource ="{Binding MyViewModelList}"
SelectionMode="None"
VerticalAlignment="Stretch">
<dxg:GridControl.Resources>
<SolidColorBrush x:Key="GridRowIsDirty" Color="#FF602D2D" />
</dxg:GridControl.Resources>
<dxg:GridControl.View>
<dxg:TableView UseLightweightTemplates="Row" >
<dxg:TableView.RowStyle>
<Style TargetType="dxg:RowControl">
<Style.Triggers>
<DataTrigger Binding="{Binding Row.IsDirty}" Value="True">
<Setter Property="Background" Value="{StaticResource GridRowIsDirty}" />
</DataTrigger>
</Style.Triggers>
</Style>
</dxg:TableView.RowStyle>
</dxg:TableView>
</dxg:GridControl.View>
<dxg:GridControl.Columns>
<dxg:GridColumn x:Name="Included" FieldName="Included"/>
<dxg:GridColumn x:Name="ColumnB" Header="Column B" FieldName="ColumnB" ReadOnly="True"/>
<dxg:GridColumn x:Name="ColumnC" Header="Column C" FieldName="ColumnC" ReadOnly="True"/>ReadOnly="True"/>
</dxg:GridControl.Columns>
</dxg:GridControl>
このグリッドの背後にある ViewModel では:
public ObservableCollection<MyViewModel> MyViewModelList { get; set; }
MyViewModel
グリッドのすべての行は、必要に応じて設定できるカスタム IsDirty フラグを含むtype のクラスを指します。
public bool IsDirty
{
get { return _isDirty; }
set
{
_isDirty = value;
OnPropertyChanged();
}
}
付録 A: その他のリンク
付録 B: その他のソリューション
これもほとんどの場合は機能しますが、イベントのソースがコンテキスト メニュー経由である場合は機能しないため、お勧めしません。
<DataTrigger Binding="{Binding DataContext.IsDirty}" Value="True">
<Setter Property="Background" Value="{StaticResource GridRowIsDirty}" />
</DataTrigger>
付録 C: AllowLiveDataShaping
トリガーが発射されない場合は、 でスイッチをオンAllowLiveDataShaping="True"
にしてみてください<GridControl>
。ただし、(理論的には) 大規模で複雑なグリッドの速度に影響を与えるため、これを避けるようにしてください (妥当なサイズのほとんどのグリッドには認識できる影響はありません)。
付録 D: 他のすべてが失敗した場合は、カスタム ControlTemplate を使用してください
「UseLightweightTemplates」の導入により、DevExpress は速度に重点を置いてきました。ただし、速度を向上させるために使用される手法には、動作が遅くなる可能性のあるバインドをオフにすることが含まれます。
これは、DxGrid セルで何かを変更しても、ユーザーが次のセルまたは行に移動するまで ViewModel の値は変更されないことを意味します。これは、ViewModel が実際にグリッド内にあるものよりも遅れていることを意味します。
これを修正するために見つけた唯一の解決策は、DevExpress のテンプレートを完全にバイパスして、独自のテンプレートを使用することでした。つまり、DxGrid には、ユーザーが編集するとすぐに ViewModel を即座に更新するカスタム テンプレートを表示するしかありません。つまり、行の色がすぐに変わります。
<dxg:GridControl Grid.Row="3" x:Name="TrsGridControl"
ItemsSource ="{Binding MyObservableCollection}"
VerticalAlignment="Stretch"
AllowLiveDataShaping ="True">
<dxg:GridControl.Resources>
<converter:TestConverter x:Key="TestConverter" />
<ControlTemplate x:Key="DisplayedOnTicketTrs">
<dxe:CheckEdit x:Name="DisplayedOnTicketCheckEdit" HorizontalAlignment="Center" IsChecked="{Binding RowData.Row.DisplayedOnTicket, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</ControlTemplate>
</dxg:GridControl.Resources>
<dxg:GridControl.View>
<dxg:TableView UseLightweightTemplates="All"/>
</dxg:GridControl.View>
<dxg:GridControl.Columns>
<dxg:GridColumn x:Name="DisplayedOnTicketTrs" DisplayTemplate="{StaticResource DisplayedOnTicketTrs}" Header="Displayed On Ticket?" HeaderToolTip="Displayed On Ticket?" AllowEditing="False"/>
Header ="Displayed On Ticket?"/>
<dxg:GridColumn x:Name="ColumnA" Header="ColumnA" FieldName="ColumnA" ReadOnly="True"/>
<dxg:GridColumn x:Name="ColumnB" Header="ColumnB" FieldName="ColumnB" ReadOnly="True"/>
</dxg:GridControl.Columns>
</dxg:GridControl>
この変更を行った後、すべてが機能し始めました。
- チェックボックスをクリックすると、背景色が即座に変更されます (上記の背景色を変更するトリガーを追加した場合)。
- DxGrid を編集すると、ViewModel が即座に変更されます。
- ViewModel を変更すると、DxGrid が即座に更新されます。
- ContextMenu が ViewModel を更新すると、すべてが機能します。