WPF DEV CellTemplateSelector(一个正确使用DevExpress CellTemplateSelector的Demo)

说明

我在项目中根据需求需要用到WPF Dev CellTemplateSelector时，遇到不少坑。曾一度想要放弃使用模板转换器，但又心有不甘，终于在不断努力下，达到了需求的要求。所以写下来和大家分享。如果有同样困惑的人，可以少走些弯路。笔者第一次写博客，文笔不好，还请见谅。

需求

 

需求很简单，选择方式下拉框选中时间控制方式或者价格控制方式，后面的控制点单元格对应显示日期控件或文本控件。

思路

刚拿到这个需求，就想到了模板选择器。但是之前也没有用过模板转换器，所以走了很多弯路。我们先看dev官方文档的说明

When using CellTemplate (or DataViewBase.CellTemplate) note the following:

To enable data editing, use an editor shipped with the DevExpress Data Editors Library for WPF. The editor's Name must be set to 'PART_Editor'.

When the editor's Name is set to PART_Editor, the grid automatically adjusts its appearance and synchronizes the editor with a source field specified by the FieldName or Binding properties.

Standard controls can be used in CellTemplate only for display purposes. Data editing is not allowed.

Templates specified via the DisplayTemplate and/or EditTemplate are ignored.

A column's in-place editor specified via EditSettings, is also ignored.

意思就是说模板控件必须命名为“PART_Editor”，并且模板不需要绑定数据源，对应的GridControl的列绑定数据源即可，GridControl会自动将模板嵌入展示。我刚开始就是没有命名规范，并且在模板控件中绑定了数据源所以显示一直有问题。根据需求写出模板如下。

  <Window.Resources>
        <DataTemplate x:Key="FirstTemplate">
            <StackPanel>
                <dxe:DateEdit x:Name="PART_Editor"  Mask="yyyy-MM-dd" MaskUseAsDisplayFormat="True">
                </dxe:DateEdit>
            </StackPanel>
        </DataTemplate>

        <DataTemplate x:Key="SecondTemplate">
            <StackPanel>
                <dxe:TextEdit x:Name="PART_Editor"
                              MaskType="Numeric" Mask="n" MaskUseAsDisplayFormat="True" AllowNullInput="False" >
                </dxe:TextEdit>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>

同时CellTemplateSelector需要继承DataTemplateSelector类，并且实现SelectTemplate方法根据条件返回一个你所需的Template.代码如下

 public  class SettingDataTemplateSelector: DataTemplateSelector
    {
        public DataTemplate FirstTemplate
        {
            get;
            set;
        }
        public DataTemplate SecondTemplate
        {
            get;
            set;
        }

 
        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            FrameworkElement element = container as FrameworkElement;

            EditGridCellData data = (EditGridCellData)item;
            Setting setting = data.RowData.Row as Setting;
            if (setting != null)
            {

                if (setting.ControlMode == 1)
                    return element.FindResource("FirstTemplate") as DataTemplate;
                else
                    return element.FindResource("SecondTemplate") as DataTemplate;
            }
            return base.SelectTemplate(item, container);
        }
    }

然后前台xmal的CellTemplateSelector中引用选择器，代码如下

      <dxg:GridColumn x:Name="ControlPointDataTime" Binding="{Binding Path=ControlPoint,Mode=TwoWay}" Header="控制点" >
                    <dxg:GridColumn.CellTemplateSelector>
                        <local:SettingDataTemplateSelector
                                                             FirstTemplate="{StaticResource FirstTemplate}"
                                                             SecondTemplate="{StaticResource SecondTemplate}" />
                    </dxg:GridColumn.CellTemplateSelector>

                </dxg:GridColumn>

基本的需求就完成了，是不是看着很简单。其实当你觉得简单是因为你了解了DEV的一些机制，比如模板控件的命名必须是“PART_Editor”，还有绑定的地方，任何一个地方出错了前台运行显示都是不会称心如意的，这个时候你就会找不到解决的办法，从而达不到你想要的目的。上面的需求其实还有一个问题，比如：当你添加一条记录是金额控制的，此时这条记录已经添加到数据中了。如果你在界面上修改将下拉框选中改为时间控制，后面一列由于因为无法转换为时间格式，所以显示仍然有问题。此时怎么办呢，我想到了GridControl的CellValueChanged事件，当我切换控制方式时，后面一列我给它清空，这样直接让用户输入不就好了。在这里我也将代码贴出来。

   private void ViewSimulate_CellValueChanged(object sender, CellValueChangedEventArgs e)
        {
            if (e.Column == ComControlMode)
            {
                ((GridControl) e.Source.DataControl).SetCellValue(e.RowHandle,ControlPointDataTime,null);
            }
        }

到此，项目运行起来看着还行，虽然需求很简单，但也折腾了我一段时间，今后我会不断的写博客来记录我遇到的坑来和大家分享，同时也方便我自己查看。最后，我将完整的demo上传供大家参考，我用的dev的版本是15.2.4，如果你的版本和我的不一样，可以将demo中的引用删除换成自己的就可以了。

补充：当系统时间设置如下时，前台界面将显示混乱。

前台显示如下

当我发现这个问题，我一时没有更好的解决办法。前台模板DateEdit的Mask、DisplayFormatString以及MaskUseAsDisplayFormat都设为True。于是我向DevSupport寻求帮助。DevSupport给出解释如下：

The cause of the issue is that date values are stored as string values. In this scenario, DXGrid posts the values in the current culture to maintain end-user input. 
DateEdit editors, however, use an invariant culture to parse string values.
To resolve this issue, you can either store the date values as DateTime or additionally convert posted values. With your current implementation,
the second approach can be implemented by setting Binding.Converter to a custom converter

在此，我给出第二种方法的实现方式。

public class ConvertDateTime : MarkupExtension, IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            DateTime date;
            if (value is string && DateTime.TryParse((string)value, out date))
                return date.ToString(CultureInfo.InvariantCulture);
            return value;
        }

        public override object ProvideValue(IServiceProvider serviceProvider)
        {
            return this;
        }
    }

前台添加Convert转化绑定

<dxg:GridColumn x:Name="ControlPointDataTime" Binding="{Binding Path=ControlPoint,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged,NotifyOnSourceUpdated=True,Converter={local:ConvertDateTime}}" Header="控制点" >

到此，问题就解决了。

补充2：对于上面的切换控制方式时，后面一列清空的需求这里有更简单的实现方式，只需要将你自定义的类中的属性加上一些逻辑控制就好了，代码如下：

   private int _ControlMode;

        public int ControlMode
        {
            get { return _ControlMode; }
            set { _ControlMode = value;
                ControlPoint = null;
            }
        }

 将修改后的源码重新上传。

 源码下载：https://files.cnblogs.com/files/damon-xu/demo.rar