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

[Unb]

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: 

 

 

[Didi]

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

[Unb]

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

[Didi]

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/QSF/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

[Unb]

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..

 

 

 

[Unb]

I tried many things but was not really how I want. Its very difficult to customize it. Is there any opinion/solutiion? Thanx

[Didi]

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

[Unb]

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