본 자료는
1. 컬럼 정렬 기능 사용 여부에 따른 차이점
2. 관련된 SmartListBox 인터페이스 및 사용 방법
3. 컬럼 정렬 Item 추가 방법
순서로 진행합니다.
기존ListBox는 추가된 데이터의 컬럼(열)을 띄어쓰기(공백)로 조절해야 하여 폰트(가로/세로가 다른 길이) 또는 한/영/숫자 조합 등의 문제로 인해 정렬을 맞추기가 매우 어렵습니다. SmartX Framework의 SmartListBox는 컬럼 설정 기능을 지원하여 간편하고 깔끔하게 데이터를 정렬할 수 있습니다.
1. 컬럼 정렬 기능 사용 여부에 따른 차이점
SmartListBox는 컬럼 정렬 기능을 지원하며, 컬럼 정렬 기능을 사용하지 않을 경우 띄어쓰기(공백)를 사용해 컬럼을 임의로 구분해 정렬해야 합니다. 아래 표에서 컬럼 정렬 기능 사용 여부에 따른 차이점을 확인해 보시기 바랍니다.
[정렬 기능 사용 여부에 따른 특징 및 표현 예시]
-
정렬 기능을 사용하지 않은 경우 컬럼 구분 방법띄어쓰기(공백)로 구분
특징1. 각 글자마다 자폭이 각각 다른 경우 정렬을 맞추기 어려움
2. 출력되는 문자열의 길이(사이즈)가 다를 경우 정렬하기 위해 공백문자를 계산하여 처리해야 하면 정확한 정렬은 힘들다.코드 예시// 띄어쓰기를 통해 컬럼을 구분
smartListBox1.AddItem("홍길동 22 MAN BIKING");표현 예시
[Left 정렬의 경우] 
[Center 정렬의 경우] -
정렬 기능을 사용한 경우 컬럼 구분 방법Array(배열)과 List
를 사용한 구분
※ DataSet을 사용한 컬럼 정렬 또한 가능특징1. ColumnStyles 속성을 사용한 컬럼별 영역 크기, 정렬 방식, Offset을 설정
2. ColumnStyles 속성을 설정하지 않고 Array, List<T>, DataSet Item을 추가할 경우 기본 컬럼 정렬 기능 제공
3. 출력되는 데이터의 길이와 관계없이 정확한 정렬코드 예시// Array(배열)에 데이터를 저장하여 컬럼을 구분
m_strArrayData[0] = "홍길동";
m_strArrayData[1] = "22";
m_strArrayData[2] = "MAN";
m_strArrayData[3] = "BIKING";
smartListBox1.AddItem(m_strArratData);
표현 예시
[Left 정렬의 경우] 
[Center 정렬의 경우]
2. 관련된 SmartListBox 인터페이스 및 사용 방법
SmartListBox에서 컬럼 정렬을 위한 인터페이스는 ColumnStyles 속성이 있으며, ColumnStyles 속성의 구성으로는 ColumnNameMapping, eColumnAlign, iColumnWidth, iOffsetColumn이 있으며, 사용법은 다음과 같습니다.
| 이름 | ColumnNameMapping |
|---|---|
| 타입 | string |
| 설명 | Column 또는 Field를 가지고 있는 DataSet 또는 List에서 각각의 속성에 ColumnName을 설정하여 출력할 Column의 순서를 설정합니다. |
| 사용 방법 C# |
// Column Style 구조체를 생성 SmartX.SmartListBox.COLUMNSTYLE[] sColumnStyle = new SmartX.SmartListbox.COLUMNSTYLE[4]; // 첫번째 컬럼의 Column Name을 DataTime으로 설정 sColumnStyle[0].ColumnNameMapping = "DataTime"; // 두번째 컬럼의 Column Name을 Number으로 설정 sColumnStyle[1].ColumnNameMapping = "Number"; // 세번째 영역의 Column Name을 Sensor으로 설정 sColumnStyle[2].ColumnNameMapping = "Sensor"; // 네번째 영역의 Column Name을 Device으로 설정 sColumnStyle[3].ColumnNameMapping = "Device"; // 설정한 Style을 SmartListBox에 적용 smartListBox1.ColumnStyle = sColumnStyle; |
| 이름 | ColumnNameMapping |
|---|---|
| 타입 | string |
| 설명 | Column 또는 Field를 가지고 있는 DataSet 또는 List에서 각각의 속성에 ColumnName을 설정하여 출력할 Column의 순서를 설정합니다. |
| 사용 방법 C# |
// Column Style 구조체를 생성 SmartX.SmartListBox.COLUMNSTYLE[] sColumnStyle = new SmartX.SmartListbox.COLUMNSTYLE[4]; // 첫번째 컬럼의 Column Name을 DataTime으로 설정 sColumnStyle[0].ColumnNameMapping = "DataTime"; // 두번째 컬럼의 Column Name을 Number으로 설정 sColumnStyle[1].ColumnNameMapping = "Number"; // 세번째 영역의 Column Name을 Sensor으로 설정 sColumnStyle[2].ColumnNameMapping = "Sensor"; // 네번째 영역의 Column Name을 Device으로 설정 sColumnStyle[3].ColumnNameMapping = "Device"; // 설정한 Style을 SmartListBox에 적용 smartListBox1.ColumnStyle = sColumnStyle; |
| 이름 | eColumnAlign |
|---|---|
| 타입 | SmartListBox.COLUMNALIGNS |
| 설명 | SmartListBox 아이템을 항목별로 iColumnWidth의 값으로 설정한 영역을 기준으로 정렬(Left, Center, Right)합니다. |
| 사용 방법 C# |
// Column Style 구조체를 생성 SmartX.SmartListBox.COLUMNSTYLE[] sColumnStyle = new SmartX.SmartListbox.COLUMNSTYLE[4]; // 첫번째 컬럼의 정렬 기준을 우측 정렬로 사용 sColumnStyle[0].eColumnAlign = SmartX.SmartListBox.COLUMNALIGNS.RIGHT; // 두번째 컬럼의 정렬 기준을 중앙 정렬로 사용 sColumnStyle[1].eColumnAlign = SmartX.SmartListBox.COLUMNALIGNS.CENTER; // 세번째 컬럼의 정렬 기준을 우측 정렬로 사용 sColumnStyle[2].eColumnAlign = SmartX.SmartListBox.COLUMNALIGNS.RIGHT; // 네번째 컬럼의 정렬 기준을 좌측 정렬로 사용 sColumnStyle[2].eColumnAlign = SmartX.SmartListBox.COLUMNALIGNS.LEFT; // 설정한 Style을 SmartListBox에 적용 smartListBox1.ColumnStyle = sColumnStyle; |
| 이름 | eColumnAlign |
|---|---|
| 타입 | SmartListBox.COLUMNALIGNS |
| 설명 | SmartListBox 아이템을 항목별로 iColumnWidth의 값으로 설정한 영역을 기준으로 정렬(Left, Center, Right)합니다. |
| 사용 방법 C# |
// Column Style 구조체를 생성 SmartX.SmartListBox.COLUMNSTYLE[] sColumnStyle = new SmartX.SmartListbox.COLUMNSTYLE[4]; // 첫번째 컬럼의 정렬 기준을 우측 정렬로 사용 sColumnStyle[0].eColumnAlign = SmartX.SmartListBox.COLUMNALIGNS.RIGHT; // 두번째 컬럼의 정렬 기준을 중앙 정렬로 사용 sColumnStyle[1].eColumnAlign = SmartX.SmartListBox.COLUMNALIGNS.CENTER; // 세번째 컬럼의 정렬 기준을 우측 정렬로 사용 sColumnStyle[2].eColumnAlign = SmartX.SmartListBox.COLUMNALIGNS.RIGHT; // 네번째 컬럼의 정렬 기준을 좌측 정렬로 사용 sColumnStyle[2].eColumnAlign = SmartX.SmartListBox.COLUMNALIGNS.LEFT; // 설정한 Style을 SmartListBox에 적용 smartListBox1.ColumnStyle = sColumnStyle; |
| 이름 | iColumnWidth |
|---|---|
| 타입 | int |
| 설명 | 각 컬럼에 정렬될 항목의 영역 크기를 설정합니다. |
| 사용 방법 C# |
// Column Style 구조체를 생성 SmartX.SmartListBox.COLUMNSTYLE[] sColumnStyle = new SmartX.SmartListbox.COLUMNSTYLE[4]; // 첫번째 컬럼 영역의 넓이를 90으로 설정 sColumnStyle[0].iColumnWidth = 90; // 두번째 컬럼 영역의 넓이를 40으로 설정 sColumnStyle[1].iColumnWidth = 40; // 세번째 컬럼 영역의 넓이를 100으로 설정 sColumnStyle[2].iColumnWidth = 100; // 네번째 컬럼 영역의 넓이를 95으로 설정 sColumnStyle[2].iColumnWidth = 95; // 설정한 Style을 SmartListBox에 적용 smartListBox1.ColumnStyle = sColumnStyle; |
| 이름 | iColumnWidth |
|---|---|
| 타입 | int |
| 설명 | 각 컬럼에 정렬될 항목의 영역 크기를 설정합니다. |
| 사용 방법 C# |
// Column Style 구조체를 생성 SmartX.SmartListBox.COLUMNSTYLE[] sColumnStyle = new SmartX.SmartListbox.COLUMNSTYLE[4]; // 첫번째 컬럼 영역의 넓이를 90으로 설정 sColumnStyle[0].iColumnWidth = 90; // 두번째 컬럼 영역의 넓이를 40으로 설정 sColumnStyle[1].iColumnWidth = 40; // 세번째 컬럼 영역의 넓이를 100으로 설정 sColumnStyle[2].iColumnWidth = 100; // 네번째 컬럼 영역의 넓이를 95으로 설정 sColumnStyle[2].iColumnWidth = 95; // 설정한 Style을 SmartListBox에 적용 smartListBox1.ColumnStyle = sColumnStyle; |
| 이름 | iOffsetColumn |
|---|---|
| 타입 | int |
| 설명 | 정렬을 기준으로 Offset을 설정합니다. |
| 사용 방법 C# |
// Column Style 구조체를 생성 SmartX.SmartListBox.COLUMNSTYLE[] sColumnStyle = new SmartX.SmartListbox.COLUMNSTYLE[4]; // 첫번째 컬럼의 Offset을 0으로 설정 sColumnStyle[0].iOffsetColumn = 0; // 두번째 컬럼의 Offset을 0으로 설정 sColumnStyle[1].iOffsetColumn = 0; // 세번째 컬럼의 Offset을 0으로 설정 sColumnStyle[2].iOffsetColumn = 0; // 네번째 컬럼의 Offset을 10으로 설정 sColumnStyle[2].iOffsetColumn = 10; // 설정한 Style을 SmartListBox에 적용 smartListBox1.ColumnStyle = sColumnStyle; |
| 이름 | iOffsetColumn |
|---|---|
| 타입 | int |
| 설명 | 정렬을 기준으로 Offset을 설정합니다. |
| 사용 방법 C# |
// Column Style 구조체를 생성 SmartX.SmartListBox.COLUMNSTYLE[] sColumnStyle = new SmartX.SmartListbox.COLUMNSTYLE[4]; // 첫번째 컬럼의 Offset을 0으로 설정 sColumnStyle[0].iOffsetColumn = 0; // 두번째 컬럼의 Offset을 0으로 설정 sColumnStyle[1].iOffsetColumn = 0; // 세번째 컬럼의 Offset을 0으로 설정 sColumnStyle[2].iOffsetColumn = 0; // 네번째 컬럼의 Offset을 10으로 설정 sColumnStyle[2].iOffsetColumn = 10; // 설정한 Style을 SmartListBox에 적용 smartListBox1.ColumnStyle = sColumnStyle; |
3. 컬럼 정렬 Item 추가 방법
ColumnStyle을 설정한 뒤 Column Item을 추가하는 방법은 크게 3가지 방식이 있습니다. 자세한 방법은 아래의 CASE들을 확인하시기 바랍니다.
-
[CASE-1] Array(배열)에 Column Item을 추가하여 설정
string 타입의 배열에 Column Item을 추가하여 AddItem() 메소드를 사용해 Item을 추가합니다.
예시 코드private void AddItemButton_Click(object sender, EventArgs e)
{
// Column Item이 추가될 배열을 생성 Column의 개수만큼 배열의 크기를 설정}
string[] m_strArrayData = new string[4];
// 각 Column에 추가될 Item을 배열에 추가
m_strArrayData[0] = "IEC667-Series";
m_strArrayData[1] = "IEC1000-Series";
m_strArrayData[2] = "Smart I/O";
m_strArrayData[3] = "SmartX Framework";
// Column Item이 추가된 배열을 AddItem메소드를 사용하여 출력
smartListBox1.AddItem(m_strArrayData);
-
[CASE-2] List<T>에 Column Item을 추가하여 설정
List<string>에 Column Item을 추가하여 AddItem() 메소드를 사용해 Item을 추가합니다.
예시 코드private void AddItemButton_Click(object sender, EventArgs e)
{
// // Column Item이 추가될 배열을 생성 Column의 개수만큼 배열의 크기를 설정}
List<string> m_strListData = new List<string>();
// 각 Column에 추가될 Item을 리스트에 추가
m_strListData.Add("IEC667-Series");
m_strListData.Add("IEC1000-Series");
m_strListData.Add("Smart I/O");
m_strListData.Add("SmartX Framework");
// Column Item이 추가된 배열을 AddItem메소드를 사용하여 출력
smartListBox1.AddItem(m_strListData);
-
[CASE-3] DataSet을 사용한 Column Item 추가
DataSet을 사용하여 Item Table을 작성한 뒤 해당 Table을 DataSource 속성에 설정하여 Item을 추가합니다.
예시 코드private void AddItemButton_Click(object sender, EventArgs e)
{
DataSet lstData4 = new DataSet("HR_DataSet");}
lstData4.Tables.Add("Employee");
DataColumn colName = new DataColumn("DateTime", typeof(string));
DataColumn colAge = new DataColumn("Number", typeof(int));
DataColumn colNote = new DataColumn("Item", typeof(string));
lstData4.Tables["Employee"].Columns.Add(colName);
lstData4.Tables["Employee"].Columns.Add(colAge);
lstData4.Tables["Employee"].Columns.Add(colNote);
DataRow dataRecord;
dataRecord = lstData4.Tables["Employee"].NewRow();
dataRecord["DateTime"] = DateTime.Now.ToLongTimeString();
dataRecord["Number"] = "0";
dataRecord["Item"] = "SmartX-1";
lstData4.Tables["Employee"].Rows.Add(dataRecord);
lsbCustomStyle1.DataSource = lstData4.Tables["Employee"];
