DigitalGauge not displayed

[Jens Bohrmann]

Hi,

playing around with the components I have the following scenario. I have a content Page that gets an object containing an value I want to Display/alter:

The page contains a slider to change a property (type is double) of the object, and a label to display the current value.

To test the gauge components I first added a CircularGauge. This worked without Problems.

The views were arranged in a Grid. Each view on a new row. Then I added a new row with a DigitalGauge. This worked aswell.

Then I tried to move the DigitalGauge to the line above the CircularGrid, but then it was not displayed any more.

So I moved it back to the last line and added a second DigitalGauge  to the end of the page. Then both Gauges weren't visible anymore.

To simplify it I switched from the Gridlayout to a Stacklayout and there I didn't get the DigitalGauge to work at all.

Here is my example:

using Syncfusion.SfGauge.XForms;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection.Emit;
using System.Text;
using UIDesign.Model;
using Xamarin.Forms;

namespace UIDesign {
    public class SensorValuesDetailPage : ContentPage {
        public SensorValuesDetailPage(ObservableSensorClass sensor) {
            this.Title = "Werte";

            StackLayout stack = new StackLayout {
                HorizontalOptions = LayoutOptions.StartAndExpand,
                VerticalOptions = LayoutOptions.FillAndExpand
            };

           
            this.BindingContext = sensor;

            Slider slider = new Slider {
                Minimum = 0,
                Maximum = 100,
                Value = sensor.Value,
                VerticalOptions = LayoutOptions.CenterAndExpand,
                WidthRequest = 300
            };

            slider.ValueChanged += (sender, e) => {
                sensor.Value = e.NewValue;
            };

            stack.Children.Add(slider);

            Label valueLabel = new Label {
                Text = sensor.Value.ToString()

            };

            valueLabel.SetBinding(Label.TextProperty, "Value");

            stack.Children.Add(valueLabel);

            SfCircularGauge circularGauge = new SfCircularGauge();
            Scale scale = new Scale();
            scale.StartValue = 0;
            scale.EndValue = 100;
            scale.Interval = 10;
            scale.StartAngle = 135;
            scale.SweepAngle = 270;
            scale.RimThickness = 20;
            scale.RimColor = Color.FromHex("#FB0101");
            scale.MinorTicksPerInterval = 3;

            scale.LabelFontSize = 0.1;

            NeedlePointer needlePointer = new NeedlePointer();
            needlePointer.Color = Color.White;
            needlePointer.KnobColor = Color.White;
            needlePointer.Thickness = 5;
            needlePointer.KnobRadius = 20;
            needlePointer.LengthFactor = 0.8;
            needlePointer.SetBinding(NeedlePointer.ValueProperty, "Value");
            scale.Pointers.Add(needlePointer);

            RangePointer rangePointer = new RangePointer();
            rangePointer.Value = 60;
            rangePointer.Color = Color.FromHex("#FFA9A9A9");
            rangePointer.Thickness = 20;
            rangePointer.SetBinding(RangePointer.ValueProperty, "Value");
            scale.Pointers.Add(rangePointer);

            circularGauge.Scales.Add(scale);
            stack.Children.Add(circularGauge);

            SfDigitalGauge digitalGauge1 = new SfDigitalGauge();
            digitalGauge1.CharacterStrokeColor = Color.FromRgb(20, 108, 237);

            digitalGauge1.CharacterHeight = 25;
            digitalGauge1.CharacterSpacing = 2;
            digitalGauge1.CharacterWidth = 12;
            digitalGauge1.SegmentStrokeWidth = 2;
            digitalGauge1.CharacterType = CharacterType.EightCrossEightDotMatrix;
            digitalGauge1.SetBinding(SfDigitalGauge.ValueProperty, "Value");

            stack.Children.Add(digitalGauge1);

            Label label = new Label {
                Text = "Line1Line2",
                FontSize = 20,
                HorizontalOptions = LayoutOptions.CenterAndExpand
            };
            stack.Children.Add(label);

            Content = stack;
        }
    }
}

Everything on the page works correctly, but the DigitalGauge is not shown.

I tried a Scrollview to see if the Gauge is drawn somwhere else but that did not help.

I am testing this under Android.

To make it complete, here is the grid variant:

using Syncfusion.SfGauge.XForms;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Reflection.Emit;

using System.Text;

using UIDesign.Model;

using Xamarin.Forms;

namespace UIDesign {

public class SensorValuesDetailPage : ContentPage {

public SensorValuesDetailPage(ObservableSensorClass sensor) {

this.Title = "Werte";

Grid grid = new Grid {

VerticalOptions = LayoutOptions.FillAndExpand,

RowDefinitions = {

new RowDefinition { Height = GridLength.Auto },

new RowDefinition { Height = GridLength.Auto },

new RowDefinition { Height = GridLength.Auto },

new RowDefinition { Height = GridLength.Auto },

new RowDefinition { Height = GridLength.Auto },

new RowDefinition { Height = GridLength.Auto }

},

ColumnDefinitions = {

new ColumnDefinition { Width = GridLength.Auto }

}

};

　

this.BindingContext = sensor;

Slider slider = new Slider {

Minimum = 0,

Maximum = 100,

Value = sensor.Value,

VerticalOptions = LayoutOptions.CenterAndExpand,

WidthRequest = 300

};

slider.ValueChanged += (sender, e) => {

sensor.Value = e.NewValue;

};

grid.Children.Add(slider, 1, 1);

Label valueLabel = new Label {

Text = sensor.Value.ToString()

};

valueLabel.SetBinding(Label.TextProperty, "Value");

grid.Children.Add(valueLabel, 1, 2);

SfCircularGauge circularGauge = new SfCircularGauge();

Scale scale = new Scale();

scale.StartValue = 0;

scale.EndValue = 100;

scale.Interval =10;

scale.StartAngle = 135;

scale.SweepAngle = 270;

scale.RimThickness = 20;

scale.RimColor = Color.FromHex("#FB0101");

scale.MinorTicksPerInterval = 3;

scale.LabelFontSize = 0.1;

NeedlePointer needlePointer = new NeedlePointer();

needlePointer.Color = Color.White;

needlePointer.KnobColor = Color.White;

needlePointer.Thickness = 5;

needlePointer.KnobRadius = 20;

needlePointer.LengthFactor = 0.8;

needlePointer.SetBinding(NeedlePointer.ValueProperty, "Value");

scale.Pointers.Add(needlePointer);

RangePointer rangePointer = new RangePointer();

rangePointer.Value = 60;

rangePointer.Color = Color.FromHex("#FFA9A9A9");

rangePointer.Thickness = 20;

rangePointer.SetBinding(RangePointer.ValueProperty, "Value");

scale.Pointers.Add(rangePointer);

circularGauge.Scales.Add(scale);

grid.Children.Add(circularGauge, 1, 3);

Label label = new Label {

Text = "Line1Line2Line3Line4Line5Line6Line7Line8Line9Line10Line11Line12Line13Line14Line15Line16Line17Line18Line19Line20",

FontSize = 20,

HorizontalOptions = LayoutOptions.CenterAndExpand

};

grid.Children.Add(label, 1, 4);

SfDigitalGauge digitalGauge1 = new SfDigitalGauge();

digitalGauge1.CharacterStrokeColor = Color.FromRgb(20, 108, 237);

digitalGauge1.CharacterHeight = 25;

digitalGauge1.CharacterSpacing = 2;

digitalGauge1.CharacterWidth = 12;

digitalGauge1.SegmentStrokeWidth = 2;

digitalGauge1.CharacterType = CharacterType.EightCrossEightDotMatrix;

digitalGauge1.SetBinding(SfDigitalGauge.ValueProperty, "Value");

grid.Children.Add(digitalGauge1, 1, 5);

SfDigitalGauge digitalGauge2 = new SfDigitalGauge();

digitalGauge2.CharacterStrokeColor = Color.FromRgb(20, 108, 237);

digitalGauge2.CharacterHeight = 25;

digitalGauge2.CharacterSpacing = 2;

digitalGauge2.CharacterWidth = 12;

digitalGauge2.SegmentStrokeWidth = 2;

digitalGauge2.CharacterType = CharacterType.EightCrossEightDotMatrix;

digitalGauge2.SetBinding(SfDigitalGauge.ValueProperty, "Value");

grid.Children.Add(digitalGauge2, 1, 6);

ScrollView scrollview = new ScrollView {

Padding = new Thickness(20)

};

StackLayout stack = new StackLayout {

HorizontalOptions = LayoutOptions.StartAndExpand,

VerticalOptions = LayoutOptions.Fill

};

stack.Children.Add(grid);

scrollview.Content = stack;

Content = scrollview;

}

}

}

[Hemalatha Marikumar]

Hi Jens,

We would like to inform that, the Label element’s content has occupied the maximum row span and left no space for DigitalGauge control. We have provided some additional rows definitions and we have specified height in ‘HeightRequest’ property for digital gauge control.

We have prepared a sample based on your code example which can be downloaded from the following link,

Link: http://www.syncfusion.com/downloads/support/forum/120976/ze/DigitalGaugeSample654218095.zip/

Please let us know if you need any further assistance on this.

Regards,
Hemalatha M.

[Jens Bohrmann]

Great!

I removed the label with the multiple lines and added a HeightRequest to the Stack-Layout,

now it is working.

[Hemalatha Marikumar]

Hi Jens,

Thanks for the update,

We are glad that your requirement has been achieved.

Please let us know if you have any query.

Regards,
Hemalatha M.