# Customization

## Content



Sizer lets you customize the look of the Sizer control to change the appearance of your application. Let us discuss how to customize the appearance of Sizer control.

## Apply 3-D Border

The Sizer control lets you customize the border of grid, rows, and columns by changing their style and color. You can create a styled border for the rows and columns of the Sizer control by using **Paint** event and **Draw3DBorder** method of the [C1Sizer](/componentone/docs/win/online-sizer/) class. The Paint event repaints the control's rows and columns and DrawBorder3D method draws an etched three dimensional border around the rows and columns of the Sizer control.

The following image shows the Sizer control with 3-D Border.

![](https://cdn.mescius.io/document-site-files/images/e1ce2c2c-9be8-44f5-8cf2-c228504644a5/images/3dbordesr.png)

Subscribe to Paint event of the C1Sizer class and add the following code to the **C1Sizer\_Paint** Event Handler to create 3-D borders. This example uses the sample created in the [Quick Start](/componentone/docs/win/online-sizer/quickstart) topic.

```csharp
private void C1Sizer1_Paint(object? sender, PaintEventArgs e)
{
     //Paint 3D border for each cell of the Sizer Grid
     foreach (Band row in this.c1Sizer1.Grid.Rows)
     {
         //get row bounds
         Rectangle rcrow = row.Bounds;
         foreach (Band col in this.c1Sizer1.Grid.Columns)
         {
             //get col bounds
             Rectangle rccol = col.Bounds;
             //get the intersecting rectangle for the Row and Col
             Rectangle rccel = Rectangle.Intersect(rcrow, rccol);
             //Draw 3D border for the intersecting rectangle
             ControlPaint.DrawBorder3D(e.Graphics, rccel, Border3DStyle.Etched);
         }
     }
}
```

## Resize Fonts in Sizer

By default, Sizer resizes the controls positioned within the grid but not their font. However, there may be a scenario where you need to resize the fonts as the controls gets resized. To achieve this, you can override the **OnResizeEnd** method to set the **Font** property.

The following GIF shows how the fonts and controls gets resized, when you resize the Sizer control.

![](https://cdn.mescius.io/document-site-files/images/e1ce2c2c-9be8-44f5-8cf2-c228504644a5/images/resizefontc1sizer.gif)

To resize font in Sizer control, use the following code.

```csharp
private Size _cs;
private float _fs;
public Form1()
{
  InitializeComponent();
  _fs = Font.Size;
  _cs = ClientSize;
  AutoScaleMode = System.Windows.Forms.AutoScaleMode.None;
}
protected override void OnResizeEnd(EventArgs e)
{
   var sz = ClientSize;
   var factor = Math.Min(sz.Width / (float)_cs.Width, sz.Height / (float)_cs.Height);
   //updating Font property explicitly
   Font = new Font(Font.Name, (float)(_fs * factor));
   base.OnResizeEnd(e);
}
```