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.

UWP CIrcular Gauge Header Not Rendering Correctly

Thread ID:

Created:

Updated:

Platform:

Replies:

125506 Aug 21,2016 07:06 PM Sep 8,2016 05:58 AM Xamarin.Forms 7
loading
Tags: SfCircularGauge
Kirklyn Kerr
Asked On August 21, 2016 07:06 PM

I am in the process of creating an application using Xamarin forms.  I have added the Circular Gauge control to the application, however, the header is ignoring the position in the UWP application targeting Windows 10.  The header is always positioned top left no matter what its position value is set to.  What am I missing?

<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="Center" x:Name="layout"  >
      <gauge:SfCircularGauge GaugeType="Default" x:Name="gauge" WidthRequest="300">
        <gauge:SfCircularGauge.Scales>
          <gauge:Scale StartAngle="135" SweepAngle="270" Interval="10" StartValue="0" EndValue="100" RimThickness="4" LabelColor="Gray" MinorTicksPerInterval="1">
            <gauge:Scale.Pointers>
              <gauge:NeedlePointer Value="50" KnobRadius="12" EnableAnimation="True" KnobColor="Gray" Color="Gray" Thickness="2" />
              <gauge:RangePointer Value="50" EnableAnimation="True" Thickness="4" Color="Black"  />
            </gauge:Scale.Pointers>
          </gauge:Scale>
        </gauge:SfCircularGauge.Scales>
        <gauge:SfCircularGauge.Headers>
          <gauge:Header x:Name="gaugeHeader" Text="Text"  ForegroundColor="Black" TextSize="20">
            <gauge:Header.Position>
              <OnPlatform x:TypeArguments="Point" iOS="0.5,0.9"  Android="0.5,0.9"  WinPhone="0.1,0.9" />
            </gauge:Header.Position>
          </gauge:Header>
        </gauge:SfCircularGauge.Headers>
      </gauge:SfCircularGauge>
    </StackLayout>

MainPage.cs

 public sealed partial class MainPage
    {
        public MainPage()
        {
            this.InitializeComponent();
          new SfGaugeRenderer();
            LoadApplication(new Client.App());
        
        }
    }

.


Subburaj Pandian Veluchamy [Syncfusion]
Replied On August 22, 2016 08:52 AM

Hi Kirklyn,

Thank you for using Syncfusion products.

We have checked your provided code example and we are able to reproduce the mentioned issue with CircularGauge Header position in Xamarin forms (UWP). And the issue can be resolved by setting HeightRequest property to the Gauge and we are analyzing about this issue. Please find the below code example,

<gauge:SfCircularGauge HeightRequest="300" WidthRequest="300">

If the given solution doesn’t work, could you please revert us with more information along with issue reproducing sample, so that we could analyze on it and provide you a possible solution.

Regards,
Subburaj Pandian V.



Kirklyn Kerr
Replied On August 29, 2016 08:42 PM

Thanks.  Setting both the WidthRequest and HeightRequest seems to fix the header positioning issue.

Subburaj Pandian Veluchamy [Syncfusion]
Replied On August 30, 2016 12:31 AM

Hi Kirklyn,

Thank you for the update. We are happy that the mentioned issue got resolved with the given solution, please let us know if you have any query.

Regards,
Subburaj Pandian V

Kirklyn Kerr
Replied On September 5, 2016 11:09 PM

So, I ran into another issue centered around the circular gauge header targeting the Xamarin UWP platform.  The issue is when the header is data bound it reverts back to the default positioning when the backing data changes.  Here is the updated code:

<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             xmlns:gauge="clr-namespace:Syncfusion.SfGauge.XForms;assembly=Syncfusion.SfGauge.XForms"
             x:Class="Inlynk.Presence.Views.MainPage"
             Title="MainPage">
  <StackLayout HorizontalOptions="FillAndExpand"  VerticalOptions="FillAndExpand" x:Name="layoutPanel">
    <Slider x:Name="slider" Value="{Binding Path=ReadValue, Mode=TwoWay}"   Minimum="0" Maximum="100" />
    <gauge:SfCircularGauge x:Name="gauge" WidthRequest="350" HeightRequest="350">
      <gauge:SfCircularGauge.Scales>
        <gauge:Scale StartAngle="135" SweepAngle="270" Interval="10" StartValue="0" EndValue="100" RimColor="#939393" RimThickness="4" LabelColor="Black" LabelOffset="0.1"  MinorTicksPerInterval="9">
          <gauge:Scale.Pointers>
            <gauge:NeedlePointer Value="50" KnobRadius="5" EnableAnimation="True" KnobColor="#434343" Color="#434343" Thickness="2" />
            <gauge:RangePointer Value="{Binding Path=ReadValue, Mode=TwoWay}" x:Name="range" EnableAnimation="True" Thickness="4" Color="#434343" />
          </gauge:Scale.Pointers>
          <gauge:Scale.Ranges>
            <gauge:Range Color="Red" StartValue="80" EndValue="100" Offset="0.2" Thickness="40" />
            <gauge:Range Color="Green" StartValue="70" EndValue="81" Offset="0.2" Thickness="40" />
          </gauge:Scale.Ranges>
          <gauge:Scale.MinorTickSettings>
            <gauge:TickSettings Color="#939393" Thickness="1"  />
          </gauge:Scale.MinorTickSettings>
          <gauge:Scale.MajorTickSettings>
            <gauge:TickSettings Color="#939393" Thickness="1.5"  />
          </gauge:Scale.MajorTickSettings>
        </gauge:Scale>
      </gauge:SfCircularGauge.Scales>
      <gauge:SfCircularGauge.Headers>
        <gauge:Header Text="{Binding ReadValue, StringFormat='{0:F1}°'}" ForegroundColor="#939393" TextSize="50">
          <gauge:Header.Position>
            <OnPlatform x:TypeArguments="Point" iOS="0.5,0.9" Android="0.5,0.9" WinPhone="0.45,0.7"  />
          </gauge:Header.Position>
        </gauge:Header>
        <gauge:Header  Text="Temperature" ForegroundColor="#939393" TextSize="15">
          <gauge:Header.Position>
            <OnPlatform x:TypeArguments="Point" iOS="0.5,0.95" Android="0.5,0.95" WinPhone="0.45,0.9"  />
          </gauge:Header.Position>
        </gauge:Header>
      </gauge:SfCircularGauge.Headers>
    </gauge:SfCircularGauge>
  </StackLayout>
</ContentPage>

Subburaj Pandian Veluchamy [Syncfusion]
Replied On September 6, 2016 09:07 AM

Hi Kirklyn,

We have checked your code example and we were unable to reproduce the mentioned issue with CircularGauge Header in Xamarin Forms (UWP). We have prepared simple sample, please find the sample in the below link,

Sample link: GaugeSampleTest_UWP

Could you please revert to us by modifying the provided sample to reproduce the issue with more details and its replication procedure? It will be very helpful for us to analyze on it and provide you a solution.

Regards,
Subburaj Pandian V


Kirklyn Kerr
Replied On September 7, 2016 07:40 AM

Hi Subburaj,

Thanks for the support you have been providing.  I have attached a link to my solution containing the troublesome code Sample Code .  I have bound the slider, the header, and a range pointer to the same property on the ViewModel.  As a result, the steps used to reproduce the issue on UWP is really simple. Just by moving the slider you will notice the header will move to the default position.

I am running on:
Windows 10 Build 14393.105
Visual Studio Studio Community 2015 Update 3
Syncfusion 14.2.0.26 with the latest Service Pack Syncfusion 14.2.0.32

Also this block of code does not work on UWP it throws "Object reference not set to an instance of an object." exception.

 <gauge:SfCircularGauge.Headers>
        <gauge:Header Text="{Binding ReadValue, StringFormat='{0:F1}&#176;'}" ForegroundColor="#939393" TextSize="50">
          <gauge:Header.Position>
            <OnPlatform x:TypeArguments="Point" iOS="0.5,0.9" Android="0.5,0.9" WinPhone="0.4,0.6"  />
          </gauge:Header.Position>
        </gauge:Header>
        <gauge:Header Text="Temperature" ForegroundColor="#939393" TextSize="20">
          <gauge:Header.Position>
            <OnPlatform x:TypeArguments="Point" iOS="0.5,0.95" Android="0.5,0.95" WinPhone="0.45,0.65"  />
          </gauge:Header.Position>
        </gauge:Header>
      </gauge:SfCircularGauge.Headers>


Subburaj Pandian Veluchamy [Syncfusion]
Replied On September 8, 2016 05:58 AM

Hi Kirklyn,

Thank you for the update.

We have created a new support incident under your account to track the status of this issue. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents

Please let us know, if you have any query.

Regards,
Subburaj Pandian V





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.

;