# Using the C1List Designer

## Content

**C1List Designer** provides various options which can be used to configure the list's behavior and appearance. Besides, it also lets you preview the appearance of the list.

![C1List Designer](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/c1list-designer.png)

There are three ways in which you can access the **C1List Designer** at design time as described below.

* **Using Smart Tag**: Click the smart tag icon(![smart tag](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/smart-tag.png)) in the upper right corner of the list and select **Designer**... from the **C1List Tasks** smart tag panel.
* **Using Properties Window**: Select the list, go to the **Properties** window and click the ellipsis button (…) next to the **Columns** property.
* **Using Context Menu**: Right-click the list and select **Design..** from the context menu.

## List Designer Elements

**C1List Designer** allows list fields to be set up easily at design time instead of having to write the code. In the **C1List Designer**, the right pane displays the list fields and the left pane displays three tabs, namely, **Split**, **Column**, and **Display Column**. The **Split** tab provides various properties for changing the settings of each split. The **Column** tab allows you to set various column-specific properties and provides access to **Value Collection Editor**. The **Display Column** tab enables you to configure columns in a split. Besides these, the designer also provides toolbars which are discussed in the following sections.

### Tabs

The **C1List Designer** contains three tabs namely, **Split**, **Column**, and **Display Column** which provides various options to customize splits, columns, and display columns, respectively.

### Split Tab

The **Split** tab provides access to most of properties specific to a Split. In List, splits can be created to present data in multiple horizontal or vertical panes.
The following SplitCollection object properties are available in the **C1List Designer**'s **Split** tab:

| **Property** | **Description** |
| -------- | ----------- |
| [AllowColMove](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.AllowColMove.html) | Gets or sets a value indicating the ability to move columns. |
| [AllowColSelect](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.AllowColSelect.html) | Gets or sets a value indicating the ability to select columns. |
| [AllowFocus](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.AllowFocus.html) | Gets or sets a value indicating whether the split can receive focus. |
| [AllowHorizontalSizing](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.AllowHorizontalSizing.html) | Gets or sets a value indicating whether a user is allowed to resize horizontal splits. |
| [AllowRowSizing](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.AllowRowSizing.html) | Gets or sets how interactive row resizing is performed. |
| [AllowVerticalSizing](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.AllowVerticalSizing.html) | Gets or sets a value indicating whether a user is allowed to resize vertical splits. |
| [AlternatingRowStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.AlternatingRowStyle.html) | Gets or sets a value indicating whether the split uses the OddRowStyle for odd-numbered rows and EvenRowStyle for even-numbered rows. |
| [Caption](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.Caption.html) | Gets or sets the caption. |
| [CaptionHeight](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.CaptionHeight.html) | Gets or sets the height of the caption. |
| [ColumnCaptionHeight](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.ColumnCaptionHeight.html) | Gets or sets the height of the column captions. |
| [ColumnFooterHeight](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.ColumnFooterHeight.html) | Gets or sets the height of column footers. |
| [DisplayColumns](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.DisplayColumns.html) | Gets a collection of C1DisplayColumn objects. |
| [EvenRowStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.EvenRowStyle.html) | Gets or sets the Style object that controls the appearance of an even-numbered row when using AlternatingRows. |
| [ExtendRightColumn](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.ExtendRightColumn.html) | Gets or sets a value that determines how the last column will extend to fill the dead area of the split. |
| [FetchRowStyles](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.FetchRowStyles.html) | Gets or sets a value indicating whether the FetchRowStyle event will be raised. |
| [FooterStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.FooterStyle.html) | Gets or sets the Style object that controls the appearance of column footers. |
| [GroupColumns](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.GroupColumns.html) | Gets a collection of C1DisplayColumn objects. |
| [HeadingStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.HeadingStyle.html) | Gets or sets the Style object that controls the appearance of the list's column headers. |
| [HighLightRowStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.HighLightRowStyle.html) | Gets or sets the Style object that controls the current row/cell when the **MarqueeStyle** is set to **Highlight Row/Cell**. |
| [HorizontalScrollGroup](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.HorizontalScrollGroup.html) | Gets or sets the group which synchronizes horizontal scrolling between splits. |
| [HScrollBar](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.HScrollBar.html) | Gets the HBar object that controls the appearance of the horizontal scrollbar. |
| [Name](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.Name.html) | Gets or sets the name of a split. |
| [OddRowStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.OddRowStyle.html) | Gets or sets the Style object that controls the appearance of an odd-numbered row when using AlternatingRows. |
| [RecordSelectorStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.RecordSelectorStyle.html) | Gets or sets the Style object that controls the appearance of the RecordSelectors. |
| [SelectedStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.SelectedStyle.html) | Gets or sets the Style object that controls the appearance of selected rows and columns. |
| [SplitSize](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.SplitSize.html) | Gets or sets the size of a split. |
| [SplitSizeMode](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.SplitSizeMode.html) | Gets or sets a value indicating how the **SplitSize** property is used to determine the actual size of a split. |
| [Style](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Style.html) | Gets or sets the root Style object for the Split. |
| [VerticalScrollGroup](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.VerticalScrollGroup.html) | Gets or sets the group which synchronizes vertical scrolling between splits. |
| [VScrollBar](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.VScrollBar.html) | Gets the VBar object that controls the appearance of the vertical scrollbar. |

### Column Tab

The following column-specific properties are available in the **C1List Designer** of the **Column** tab:

| **Property** | **Description** |
| -------- | ----------- |
| [Caption](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DataColumn.Caption.html) | Gets or sets the text in the column header. |
| [DataField](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DataColumn.DataField.html) | Gets or sets the database field name for a column. |
| [DataWidth](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DataColumn.DataWidth.html) | Gets or sets the maximum number of characters which may be entered for cells in this column. |
| [DefaultValue](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DataColumn.DefaultValue.html) | Gets or sets the default value for a column when a new row is added by the list. |
| [FooterText](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DataColumn.FooterText.html) | Gets or sets the text displayed in the column footer. |
| [NumberFormat](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DataColumn.NumberFormat.html) | Gets or sets the formatting string for a column. |
| [ValueItems](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DataColumn.NumberFormat.html) | Gets the ValueItems object for this column. |

### Display Column Tab

The following display column properties are available in the **C1List Designer** in the **Display Column** tab:

| **Property** | **Description** |
| -------- | ----------- |
| [AllowSizing](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.AllowSizing.html) | Gets or sets a value indicating whether column resizing is allowed. |
| [ButtonFooter](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.ButtonFooter.html) | Gets or sets a value indicating whether a column footer will act like a button. |
| [ButtonHeader](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.ButtonHeader.html) | Gets or sets a value indicating whether a column header will act like a button. |
| [ColumnDivider](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.ColumnDivider.html) | Gets or sets the style of the border drawn between columns. |
| [FetchStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.FetchStyle.html) | Gets or sets a value indicating whether the **FetchCellStyle** event will be raised for a column. |
| [FooterDivider](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.FooterDivider.html) | Gets or sets a value indicating whether to display the column divider in the footer area. |
| [FooterStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.FooterStyle.html) | Gets or sets the Style object that controls the appearance of column footers. |
| [HeaderDivider](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.HeaderDivider.html) | Gets or sets a value indicating whether to display the column divider in the header area. |
| [HeadingStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.HeadingStyle.html) | Gets or sets the Style that controls the appearance of the column headers. |
| [Height](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.Height.html) | Gets or sets the height of the column. |
| [MinWidth](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.MinWidth.html) | Gets or sets the minimum width a column can be resized to when in SpringMode. |
| [Name](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.Name.html) | Gets the caption of the associated C1DataColumn objects. |
| [OwnerDraw](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.OwnerDraw.html) | Gets or sets a value indicating whether cells in this column are drawn by the user in the **OwnerDrawCell** event. |
| [Style](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1Combo.Style.html) | Gets or sets the root Style for this column. |
| [Visible](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.Visible.html) | Gets or sets a value indicating the visibility of a column. |
| [Width](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.Width.html) | Gets or sets the width of a column. |

### Toolbars

The **C1List Designer** provides three toolbars that can be used to customize the list's content and appearance as discussed in the following sections.

### Formatting Toolbar

The **Formatting** toolbar allows you to quickly customize the appearance of the column content, including text, alignment, and color.

![Formatting Toolbar](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/format-toolbar.png)

The following table provides a brief description of the options provided by the **Formatting** toolbar:

| **Command Button Name** | **Command Button** | **Description** |
| ------------------- | -------------- | ----------- |
| Font | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/f1.png) | The drop-down allows youto choose the font. |
| Font Size | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/f2.png) | Sets the font size. |
| Bold | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/f3.png) | Select the Bold button to bold the text in the chosen column. |
| Italic | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/f4.png) | Select the Italic button to italicize the text in the chosen column. |
| Underline | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/f5.png) | Underlines the text in the chosen column. |
| Align Left | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/f6.png) | Horizontally aligns the chosen column to the left of the cell. |
| Horizontally Center | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/f7.png) | Horizontally aligns the content of the chosen column to the center of the cell. |
| Align Right | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/f8.png) | Horizontally aligns the content of the chosen column to the right of the cell. |
| Align Top | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/f9.png) | Vertically aligns the content of the chosen column to the top of the cell. |
| Vertically Center | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/f10.png) | Vertically aligns the content of the chosen column to the center of the cell. |
| Align Bottom | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/f11.png) | Vertically aligns the content of the chosen column to the bottom of the cell. |
| Set Background Color | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/f12.png) | Sets the background color of the cells in the chosen column. |
| Set Foreground Color | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/f13.png) | Sets the foreground color of the cells in the chosen column. |
| Apply to Header when Checked | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/f14.png) | Applies formatting changes to the header, and not the body cells, of the chosen column. |

### Layout Toolbar

The **Layout** toolbar allows you to quickly customize the list's layout by showing splits, column headers, and much more. Besides these, it also allows you to load and save layouts.

![Layout toolbar](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/layout-toolbar.png)

The **Layout** toolbar consists of the following commands:

| **Command Button Name** | **Command Button** | **Description** |
| ------------------- | -------------- | ----------- |
| Load Layout | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/l1.png) | Loads a previously saved list layout. |
| Save Layout | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/l2.png) | Saves the current list layout to a file. |
| Insert Horizontal Split | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/l4.png) | Inserts a horizontal split at the current selected place in the list. |
| Insert Vertical Split | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/l3.png) | Inserts a vertical split at the current selected place in the list. |
| Delete Horizontal | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/l6.png) | Deletes the selected horizontal split. |
| Delete Vertical | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/l5.png) | Deletes the selected Vertical split. |
| Column Headers | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/l7.png) | Shows column headers in the list. By, default this is selected. |

### Columns Toolbar

The **Columns** toolbar allows you to quickly add and delete columns, and change column width.

![Column Toolbar](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/column-toolbar.png)

The **Columns** toolbar consists of the following commands:

| **Command Button Name** | **Command Button** | **Description** |
| ------------------- | -------------- | ----------- |
| Column | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/c1.png) | This drop-down list allows you to select the column you wish to view or modify. |
| Insert Column | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/c2.png) | Inserts a new column at the current location. |
| Remove Column | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/c3.png) | Deletes the currently selected column. |
| Make all columns the same width | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/c4.png) | Makes all columns of the same width. |
| Increase column width | ![icon](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/c5.png) | Increases the width of the selected column. |
| Decrease column width | ![](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/c5.png) | Decreases the width of the selected column. |

>type=note
> **Note**: WinForms .NET Edition does not include rich design-time support yet. We will enhance it in future releases.