This example illustrates how to use custom WPF data editors (ProgressBar and Slider) to display and edit Units On Order column values.
Custom editors are defined in templates:
- The CellDisplayTemplate property defines the template used to display column values.
- The CellEditTemplate property defines the template used to edit cell values.
Files to Look At
- Window1.xaml (VB: Window1.xaml)
- Window1.xaml.cs (VB: Window1.xaml.vb)
Documentation
More Examples
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
Window1.xaml
XAML<Window x:Class="DXGrid_CustomEditors.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DXGrid_CustomEditors"
Title="Window1"
Height="300" Width="500">
<Window.DataContext>
<local:DemoViewModel/>
</Window.DataContext>
<Grid>
<dxg:GridControl x:Name="grid" ItemsSource="{Binding Products}">
<dxg:GridControl.Columns>
<dxg:GridColumn FieldName="ProductName"/>
<dxg:GridColumn FieldName="UnitPrice">
<dxg:GridColumn.EditSettings>
<dxe:SpinEditSettings DisplayFormat="c2" MinValue="1" MaxValue="999" />
</dxg:GridColumn.EditSettings>
</dxg:GridColumn>
<dxg:GridColumn FieldName="UnitsOnOrder">
<dxg:GridColumn.CellDisplayTemplate>
<DataTemplate>
<ProgressBar Value="{Binding Path=Value, Converter={local:IntToDoubleConverter}}" Minimum="0" Maximum="50" />
</DataTemplate>
</dxg:GridColumn.CellDisplayTemplate>
<dxg:GridColumn.CellEditTemplate>
<DataTemplate>
<Grid VerticalAlignment="Center">
<Slider Minimum="0" Maximum="50" Value="{Binding Path=Value, Mode=TwoWay, Converter={local:IntToDoubleConverter}}" />
<TextBlock Text="{Binding Path=Value}" Foreground="Black" VerticalAlignment="Center" HorizontalAlignment="Center" TextWrapping="NoWrap" />
</Grid>
</DataTemplate>
</dxg:GridColumn.CellEditTemplate>
</dxg:GridColumn>
<dxg:GridColumn FieldName="Total" UnboundType="Decimal" UnboundExpression="[UnitPrice] * [UnitsOnOrder]" ReadOnly="True">
<dxg:GridColumn.EditSettings>
<dxe:TextEditSettings DisplayFormat="c2" />
</dxg:GridColumn.EditSettings>
</dxg:GridColumn>
</dxg:GridControl.Columns>
<dxg:GridControl.View>
<dxg:TableView AutoWidth="True" />
</dxg:GridControl.View>
</dxg:GridControl>
</Grid>
</Window>
Window1.xaml.cs(vb)
C#using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Markup;
namespace DXGrid_CustomEditors {
public partial class Window1 : Window {
public Window1() {
InitializeComponent();
}
}
public class IntToDoubleConverter : MarkupExtension, IValueConverter {
public override object ProvideValue(IServiceProvider serviceProvider) {
return this;
}
object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
if(value is int)
return Convert.ToDouble(value);
return double.NaN;
}
object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) {
return Convert.ToInt32(value);
}
}
}