# Split Style and Appearance ## Content List provides you the flexibility to apply styling to specific splits. Besides this, you can also apply styling to a specific column within a split as discussed in the following sections. ## Styling List enables you to set background color, font styles, and much more. Let us explore how to apply styling to specific splits within a list. ### Apply styling to a specific split List not only allows you to create splits, but also allows you to apply styling to the data elements specific to a split. To apply styling on data cells in a split, you can use [Style](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Style.html) property of the Split class. Moreover, you can apply styling to various elements of a split, such as footer, caption, and heading by using [FooterStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.FooterStyle.html), [CaptionStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.CaptionStyle.html), and [HeadingStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.HeadingStyle.html) properties of the **Split** class, respectively. The following image showcases styling applied to the elements of first split in the List control. ![Split styling](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/stylefirstsplit.png) The following code demonstrates how to apply styling to elements of the first split in the List control. ```csharp Font myfont; Font myfont1; Font myfont2; Font myfont3; myfont = new Font(this.c1List1.Splits[0].Style.Font, FontStyle.Bold); this.c1List1.Splits[0].Style.Font = myfont; //set caption style myfont1 = new Font(this.c1List1.Splits[0].CaptionStyle.Font, FontStyle.Bold); this.c1List1.Splits[0].CaptionStyle.Font = myfont1; //set heading style myfont2 = new Font(this.c1List1.Splits[0].HeadingStyle.Font, FontStyle.Bold); this.c1List1.Splits[0].HeadingStyle.Font = myfont2; //set footer style myfont3 = new Font(this.c1List1.Splits[0].FooterStyle.Font, FontStyle.Bold); this.c1List1.Splits[0].FooterStyle.Font = myfont3; ``` ### Apply styling to a specific column in a split List enables you to apply styling to specific columns within a split by using [DisplayColumns](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.DisplayColumns.html) property of the Split class. The **DisplayColumns** property gets a collection of display columns within a split. The following image showcases styling applied to the elements of first column in the first split. ![Split styling](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/splitfirstcolumnfirstsplit.png) The following code demonstrates how to apply styling to a specific column in a split by using Style, [HeadingStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.HeadingStyle.html), and [FooterStyle](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.C1DisplayColumn.FooterStyle.html) properties of the [C1DisplayColumns](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Split.DisplayColumns.html) class. ```csharp Font myfont; Font myfont1; Font myfont2; //set font style of data cells in the split myfont = new Font(this.c1List1.Splits[0].DisplayColumns[0].Style.Font, FontStyle.Bold); this.c1List1.Splits[0].DisplayColumns[0].Style.Font = myfont; //set font style of heading myfont1 = new Font(this.c1List1.Splits[0].DisplayColumns[0].HeadingStyle.Font, FontStyle.Bold); this.c1List1.Splits[0].DisplayColumns[0].HeadingStyle.Font = myfont1; //rset font style of footer myfont2 = new Font(this.c1List1.Splits[0].DisplayColumns[0].FooterStyle.Font, FontStyle.Bold); this.c1List1.Splits[0].DisplayColumns[0].FooterStyle.Font = myfont2; ``` ### Set Background Color You can set the background color of a specific split as well as a specific column within a split. To do so, you can use the [BackColor](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Style.BackColor.html) property of the Style class. The following image shows the List control after setting the background color of first column in the first split. ![Split styling](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/splitbackcolor.png) Use the following code to set the background color of the first column in the first split. ```csharp this.c1List1.Splits[0].DisplayColumns[0].Style.BackColor = System.Drawing.Color.Lavender; ``` ## Appearance You can also customize the split elements by setting their alignments. Let us discuss how you can customize the appearance of the split elements. ### Set alignment of elements in a specific split The Style class provides [HorizontalAlignment](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Style.HorizontalAlignment.html) and [VerticalAlignment](/componentone/api/win/online-list/dotnet-api/C1.Win.List.10/C1.Win.List.Style.VerticalAlignment.html) properties to set the vertical and horizontal alignments, respectively. Using these properties, you can set the alignment of various elements in the split as shown in the following image. ![Split styling](https://cdn.mescius.io/document-site-files/images/1e4aa2c8-7f81-4e43-8ed4-f673f1e68381/images/splitalignment.png) To set horizontal alignment of elements in the split, use the following code. ```csharp //set horizontal alignment of split elements this.c1List1.Splits[0].DisplayColumns[0].Style.HorizontalAlignment = C1.Win.C1List.AlignHorzEnum.Center; this.c1List1.Splits[0].DisplayColumns[0].HeadingStyle.HorizontalAlignment = C1.Win.List.AlignHorzEnum.Center; this.c1List1.Splits[0].DisplayColumns[0].FooterStyle.HorizontalAlignment = C1.Win.List.AlignHorzEnum.Center; this.c1List1.Splits[0].DisplayColumns[0].Style.HorizontalAlignment = C1.Win.List.AlignHorzEnum.Center; ``` ## See Also [Style Cells](/componentone/docs/win/online-list/stylingandappearance/stylecells)