SfCircularProgressBar with Content fails to render on iOS

[Darren]

I am currently using an SfCircularProgressBar on a Maui App using .NET 8.0, with Syncfusion.Maui.ProgressBar 24.2.8.  I am trying to get it to fill the lower portion of the screen, the top 100 is saved for another purpose.  

The Circular progress bar has a label in the content, whenever I try to run the App it does not render the View on iOS, but it worked on Android.

If I remove the content  section it renders correctly and fills the view.

The content of the Xaml file is:

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:progressBar="clr-namespace:Syncfusion.Maui.ProgressBar;assembly=Syncfusion.Maui.ProgressBar"

x:Class="MauiSyncfusionCircularProgress.MainPage">

<Grid >

<Grid.RowDefinitions>

<RowDefinition Height="100"/>

<RowDefinition Height="*"/>

</Grid.RowDefinitions>

<progressBar:SfCircularProgressBar x:Name="CustomContentCircularProgressBar"

Grid.Row="1"

Progress="23"

Background="Red"

VerticalOptions="Fill"

HorizontalOptions="Fill">

<progressBar:SfCircularProgressBar.Content>

<Label TextColor="#007cee"

Text="23%"

HorizontalTextAlignment="Center"

VerticalTextAlignment="End"

HeightRequest="100">

</Label>

</progressBar:SfCircularProgressBar.Content>

</progressBar:SfCircularProgressBar>

</Grid>

</ContentPage>

Attachment: MauiSyncfusionCircularProgress_e2ea9fa6.zip

[Vishal Omprasad]

Hi Darren,

Regarding “CircularProgressbar with content fails to render in iOS”:

As per the shared details, we have checked the reported query with your shared sample and found that the scenario can be resolved at sample level. In the sample, we recommend setting HeightRequest and WidthRequest to the progress bar, as shown in the following snippet.

[Cod snippet]:

<progressBar:SfCircularProgressBar x:Name="CustomContentCircularProgressBar"

                                                                                                                      Grid.Row="1"

                                                                                                                      Progress="23"

                                                                                                                      Background="Red"

                                                                                                                      VerticalOptions="Fill"

                                                                                                                      HorizontalOptions="Fill"

                                                                                                                      HeightRequest="200"

                                                                                                                      WidthRequest="200">

We have shared the modified sample below for your reference.

We hope that this helps you. Please let us know if you need any further assistance.

Regards,
Vishal O.

Attachment: MauiSyncfusionCircularProgress_650340b8.zip