Center Content

• Nov 28, 2023

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

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