# Appearance and Styling

Blazor Edition provides a set of native UI controls built for Blazor such as FlexGrid, Chart, ListView, and input controls including AutoComplete and ComboBox.

## Content



Gauges provide several properties to customize the appearance of the control. You can change the overall look of the Gauge Face, and alter text color of Value, Min and Max properties. Furthermore, you can change the color of the Gauge Pointer.

The following sections cover the appearance customization and styling of the Gauge controls in detail.

## Styling and Customizing Face

The [C1Gauge](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Gauge/C1.Blazor.Gauge.C1Gauge.html) class provides different properties to change the look and feel of the face of the gauge. The following table lists properties that help to style and customize appearance of the face of the gauges.

| **Property** | **Description** |
| --- | --- |
| **[FaceColor](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Gauge/C1.Blazor.Gauge.C1Gauge.FaceColor.html)** | Change the color of face. |
| **[FaceBorderColor](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Gauge/C1.Blazor.Gauge.C1Gauge.FaceBorderColor.html)** | Change the border color of face. |
| **[FaceBorderWidth](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Gauge/C1.Blazor.Gauge.C1Gauge.FaceBorderWidth.html)** | Change the border width of face. |

The following images showcase the styled face of gauges.

| **Linear Gauge** | **Radial Gauge** |
| --- | --- |
| ![](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/lineargauges-face-style.png) | ![](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/radialgauge-facestyle.png) |

The following code sample shows how to style the face of the Gauge control.

**LINEAR GAUGE**

```LINEAR
<C1LinearGauge Value="25" TextVisibility="GaugeTextVisibility.All" FaceBorderWidth="5" 
FaceBorderColor="C1.Blazor.Core.C1Color.PaleVioletRed" FaceColor="C1.Blazor.Core.C1Color.Bisque"></C1LinearGauge>
```

**RADIAL GAUGE**

```RADIAL
<C1RadialGauge Value="50" TextVisibility="GaugeTextVisibility.All" FaceBorderWidth="5" 
FaceBorderColor="C1.Blazor.Core.C1Color.PaleVioletRed" FaceColor="C1.Blazor.Core.C1Color.Bisque"></C1RadialGauge>
```

## Styling Value

The **C1Gauge** class provides the [ValueTextColor](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Gauge/C1.Blazor.Gauge.C1Gauge.ValueTextColor.html) property to change the font color of the value text. The following image displays the styled values of gauges.

| **Linear Gauge** | **Radial Gauge** |
| --- | --- |
| ![](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/lineargauges-value-color.png) | ![](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/radialgauge-valuecolor.png) |

The following code snippet show how to set the **ValueTextColor** property.

**LINEAR GAUGE**

```LINEAR
<C1LinearGauge Value="25" ValueTextColor="C1.Blazor.Core.C1Color.White" TextVisibility="GaugeTextVisibility.All"></C1LinearGauge>
```

**RADIAL GAUGE**

```RADIAL
<C1RadialGauge Value="50" TextVisibility="GaugeTextVisibility.All" ValueTextColor="C1.Blazor.Core.C1Color.BlueViolet"></C1RadialGauge>
```

## Styling Max and Min

The **C1Gauge** class provides the [MinTextColor](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Gauge/C1.Blazor.Gauge.C1Gauge.MinTextColor.html) and [MaxTextColor](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Gauge/C1.Blazor.Gauge.C1Gauge.MaxTextColor.html) properties to change the font color of the minimum and maximum value text. The following image displays the styled minimum and maximum value texts of gauges.

| **Linear Gauge** | **Radial Gauge** |
| --- | --- |
| ![](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/lineargauges-minmax-style.png) | ![](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/radialgauge-minmaxcolor.png) |

The following code snippet show how to set the text color of min and max values.

**LINEAR GAUGE**

```LINEAR
<C1LinearGauge Value="25" Min="1" Max="100" MinTextColor="C1.Blazor.Core.C1Color.Blue"
 MaxTextColor="C1.Blazor.Core.C1Color.Magenta" TextVisibility="GaugeTextVisibility.All"></C1LinearGauge>
```

**RADIAL GAUGE**

```RADIAL
<C1RadialGauge Value="50" TextVisibility="GaugeTextVisibility.All" Min="1" Max="100" 
MinTextColor="C1.Blazor.Core.C1Color.Blue" MaxTextColor="C1.Blazor.Core.C1Color.Magenta"></C1RadialGauge>
```

## Styling Pointer

The **C1Gauge** class provides the [PointerColor](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Gauge/C1.Blazor.Gauge.C1Gauge.PointerColor.html) property to change the color of the pointer. The following image displays the styled pointer of gauges.

| **Linear Gauge** | **Radial Gauge** |
| --- | --- |
| ![](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/lineargauges-pointer-color.png) | ![](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/radialgauge-pointercolor.png) |

The following code snippet show how to set the pointer color.

**LINEAR GAUGE**

```LINEAR
<C1LinearGauge Value="25" PointerColor="C1.Blazor.Core.C1Color.Beige" TextVisibility="GaugeTextVisibility.All"></C1LinearGauge>
```

**RADIAL GAUGE**

```RADIAL
<C1RadialGauge Value="50" TextVisibility="GaugeTextVisibility.All" PointerColor="C1.Blazor.Core.C1Color.Beige"></C1RadialGauge>
```