[Devexpress] GridControl 자동 번호 매기기

Devexpress GridControl 의 TableView에서 행이 추가될 때마다 컬럼의 숫자가 자동 증가하도록 구현한 코드입니다.

Converter 생성

IValueConverter 인터페이스를 상속받아 IndexFromOneConverter 클래스를 생성합니다.

using System;
using System.Globalization;
using System.Windows.Data;

/// <summary>
/// GridControl의 자동 생성 인덱스를 1 부터로 변환하는 컨버터
/// </summary>
namespace IVM.Studio.Utils
{
    public class IndexFromOneConverter : IValueConverter
    {
        /// <summary>
        /// 자동 증가되도록 1을 더해준다.
        /// </summary>
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return (int)value + 1;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return value;
        }
    }
}

적용

위에서 만든 Converter를 불러와서 GridControl에 적용합니다.

<Window x:Class="Test.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  xmlns:util="clr-namespace:Test.Utils"
  xmlns:prism="http://prismlibrary.com/"
  prism:ViewModelLocator.AutoWireViewModel="True"
  Title="Test" Height="600" Width="560">

  <Window.Resources>
    <utils:IndexFromOneConverter x:Key="IndexFromOneConverter"/>
  </Window.Resources>

  <Grid Margin="10">
    <dxg:GridControl ItemsSource="{Binding TestInfos}" SelectedItem="{Binding SelectedTestInfo}" SelectionMode="Row" ShowBorder="True" RenderOptions.EdgeMode="Aliased">
      <dxg:GridControl.View>
        <dxg:TableView AutoWidth="True"/>
      </dxg:GridControl.View>

      <dxg:GridControl.Columns>
        <dxg:GridColumn Header="#" Width="40">
          <dxg:GridColumn.CellTemplate>
            <DataTemplate>
              <TextBlock Text="{Binding RowData.RowHandle.Value, Converter={StaticResource IndexFromOneConverter}}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
            </DataTemplate>
          </dxg:GridColumn.CellTemplate>
        </dxg:GridColumn>
        <dxg:GridColumn Header="Note" Width="100" FieldName="Note"/>
        <dxg:GridColumn Header="Content" Width="200" FieldName="Content"/>
        <dxg:GridColumn Header="Area" Width="200" FieldName="Area"/>
      </dxg:GridControl.Columns>
    </dxg:GridControl>
  </Grid>
</Window>