Content Marker Pointer in .NET MAUI Linear Gauge (SfLinearGauge)

13 Jul 20269 minutes to read

The LinearContentPointer in SfLinearGauge allows you to use any .NET MAUI content as a marker pointer. Multiple content marker pointers can be added to a single gauge. For animation support, refer to the Pointer animation documentation. The following code sample uses an Image as a marker pointer.

NOTE

Prerequisite: Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the .NET MAUI Linear Gauge control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.

NOTE

The image used in the Image source (e.g., pin.png) must be added to your project’s resources.

XAML

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.MarkerPointers>
        <gauge:LinearContentPointer Value="50">
            <gauge:LinearContentPointer.Content>
                <Image Source="pin.png" HeightRequest="20" 
                       WidthRequest="20"/>
            </gauge:LinearContentPointer.Content>
        </gauge:LinearContentPointer>
    </gauge:SfLinearGauge.MarkerPointers>
</gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
LinearContentPointer contentPointer = new LinearContentPointer();
contentPointer.Value = 50;
contentPointer.Content = new Image() { Source = "pin.png", HeightRequest = 20, WidthRequest = 20 };
gauge.MarkerPointers.Add(contentPointer);
this.Content = gauge;

Change the marker alignment

The content marker pointer’s alignment can be changed by the Alignment property of LinearContentPointer. The available marker positions are Start, End, and Center. The default value is Center.

XAML

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.MarkerPointers>
        <gauge:LinearContentPointer Value="50" Alignment="End">
            <gauge:LinearContentPointer.Content>
                <Grid HeightRequest="25" WidthRequest="25">
                    <RoundRectangle CornerRadius="5" 
                                    Fill="#ff0074E3"/>
                    <Label Text="50" HorizontalOptions="Center"
                           VerticalOptions="Center" TextColor="White"/>
                </Grid>
            </gauge:LinearContentPointer.Content>
        </gauge:LinearContentPointer>
    </gauge:SfLinearGauge.MarkerPointers>
</gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
Grid views = new Grid() { HeightRequest = 25, WidthRequest = 25 };
views.Add(new RoundRectangle()
{
    Fill = new SolidColorBrush(Color.FromArgb("#ff0074E3")),
    CornerRadius = 5
});
views.Add(new Label()
{
    Text = "50",
    TextColor = Colors.White,
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center
});
LinearContentPointer contentPointer = new LinearContentPointer();
contentPointer.Value = 50;
contentPointer.Alignment = GaugeAlignment.End;
contentPointer.Content = views;
gauge.MarkerPointers.Add(contentPointer);
this.Content = gauge;

Change the position

By default, the content marker pointer is positioned Outside the scale. This position can be changed by the Position property of pointer. It is possible to position the content marker pointer Inside, Cross, or Outside the scale. The default position is Outside. The following code sample demonstrates how to change the content marker pointer position to Cross the scale.

XAML

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.MarkerPointers>
        <gauge:LinearContentPointer Value="50" Position="Cross">
            <gauge:LinearContentPointer.Content>
                <Grid HeightRequest="25" WidthRequest="25">
                    <RoundRectangle CornerRadius="5" 
                                    Fill="#ff0074E3"/>
                    <Label Text="50" HorizontalOptions="Center"
                           VerticalOptions="Center" TextColor="White"/>
                </Grid>
            </gauge:LinearContentPointer.Content>
        </gauge:LinearContentPointer>
    </gauge:SfLinearGauge.MarkerPointers>
</gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
Grid views = new Grid() { HeightRequest = 25, WidthRequest = 25 };
views.Add(new RoundRectangle()
{
    Fill = new SolidColorBrush(Color.FromArgb("#ff0074E3")),
    CornerRadius = 5
});
views.Add(new Label()
{
    Text = "50",
    TextColor = Colors.White,
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center
});
LinearContentPointer contentPointer = new LinearContentPointer();
contentPointer.Value = 50;
contentPointer.Position = GaugeElementPosition.Cross;
contentPointer.Content = views;
gauge.MarkerPointers.Add(contentPointer);
this.Content = gauge;

Change the offset

In addition to positioning the content marker pointer, it is also possible to change the offset of the content marker pointer. The OffsetX and OffsetY are the distance from the scale. The default OffsetX and OffsetY values are 0. The cross-positioned elements are not affected by the OffsetX and OffsetY values. The following code sample demonstrates how to change the offset value of the content marker pointer.

XAML

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.MarkerPointers>
        <gauge:LinearContentPointer Value="50" OffsetY="-5">
            <gauge:LinearContentPointer.Content>
                <Grid HeightRequest="25" WidthRequest="25">
                    <RoundRectangle CornerRadius="5" 
                                    Fill="#ff0074E3"/>
                    <Label Text="50" HorizontalOptions="Center"
                           VerticalOptions="Center" TextColor="White"/>
                </Grid>
            </gauge:LinearContentPointer.Content>
        </gauge:LinearContentPointer>
    </gauge:SfLinearGauge.MarkerPointers>
</gauge:SfLinearGauge>

C#

SfLinearGauge gauge = new SfLinearGauge();
Grid views = new Grid() { HeightRequest = 25, WidthRequest = 25 };
views.Add(new RoundRectangle()
{
    Fill = new SolidColorBrush(Color.FromArgb("#ff0074E3")),
    CornerRadius = 5
});
views.Add(new Label()
{
    Text = "50",
    TextColor = Colors.White,
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center
});
LinearContentPointer contentPointer = new LinearContentPointer();
contentPointer.Value = 50;
contentPointer.OffsetY = -5;
contentPointer.Content = views;
gauge.MarkerPointers.Add(contentPointer);
this.Content = gauge;