We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

DigitalGauge not displayed

Thread ID:

Created:

Updated:

Platform:

Replies:

120976 Oct 30,2015 09:18 AM Nov 3,2015 01:37 AM Xamarin.Forms 3
loading
Tags: SfDigitalGauge
Jens Bohrmann
Asked On October 30, 2015 09:18 AM

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 = "Line1\nLine2\n",
                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 = "Line1\nLine2\nLine3\nLine4\nLine5\nLine6\nLine7\nLine8\nLine9\nLine10\nLine11\nLine12\nLine13\nLine14\nLine15\nLine16\nLine17\nLine18\nLine19\nLine20\n",

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 [Syncfusion]
Replied On November 2, 2015 07:40 AM

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
Replied On November 2, 2015 10:50 AM

Great!
I removed the label with the multiple lines and added a HeightRequest to the Stack-Layout,
now it is working.

Hemalatha Marikumar [Syncfusion]
Replied On November 3, 2015 01:37 AM

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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;