How to use Gauge component in XAML Page, getting an error

[gaurav]

Hi,

I have copied following code to display gauge on my content page (XAML) but getting below exception when it renders. Can anyone please help me out?

System.ArgumentException: Object of type 'Telerik.XamarinForms.DataVisualization.Gauges.GaugeRangesDefinition' cannot be converted to type 'Xamarin.Forms.View'.

Here is my code:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:gauges="clr-namespace:Telerik.XamarinForms.DataVisualization.Gauges;assembly=Telerik.XamarinForms.DataVisualization"
             xmlns:common="clr-namespace:Telerik.XamarinForms.Common;assembly=Telerik.XamarinForms.Common"
             x:Class="Test.Portable.Cases.CaseManagement">
   
    <Grid Grid.ColumnSpacing="0" Grid.RowSpacing="0" BackgroundColor="#F7F7F7">
      <Grid.RowDefinitions>
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
  
  <gauges:GaugeRangesDefinition>
    <gauges:GaugeRange From="0" To="100" Color="Green" />
    <gauges:GaugeRange From="100" To="150" Color="Yellow" />
    <gauges:GaugeGradientRange From="150" To="200">
      <common:RadGradientStop Color="Red" Offset="150" />
      <common:RadGradientStop Color="Black" Offset="200" />
    </gauges:GaugeGradientRange>
  </gauges:GaugeRangesDefinition>
  </Grid>
</ContentPage>

 

Thanks,

Kumar

[Petar Marchev]

Hi Kumar,

I suppose you have copied this code from our Ranges documentation article. However, the article focuses on how to set up the ranges, and not the full gauge set up. The GaugeRangesDefinition is indeed not a visual element (View) and this is why you cannot add it directly into a Grid. You need to fully set up a gauge as demonstrated in the Getting Started article and in our SDK demos.

Regards,
Petar Marchev
Telerik by Progress

[gaurav]

Hello Peter,

Thanks for the reply.

Yes, I have copied the code from the documentation. I also followed the "Getting Started" article but still not working for me. I was able to setup RadSideDrawer and other components successfully but Gauge component is not working for me. I am also not able to find full working example for Gauge. 

If you can provide me working example, it would be great. I am also attaching my XAML file.

Am I missing anything in setup? I tried using Grid / StackLayout as well but getting same error.

 

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:gauges="clr-namespace:Telerik.XamarinForms.DataVisualization.Gauges;assembly=Telerik.XamarinForms.DataVisualization"
             xmlns:common="clr-namespace:Telerik.XamarinForms.Common;assembly=Telerik.XamarinForms.Common"
             x:Class="Test.Portable.Cases.CaseManagement">
    <Grid Grid.ColumnSpacing="0" Grid.RowSpacing="0" BackgroundColor="#F7F7F7">
      <Grid.RowDefinitions>
        <RowDefinition Height="*" />
      </Grid.RowDefinitions>
  
  <gauges:GaugeRangesDefinition>
    <gauges:GaugeRange From="0" To="100" Color="Green" />
    <gauges:GaugeRange From="100" To="150" Color="Yellow" />
    <gauges:GaugeGradientRange From="150" To="200">
      <common:RadGradientStop Color="Red" Offset="150" />
      <common:RadGradientStop Color="Black" Offset="200" />
    </gauges:GaugeGradientRange>
  </gauges:GaugeRangesDefinition>
  </Grid>

</ContentPage>

[gaurav]

Followed the steps again, it works now.

Thank you!!