Disable Xamarin Form and Show Activity Indicator

Question

I have a Xamarin Form which is using Scroll View. I am trying to show a Activity Indicator at the top as I have a ListView in the middle. But when the user scrolls down the loading is not shown. So, I need help in disabling the page and showing loading at some z-index as in a popup.

Answer 1

If you want to have an overlay while the screen is loading you can do this.

<Grid>

    <ScrollView>
       <!-- Insert your page content in here -->
    </ScrollView>

    <ContentView IsVisible="false" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
         <ActivityIndicator IsRunning="false" />
    </ContentView>

</Grid>

When you set your ContentView to IsVisible="true" it will then overlay on top of your page. You can set the background color and opacity on the ContentView if needed to provide a grey out effect.

Or you can use a similar method and have

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

    <ActivityIndicator Grid.Row="0" />

    <ScrollView Grid.Row="1">

    </ScrollView>
</Grid>

In this way you will have the activity indicator above the scroll view at all times and allow the user to still scroll.

Answer 2

I am new to the Xamarin but you do as below.

 <Grid IsEnabled="{Binding IsBusy,Converter={converters:InverseBoolConverter}}"   >
...
     <ActivityIndicator      
              Color="{StaticResource LightGreenColor}"
              IsRunning="{Binding IsBusy}"
              IsVisible="{Binding IsBusy}"
              VerticalOptions="Center"
              HorizontalOptions="Center">
                <ActivityIndicator.WidthRequest>
                    <OnPlatform x:TypeArguments="x:Double">
                        <On Platform="iOS, Android" Value="100" />
                        <On Platform="UWP, WinRT, WinPhone" Value="400" />
                    </OnPlatform>
                </ActivityIndicator.WidthRequest>
            </ActivityIndicator>
        </Grid>