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. Image for the cookie policy date
  1. Home
  2. Forum
  3. .NET MAUI
  4. BindingContext inside progressBar:SfCircularProgressBar.Content

BindingContext inside progressBar:SfCircularProgressBar.Content

Hi, I am trying to display a crown inside the control (in the Content section of the control) when the % complete gets to 100%. I have an image tag that has a ShowCrown variable bound to the IsVisible property. I am binding to the viewmodel of the page, but I think I need to change my bindingcontext, as the crown is not appearing. I move the image control outside of the SfCircularProgressBar control and it displays as expected. 

Here is the code that doesn't render the crown, but the Progress renders correctly:

 <VerticalStackLayout>

                <progressBar:SfCircularProgressBar

                    x:Name ="CustomContentCircularProgressBar"

                    Progress="{Binding ProgressPercent}"

                    ProgressFill="#DFB9C6"

                    TrackFill="#E1E1E1"

                    StartAngle="120"

                    EndAngle="420"

                    HeightRequest="250"

                    WidthRequest="250">

                    <progressBar:SfCircularProgressBar.Content>

                        <Grid RowDefinitions="*,*,*,2*">

                            <Label

                               Grid.Row="1"

                               TextColor="{StaticResource Black}"

                               Text="{Binding Source={x:Reference CustomContentCircularProgressBar},Path=Progress,StringFormat='{0}%'}"

                               FontSize="Large"

                               HorizontalTextAlignment="Center"

                               VerticalTextAlignment="End">

                            </Label>

                            <Label

                               Grid.Row="2"

                               TextColor="{StaticResource Black}"

                               Text="completed"

                               FontSize="Large"

                               HorizontalTextAlignment="Center">

                            </Label>

                            <HorizontalStackLayout Grid.Row="3" HorizontalOptions="CenterAndExpand" VerticalOptions="Start">

                                <Image Grid.Row="3" Source="crown.png" WidthRequest="50" Aspect="AspectFit" IsVisible="{Binding ShowCrown}">

                                    <Image.Behaviors>

                                        <toolkit:IconTintColorBehavior TintColor="DarkGoldenrod" />

                                    </Image.Behaviors>

                                </Image>

                            </HorizontalStackLayout>

                        </Grid>

                    </progressBar:SfCircularProgressBar.Content>

                </progressBar:SfCircularProgressBar>

            </VerticalStackLayout>

Thanks for any guidance you can offer.




10 Replies
JB Jason Bloink January 7, 2023 01:55 PM UTC

Here is the entire page (if there's a better way to post code, please let me know):

<?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"

             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

             xmlns:model="clr-namespace:MKIPA_MAUI.Models"

             xmlns:viewmodel="clr-namespace:MKIPA_MAUI.ViewModels"

             x:DataType="viewmodel:MainViewModel"

             x:Class="MKIPA_MAUI.Views.MainPage">


    <ScrollView BackgroundColor="#FFE6EE">

        <VerticalStackLayout

            Spacing="30">

            <VerticalStackLayout

                Spacing="10"

                Padding="30,30">


                <Label

                x:Name="lblIPACompletedThisWeek"

                Text="{Binding IPACompletedThisWeek}"

                SemanticProperties.HeadingLevel="Level3"

                FontSize="24"

                HorizontalOptions="Center" />


                <Label

                    x:Name="lblIPAGoal"

                    Text="{Binding IPAGoal}"

                    SemanticProperties.HeadingLevel="Level1"

                    FontSize="24"

                    HorizontalOptions="Center" />


                <Label

                    x:Name="lblPeriod"

                    Text="{Binding Period}"

                    SemanticProperties.HeadingLevel="Level1"

                    FontSize="20"

                    HorizontalOptions="Center" />

                <Image Grid.Row="3" Source="crown.png" WidthRequest="50" Aspect="AspectFit" IsVisible="{Binding ShowCrown}">

                    <Image.Behaviors>

                        <toolkit:IconTintColorBehavior TintColor="DarkGoldenrod" />

                    </Image.Behaviors>

                </Image>

            </VerticalStackLayout>

            <VerticalStackLayout>

                <progressBar:SfCircularProgressBar

                    x:Name ="CustomContentCircularProgressBar"

                    Progress="{Binding ProgressPercent}"

                    ProgressFill="#DFB9C6"

                    TrackFill="#E1E1E1"

                    StartAngle="120"

                    EndAngle="420"

                    HeightRequest="250"

                    WidthRequest="250">

                    <progressBar:SfCircularProgressBar.Content>

                        <Grid RowDefinitions="*,*,*,2*">

                            <Label

                               Grid.Row="1"

                               TextColor="{StaticResource Black}"

                               Text="{Binding Source={x:Reference CustomContentCircularProgressBar},Path=Progress,StringFormat='{0}%'}"

                               FontSize="Large"

                               HorizontalTextAlignment="Center"

                               VerticalTextAlignment="End">

                            </Label>

                            <Label

                               Grid.Row="2"

                               TextColor="{StaticResource Black}"

                               Text="completed"

                               FontSize="Large"

                               HorizontalTextAlignment="Center">

                            </Label>

                            <HorizontalStackLayout Grid.Row="3" HorizontalOptions="CenterAndExpand" VerticalOptions="Start">

                                <Image Grid.Row="3" Source="crown.png" WidthRequest="50" Aspect="AspectFit" BindingContext="Source={RelativeSource AncestorType={x:Type viewmodel:MainViewModel}}" IsVisible="{Binding ShowCrown}">

                                    <Image.Behaviors>

                                        <toolkit:IconTintColorBehavior TintColor="DarkGoldenrod" />

                                    </Image.Behaviors>

                                </Image>

                            </HorizontalStackLayout>

                        </Grid>

                    </progressBar:SfCircularProgressBar.Content>

                </progressBar:SfCircularProgressBar>

            </VerticalStackLayout>

        </VerticalStackLayout>

    </ScrollView>


</ContentPage>


JB Jason Bloink January 7, 2023 02:00 PM UTC

I think the issue lies somewhere in here:

IsVisible="{Binding ShowCrown}">


And I'm trying things like this (from my 2nd post) but it's not working right:

BindingContext="Source={RelativeSource AncestorType={x:Type viewmodel:MainViewModel}}" IsVisible="{Binding ShowCrown}">


When I have it set this second way, the crown displays all of the time (doesn't go away when % is less than 100).

I think something with my bindingcontext might be off.


JB Jason Bloink January 7, 2023 02:03 PM UTC

This is how it looks when it's always displaying (see last reply)

Home.png


JB Jason Bloink January 7, 2023 02:05 PM UTC

Here's how it looks when the % goes above 100 (that first crown shows up, like it should):

Home2.png


ET Eswaran Thirugnanasambandam Syncfusion Team January 9, 2023 02:16 PM UTC

Hi Jason Bloink,


We can be able to reproduce the reported problem in the Android platform. Currently, we are validating the reported problem with our source, and provide further details on or before January 11, 2022. We appreciate your patience until then.


Regards,

Eswaran


BS Balachandar Selvam Syncfusion Team January 9, 2023 02:49 PM UTC

We have internally considered this issue and will include the fix in our upcoming weekly release, which is expected to be rolled out on January 17, 2023.

Disclaimer: The inclusion of this solution in the weekly release may change due to other factors, including but not limited to QA checks and work reprioritization.


JB Jason Bloink replied to Eswaran Thirugnanasambandam January 10, 2023 01:56 AM UTC

Thanks Eswaran! I appreciate the team looking into it and the feedback. 



JB Jason Bloink replied to Balachandar Selvam January 10, 2023 01:56 AM UTC

Thanks Balachandar! I appreciate it!


ET Eswaran Thirugnanasambandam Syncfusion Team January 17, 2023 08:33 AM UTC

As mentioned earlier, we will include the fix in our upcoming weekly NuGet release, which is scheduled to be rolled out on tomorrow. We appreciate your patience until then.


ET Eswaran Thirugnanasambandam Syncfusion Team January 18, 2023 01:21 PM UTC

We have fixed the internal bug “SfCircularProgressBar.Content Image is not displayed correctly” and the fix is included in our weekly NuGet of Jan 18, 2023. 


NuGet Version: v20.4.0.44


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you require any further assistance.


Loader.
Up arrow icon