UWP CIrcular Gauge Header Not Rendering Correctly

[Kirklyn Kerr]

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]

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]

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

[Subburaj Pandian Veluchamy]

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]

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]

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]

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]

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