Header and Footer

You can add a title to the FlexPie control by setting its HeaderText property. Besides a title, you may also set a footer by setting the FooterText property.

There are also some additional properties to customize header and footer text in a FlexPie.

HeaderFont: Lets you select the font size and attributes for the header text.
HeaderTextColor: Lets you select the text color for the header text.
FooterFont: Lets you select the font size and attributes for the footer text.
FooterTextColor: Lets you select the text color for the footer text.

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

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

In Code

Example Title	Copy Code
chart.HeaderText = "Fruit Consumption"; chart.HeaderFont = Font.SystemFontOfSize(30); chart.HeaderTextColor = Color.FromHex("#FF7373"); chart.FooterText = "*Random Data by ComponentOne"; chart.FooterFont = Font.SystemFontOfSize(20); chart.FooterTextColor = Color.FromHex("#088DA5");

Example Title

Copy Code

chart.HeaderText = "Fruit Consumption";
chart.HeaderFont = Font.SystemFontOfSize(30);
chart.HeaderTextColor = Color.FromHex("#FF7373");

chart.FooterText = "*Random Data by ComponentOne";
chart.FooterFont = Font.SystemFontOfSize(20);
chart.FooterTextColor = Color.FromHex("#088DA5");

In XAML

XAML	Copy Code
<xuni:FlexPie x:Name="chart" ItemsSource="{Binding Data}" BindingName="Name" Binding ="Value" HeaderText="Fruit Consumption" HeaderTextColor="#FF7373" HeaderFont="30" FooterText="*Random Data by ComponentOne" FooterTextColor="#088DA5" FooterFont="20" Grid.Row="1" Grid.ColumnSpan="2"> </xuni:FlexPie>

XAML

Copy Code

<xuni:FlexPie x:Name="chart" ItemsSource="{Binding Data}" BindingName="Name" Binding ="Value"
HeaderText="Fruit Consumption" HeaderTextColor="#FF7373" HeaderFont="30"
FooterText="*Random Data by ComponentOne" FooterTextColor="#088DA5" FooterFont="20"
Grid.Row="1" Grid.ColumnSpan="2">
</xuni:FlexPie>