Customize Appearance

Although, Xuni controls match the native controls on all three platforms by default and are designed to work with both: light and dark themes available on all platforms. But, there are several properties to customize the appearance of the FlexPie control. You can change the background color of the FlexPie, the plot area, the color and width of borders and the thickness of margins by simply setting the desired value in the following properties:

BackgroundColor: Changes the background color of the entire chart.
PlotAreaBackgroundColor: Changes the background color of the plot area.
BorderColor: Changes the color of the chart border.
BorderWidth: Changes the width of the chart border.

The image below shows the how the FlexPie appears after these properties have been set.

The following code examples demonstrate how to set these properties in C# and XAML. These examples use the sample created in the Quick Start section.

In Code

C#	Copy Code
chart.PlotAreaBackgroundColor = Color.FromHex("#AFEEEE"); chart.BorderColor = Color.FromHex("#00c7cc"); chart.BorderWidth = 10;

In XAML

XAML	Copy Code
<xuni:FlexPie x:Name="chart" ItemsSource="{Binding Data}" BindingName="Name" Binding ="Value" PlotAreaBackgroundColor="#AFEEEE" BorderColor="#00c7cc" BorderWidth = "10" Grid.Row="1" Grid.ColumnSpan="2"> </xuni:FlexPie>

XAML

Copy Code

<xuni:FlexPie x:Name="chart" ItemsSource="{Binding Data}" BindingName="Name" Binding ="Value"
 PlotAreaBackgroundColor="#AFEEEE" BorderColor="#00c7cc"
 BorderWidth = "10" Grid.Row="1" Grid.ColumnSpan="2">
</xuni:FlexPie>