Implement temperature control using gauge

[Ali Nsh]

Hi everyone,

First of all, Thanks for the incredible library.
Is it possible to create a control like this using sfCircularGauge or any other controls?

I made something but it is still SO FAR

XAML:

<Grid BackgroundColor="Black" x:DataType="syncgaugetest:ThermostatValues">

        <gauge:SfCircularGauge VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="200" HeightRequest="200"

                               >

            <gauge:SfCircularGauge.Annotations>

                <gauge:GaugeAnnotation>

                    <gauge:GaugeAnnotation.View>

                        <Frame HeightRequest="65" WidthRequest="65" BackgroundColor="White" HasShadow="True" CornerRadius="65">

                            <Label TextColor="Black" FontSize="Medium" VerticalOptions="Center" HorizontalOptions="Center">

                                <Label.FormattedText>

                                    <FormattedString>

                                        <FormattedString.Spans>

                                            <Span Text="{Binding SetPoint, Mode=OneWay}"/>

                                            <Span Text=" ºC"/>

                                        </FormattedString.Spans>

                                    </FormattedString>

                                </Label.FormattedText>

                            </Label>

                        </Frame>

                    </gauge:GaugeAnnotation.View>

                </gauge:GaugeAnnotation>

            </gauge:SfCircularGauge.Annotations>

            <gauge:SfCircularGauge.Scales>

                <gauge:Scale ShowRim="False" LabelOffset="0.9" LabelPostfix=" ºC" StartAngle="90" StartValue="0" SweepAngle="360" ShowLastLabel="False" EndValue="40">

                    <gauge:Scale.MajorTickSettings>

                        <gauge:TickSettings Length="10" Offset="1.1" Thickness="10"/>

                    </gauge:Scale.MajorTickSettings>

                    <gauge:Scale.Ranges>

                        <gauge:Range StartValue="0" EndValue="40" Thickness="60" Offset="1">

                            <gauge:Range.GradientStops>

                                <gauge:GaugeGradientStop Value="0" Color="#c3e0fb"/>

                                <gauge:GaugeGradientStop Value="10" Color="#7880db"/>

                                <gauge:GaugeGradientStop Value="20" Color="MediumPurple"/>

                                <gauge:GaugeGradientStop Value="30" Color="#f4d1c5"/>

                            </gauge:Range.GradientStops>

                        </gauge:Range>

                    </gauge:Scale.Ranges>

                    <gauge:Scale.Pointers>

                        <gauge:MarkerPointer StepFrequency="1" EnableDragging="True" Color="Blue" MarkerWidth="20" MarkerHeight="20" Offset="0.85" Value="{Binding SetPoint, Mode=TwoWay}" MarkerShape="Circle"/>

                        <gauge:RangePointer RangeCap="Both" Thickness="10" Offset="1" Value="{Binding SetPoint, Mode=OneWay}"/>

                    </gauge:Scale.Pointers>

                </gauge:Scale>

            </gauge:SfCircularGauge.Scales>

        </gauge:SfCircularGauge>

    </Grid>

[Eswaran Thirugnanasambandam]

Hi Ali Nsh, 

 

Thanks for contacting Syncfusion support.  

 

We are preparing a sample to achieve your requirement and will update you the status on or before January 17, 2022. 

 

Regards, 

Eswaran.

[Vignesh Ramesh]

Hi Ali Nsh, 

We have prepared the sample to achieve your requirement except the below few 

1.       Currently, we don’t have gradient support in range pointer. Already we have logged a feature request for this. Please find the feedback link below
https://www.syncfusion.com/feedback/1052 

2.       Depth/shadow like support in annotation 

3.       Stroke support for marker pointer 

4.       Custom shape for axis ticks. 

Output: 

 

Please get the sample from the below link 

https://www.syncfusion.com/downloads/support/forum/171916/ze/CircularGauge_Sample993407256 

Regards, 

Vignesh Ramesh.

[Ali Nsh]

Hi there, And really thanks for the sample. It looks really great. 

There's a little bad looking on UWP. If you can remove these separator lines in future releases it can be very welcome but not so much important for me. 

Anyhow, Thanks for the great community and support.

Regards  

[Eswaran Thirugnanasambandam]

Hi Ali Nsh, 

 

We have checked the reported problem “[UWP] thin white line appearing while applying between gradient stops in circular range” in our source and confirmed it as a defect. So, logged a bug report for this. You can keep track of the bug from the feedback portal below.  

 

https://www.syncfusion.com/feedback/31966/  

 

NOTE: The provided feedback link is private, and you need to login to view this feedback. 

 

We will include the fix in our upcoming weekly NuGet which is expected to be rolled out on February 1, 2022. If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 

 

Regards,  

Eswaran.  

[Eswaran Thirugnanasambandam]

Hi Ali Nsh,,  

 

We have fixed the reported issue ““[UWP] thin white line appearing while applying between gradient stops in circular range” and the fix is included in our weekly NuGet of January 25, 2022.  

  

NuGet Version: v19.4.0.47 

  

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.  

  

Regards,  

Eswaran