Bar Pointer in WinUI Linear Gauge

26 May 202112 minutes to read

A bar pointer is an accenting line or shaded background range that can be placed on a gauge to mark the current value.

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis>
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="30" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>
SfLinearGauge sfLinearGauge = new SfLinearGauge();

BarPointer barPointer = new BarPointer();
barPointer.Value = 30;
sfLinearGauge.Axis.BarPointers.Add(barPointer);

this.Content = sfLinearGauge;

default bar pointer

Pointer size

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis AxisLineStrokeThickness="30">
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="30"
                                  PointerSize="30" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>
SfLinearGauge sfLinearGauge = new SfLinearGauge();
sfLinearGauge.Axis.AxisLineStrokeThickness = 30;

BarPointer barPointer = new BarPointer();
barPointer.Value = 30;
barPointer.PointerSize = 30;
sfLinearGauge.Axis.BarPointers.Add(barPointer);

this.Content = sfLinearGauge;

bar pointer size customization

Setting background brush to the pointer

By using Background property, you can change the color of the bar pointer.

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis>
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="30"
                                  Background="Indigo" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>
SfLinearGauge sfLinearGauge = new SfLinearGauge();

BarPointer barPointer = new BarPointer();
barPointer.Value = 30;
barPointer.Background = new SolidColorBrush(Colors.Indigo);
sfLinearGauge.Axis.BarPointers.Add(barPointer);

this.Content = sfLinearGauge;

bar pointer background

Setting gradient brush to the pointer

The GradientStops property of bar pointer allows to specify the smooth color transition to pointer by specifying the different colors based on provided axis value.

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis>
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="40">
                    <gauge:BarPointer.GradientStops>
                        <gauge:GaugeGradientStop Value="30"
                                                 Color="#FFCC2B5E" />
                        <gauge:GaugeGradientStop Value="40"
                                                 Color="#FF753A88" />
                    </gauge:BarPointer.GradientStops>
                </gauge:BarPointer>
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>
SfLinearGauge sfLinearGauge = new SfLinearGauge();

BarPointer barPointer = new BarPointer();
barPointer.Value = 40;
barPointer.GradientStops.Add(new GaugeGradientStop { Value = 30, Color = Color.FromArgb(255, 204, 43, 94) });
barPointer.GradientStops.Add(new GaugeGradientStop { Value = 40, Color = Color.FromArgb(255, 117, 58, 136) });
sfLinearGauge.Axis.BarPointers.Add(barPointer);

this.Content = sfLinearGauge;

bar pointer gradient

Corner style customization

The CornerStyle property of bar pointer specifies the corner type for the pointer. The corners can be customized using the BothFlat, BothCurve, StartCurve and EndCurve options. The default value of this property is BothFlat.

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis AxisLineStrokeThickness="10"
                          AxisLineStroke="Transparent"
                          ShowTicks="False">
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="50"
                                  PointerSize="10"
                                  CornerStyle="BothCurve"/>
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>
SfLinearGauge sfLinearGauge = new SfLinearGauge();
sfLinearGauge.Axis.AxisLineStrokeThickness = 10;
sfLinearGauge.Axis.AxisLineStroke = new SolidColorBrush(Colors.Transparent);
sfLinearGauge.Axis.ShowTicks = false;

BarPointer barPointer = new BarPointer();
barPointer.Value = 50;
barPointer.PointerSize = 10;
barPointer.CornerStyle = CornerStyle.BothCurve;
sfLinearGauge.Axis.BarPointers.Add(barPointer);

this.Content = sfLinearGauge;

bar pointer corner style customization

Position customization

The bar pointer can be moved far or near to the axis line using the Offset property. The default value of offset is 0.

To move the pointer inside of the axis, provide positive values.

To move the pointer outside of the axis, provide negative values.

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis>
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="50"
                                  Offset="-15" />
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>
SfLinearGauge sfLinearGauge = new SfLinearGauge();

BarPointer barPointer = new BarPointer();
barPointer.Value = 50;
barPointer.Offset = -15;
sfLinearGauge.Axis.BarPointers.Add(barPointer);

this.Content = sfLinearGauge;

pointer position customization

Child support

By using Child property of bar pointer, you can provide a child for bar pointer. The child content is used to add any visual content like text or images, inside the bar pointer to improve readability.

<gauge:SfLinearGauge>
    <gauge:SfLinearGauge.Axis>
        <gauge:LinearAxis ShowTicks="False"
                          ShowLabels="False"
                          CornerStyle="BothCurve"
                          AxisLineStrokeThickness="30">
            <gauge:LinearAxis.BarPointers>
                <gauge:BarPointer Value="50"
                                  PointerSize="30"
                                  CornerStyle="BothCurve">
                    <gauge:BarPointer.Child>
                        <TextBlock Text="50%"
                                   Margin="0,0,10,0"
                                   Foreground="White"
                                   HorizontalAlignment="Right"
                                   VerticalAlignment="Center"/>
                    </gauge:BarPointer.Child>
                </gauge:BarPointer>
            </gauge:LinearAxis.BarPointers>
        </gauge:LinearAxis>
    </gauge:SfLinearGauge.Axis>
</gauge:SfLinearGauge>
SfLinearGauge sfLinearGauge = new SfLinearGauge();
sfLinearGauge.Axis.ShowTicks = false;
sfLinearGauge.Axis.ShowLabels = false;
sfLinearGauge.Axis.CornerStyle = CornerStyle.BothCurve;
sfLinearGauge.Axis.AxisLineStrokeThickness = 30;

BarPointer barPointer = new BarPointer();
barPointer.Value = 50;
barPointer.PointerSize = 30;
barPointer.CornerStyle = CornerStyle.BothCurve;
barPointer.Child = new TextBlock
{
    Text = "50%",
    Foreground = new SolidColorBrush(Colors.White),
    Margin = new Thickness { Right = 10 },
    HorizontalAlignment = HorizontalAlignment.Right,
    VerticalAlignment = VerticalAlignment.Center
};

sfLinearGauge.Axis.BarPointers.Add(barPointer);
this.Content = sfLinearGauge;

bar pointer child customization