How to show it like a modal popup

[Carl]

Could you please guide me in how to show the busy indicator in full screen mode (like modal popups) preventing the user to tap or doing something in the screen until I close it?

[Didi]

Hi Carl,

In general, when RadBusyIndicator is in busy state, it hides its content and shows the animation. You can prevent user to get control for all components on the page when BusyIndicator is busy by using a grid layout. All UI controls you want to use should be inside of a Grid and after them you have to use BusyIndicator, which spans inside all rows and columns of the Grid.

The snippet below shows how this could be achieved:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Label Text="Welcome to Xamarin.Forms! Lorem ipsum dolor sit amet"
         LineBreakMode="WordWrap"
         HorizontalOptions="Start" />
    <Entry Text="Welcome to Xamarin.Forms!"
         HorizontalOptions="Center" VerticalOptions="Start"
         Grid.Row="1"/>

    <telerikBusyIndicator:RadBusyIndicator x:Name="busy"
                              IsBusy="True"
                              Grid.RowSpan="2"/>
</Grid>

I hope this would work in your case. Let me know if you have any other questions.

Regards,
Didi
Progress Telerik

[Ion]

Hello Didi,
I didn't try this specific example, but I have a page created through the code which does the almost same thing (line one some controls, line 2 buttons and BusyIndicator). It shows the busy indicator to the entire page, which is good and what I want, but it doesn't prevent the user for clicking on the buttons or controls.
Do you have any suggestion what I can have done wrong?

 

Best regards,

Ion.

[Lance | Senior Manager Technical Support]

Hi Ion,

Without seeing how you setup the page, we cant give you a definitive answer. The layout Didi is using is critical to the success of the approach (i.e. the Busyindicator is on top of the page elements).

The bottom line is if the user can interact with elements, then you've either accidentally enabled the BusyIndicator.InputTransparent = True (this lets interactions go through the control)  or the BusyIndicator is not really on top of the other page elements (i.e. maybe you put it inside a StackLayout instead of the top element of a Grid?).

 I recommend setting a temporary background color to the BusyIndicator so you can visualize exactly where it is being rendered. For example set it to Red 

For example:

<telerikBusyIndicator:RadBusyIndicator 
    BackgroundColor="Red" 
    VerticalOptions="Fill"
    HorizontalOptions="Fill"
...
/>

The will let you know for sure if you are really overlaying the content or not.

Further Investigation

If that doesn't help you, please take the following steps so we can give you a working solution

1. Open a new Technical Support Ticket (select Xamarin -> BusyIndicator)
2. ZIP up the code files that contain the BusyIndicator and attach it to the ticket
3. In the ticket body, explain where the relevant code is and add any additional information that may help us

The team will see the case come in and since you have Priority Support, you'll have an answer in less than 24 hours.

Regards,
Lance | Manager Technical Support
Progress Telerik