This is a migrated thread and some comments may be shown as answers.

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

3 Answers 33 Views
Gauges
This is a migrated thread and some comments may be shown as answers.
gaurav
Top achievements
Rank 1
gaurav asked on 12 Feb 2017, 01:08 AM

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

3 Answers, 1 is accepted

Sort by
0
Petar Marchev
Telerik team
answered on 13 Feb 2017, 12:38 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
gaurav
Top achievements
Rank 1
answered on 13 Feb 2017, 01:19 PM

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>

0
gaurav
Top achievements
Rank 1
answered on 14 Feb 2017, 01:21 AM

Followed the steps again, it works now.

Thank you!!

Tags
Gauges
Asked by
gaurav
Top achievements
Rank 1
Answers by
Petar Marchev
Telerik team
gaurav
Top achievements
Rank 1
Share this question
or