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

4 posts, 0 answers
  1. gaurav
    gaurav avatar
    5 posts
    Member since:
    Aug 2015

    Posted 11 Feb Link to this post

    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

  2. Petar Marchev
    Admin
    Petar Marchev avatar
    996 posts

    Posted 13 Feb Link to this post

    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
  3. gaurav
    gaurav avatar
    5 posts
    Member since:
    Aug 2015

    Posted 13 Feb in reply to Petar Marchev Link to this post

    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>

  4. gaurav
    gaurav avatar
    5 posts
    Member since:
    Aug 2015

    Posted 13 Feb in reply to gaurav Link to this post

    Followed the steps again, it works now.

    Thank you!!

Back to Top