Center Content

• Jul 03, 2024

You can add any content to the center of the gauge.

To do so, specify a gauge’s Content property. The ContentTemplate property allows you to define content appearance. ContentTemplate uses the object you put to Content as its binding context.

XAML

<dx:RadialGauge ...
                  Content="{Binding GaugeCenterContent}">
    <dx:RadialGauge.BindingContext>
        <local:MainViewModel/>
    </dx:RadialGauge.BindingContext>
    <dx:RadialGauge.ContentTemplate>
        <DataTemplate>
            <HorizontalStackLayout>
                <dx:DXImage Source="{Binding Icon}" 
                            WidthRequest="28" HeightRequest="28" 
                            TintColor="#48B5EE"/>
                <Label Text="{Binding Text}" VerticalOptions="Center" 
                       Margin="5,0" FontAttributes="Bold"/>
            </HorizontalStackLayout>
        </DataTemplate>
    </dx:RadialGauge.ContentTemplate>
    <dx:RadialScale ...
                    StartValue="0" EndValue="1" 
                    TickmarkLabelFormat="p0">
        <dx:MarkerIndicator .../>
    </dx:RadialScale>
</dx:RadialGauge>

C#

public class MainViewModel {
    public GaugeCenterContent GaugeCenterContent { get; set; } = new () { Text = "Air humidity", Icon = ImageSource.FromFile ("drop.svg") };
}
public class GaugeCenterContent {
    public ImageSource Icon { get; set; }
    public string Text { get; set; }
}