Is it possible to show busy content in the center of the indicator?

8 posts, 1 answers
  1. Unb
    Unb avatar
    16 posts
    Member since:
    Oct 2018

    Posted 14 Nov 2018 Link to this post

    I want to show a content in the center of the indicator. I tried to manipulate the margin but did not work

     

    <telerikBusyIndicator:RadBusyIndicator x:Name="BusyIndicator"
                                           AnimationContentHeightRequest="100"
                                           AnimationContentWidthRequest="100"
                                          AnimationType="Animation3"
                                           IsBusy="True">
                    <telerikBusyIndicator:RadBusyIndicator.Content>
                        <Label Text="This is the content of the RadBusyIndicator control displayed when the indicator is not busy." TextColor="Black" />
                    </telerikBusyIndicator:RadBusyIndicator.Content>
                    <telerikBusyIndicator:RadBusyIndicator.BusyContent>
                        <Label HorizontalOptions="Center"
                   Text="Loading..."
                   VerticalOptions="Center"
                               Margin="0,0,0,50"/>
                    </telerikBusyIndicator:RadBusyIndicator.BusyContent>
                </telerikBusyIndicator:RadBusyIndicator>

     

    I actually want to show an image (filled) in the center of the indicator as follows: 

     

     

  2. Didi
    Admin
    Didi avatar
    243 posts

    Posted 15 Nov 2018 Link to this post

    Hello,

    In order to arrange the custom content and the animated content you should customize the BusyContentTemplate. Here is an example how to positioned the BusyContent inside the AnimationContent:

    <telerikPrimitives:RadBusyIndicator x:Name="BusyIndicator"
                            AnimationContentHeightRequest="100"
                            AnimationContentWidthRequest="100" 
                            AnimationType="Animation3"                                           
                           IsBusy="True">          
         <telerikPrimitives:RadBusyIndicator.BusyContent>
              <Label Text="Working" />
         </telerikPrimitives:RadBusyIndicator.BusyContent>
         <telerikPrimitives:RadBusyIndicator.BusyContentTemplate>
              <ControlTemplate>
                 <Grid>
                   <Grid.RowDefinitions>
                       <RowDefinition Height="Auto" />
                       <RowDefinition Height="Auto" />
                       <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                   <ContentPresenter Content="{TemplateBinding Path=AnimationContent}"/>
                   <ContentPresenter Content="{TemplateBinding Path=BusyContent}" Margin="30"
                               Grid.RowSpan="2"
                               HorizontalOptions="Center" />
                </Grid>
             </ControlTemplate>
        </telerikPrimitives:RadBusyIndicator.BusyContentTemplate>
    </telerikPrimitives:RadBusyIndicator>

    For more information please take a look at the following link in our documentation: https://docs.telerik.com/devtools/xamarin/controls/busyindicator/busyindicator-custom-busy-content#custom-busy-content.

    I hope I was helpful.

    Regards,
    Didi
    Progress Telerik
    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. Unb
    Unb avatar
    16 posts
    Member since:
    Oct 2018

    Posted 15 Nov 2018 in reply to Didi Link to this post

    Thank you for the answer Didi. It is somehow working but not exactly how I want..

     

    I put an image on the busy content but I need to fill it out in the center of ring. For example, I want to put a stacklayout in the center of ring and filled the center completely (the aim is that give a background color inside the ring) and then put a transparent image..

     

    The second problem is, as you see the picture that I attached, the ring has 2 colors. From dark red to light red and then white.. Is it possible to do that kind of circle? I am trying to do same thing as the picture. As I read the article regarding busyindicator, it said that I can customize how I want.. But even I cannot change the circle color how I want..

     

    Thank you

  4. Didi
    Admin
    Didi avatar
    243 posts

    Posted 16 Nov 2018 Link to this post

    Hello,

    I am sorry to hear that the suggested approach is not the expected one.

    Let me get straight to your questions:

    1) Image inside the BusyContent:

    We have an example with same scenario in our QSF application. How to achieve this, please take a look at the CustomIndicatorView sample at the following link: https://github.com/telerik/telerik-xamarin-forms-samples/tree/master/_Samples%20Application/QSF/Examples/BusyIndicatorControl/CustomIndicatorExample

    2) Change the circle color:

    The color of the Animation could be changed when AnimationContentColor property of the RadBusyIndicator is set. Please refer to the CustomBusyContentView example in our QSF app.

    If you have any additional questions or concerns regarding this, please send me the project with all setup included. Also note that you should open a support ticket and attach it there because in the forum only image attachments are allowed.

    Regards,
    Didi
    Progress Telerik
    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
  5. Unb
    Unb avatar
    16 posts
    Member since:
    Oct 2018

    Posted 16 Nov 2018 in reply to Didi Link to this post

    Hello Didi

     

    Thank you for your reply but I think you did not understand what I want..Well

     

    I know these examples already but they are not what I want..

    1- I want keep going Animation type 3 but only want to add an image in the circle, not as a circle. The code u show me, its a tire example and complete tire rotates. But I want my image to stay and animation type 3 animates, not the image. Image should be only center of the circle.

     

    2- I know to change this color, but I was asking to change <gray> color on the ring

     

    I've attached an image regarding what I want to do.. I hope its clear now..

     

     

     

  6. Unb
    Unb avatar
    16 posts
    Member since:
    Oct 2018

    Posted 20 Nov 2018 in reply to Unb Link to this post

    I tried many things but was not really how I want. Its very difficult to customize it. Is there any opinion/solutiion? Thanx
  7. Answer
    Didi
    Admin
    Didi avatar
    243 posts

    Posted 21 Nov 2018 Link to this post

    Hello,

    RadBusyIndicator does not provide second color for its animations. In this case you should create a custom animation. You can take a look at the following link how to implement a custom animation: https://docs.telerik.com/devtools/xamarin/controls/busyindicator/busyindicator-animations#custom-animation.

    I have created a sample example shows how to implement custom animation based on Animation 3 of the control. Please check the provided sample for more details. Also have it in mind that this is a sample implementation you could use as a starting point and further extend if needed. 

    Regards,
    Didi
    Progress Telerik
    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

  8. Unb
    Unb avatar
    16 posts
    Member since:
    Oct 2018

    Posted 22 Nov 2018 in reply to Didi Link to this post

    Hello Didi, Thank you so much for your example. It seems fine. As I see, you could not also fit the image in the circle :) But its fine like that. Thank you again for your attention
Back to Top