Xamarin Forms - Change Cursor to Wait Cursor

Question

In most desktop apps, if you're waiting for something, the mouse cursor will change to a wait cursor. Obviously, phones are a bit different. But, in UWP land, we'd like the mouse cursor to change to a wait cursor while async operations are occurring.

Is there a way to do this in standard Xamarin Forms? Or, with a 3rd party library?

The hope would be that on phones, there would be some other visual indicator that something is occurring. I.e. keyboard colour changes or something similar.

If not, I'm guessing I'll have to implement some dependency injected code for each platform. Any tips?

Answer 1

Mine is a similar answer to Dennis, with a bit more re-use.

I created a control template in App.xaml

   <ControlTemplate x:Key="ActivityIndicatorTemplate">
        <Grid>
            <ContentPresenter />
            <StackLayout Style="{StaticResource BlockingPanel}"
                         IsVisible="{TemplateBinding BindingContext.IsBusy}">
                <ActivityIndicator Style="{StaticResource ActivityIndicatorStyle}"
                                   IsVisible="{TemplateBinding BindingContext.IsBusy}"
                                   IsRunning="{TemplateBinding BindingContext.IsBusy}" />
            </StackLayout>
        </Grid>
    </ControlTemplate>

Here are the styles

    <Style x:Key="BlockingPanel" TargetType="StackLayout">
        <Setter Property="BackgroundColor" Value="{StaticResource BlockingColor}" />
        <Setter Property="HorizontalOptions" Value="FillAndExpand" />
        <Setter Property="VerticalOptions" Value="FillAndExpand" />
    </Style>

    <Style x:Key="ActivityIndicatorStyle" TargetType="ActivityIndicator">
        <Setter Property="Color" Value="White" />
        <Setter Property="HorizontalOptions" Value="CenterAndExpand" />
        <Setter Property="VerticalOptions" Value="CenterAndExpand" />
    </Style>

   <Color x:Key="BlockingColor">
        <x:Arguments>
            <x:Double>0</x:Double>
            <x:Double>0</x:Double>
            <x:Double>0</x:Double>
            <x:Double>0.75</x:Double>
        </x:Arguments>
    </Color>

Then you can use it on any page like this

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Incident.Pages.LoginPage"
             ControlTemplate="{StaticResource ActivityIndicatorTemplate}"
             Title="Login">

...

</ContentPage>

Answer 2

Not an answer to your UWP question, but this is how you can handle things on phone:

You could add a Grid over the whole page and make it grey and half transparent so the rest of your page gets "greyed out". Then add an ActivityIndicator to the middle of the Grid to indicate something is loading. Set IsVisible of the Grid to a bool value that indicates that something is loading/happening.

This is what I got on one of my pages:

<Grid BackgroundColor="##60000000"
        IsVisible="{Binding IsLoading}">
    <Grid VerticalOptions="CenterAndExpand">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".5*" />
            <ColumnDefinition Width="9*" />
            <ColumnDefinition Width=".5*" />
        </Grid.ColumnDefinitions>
        <Frame Grid.Column="1"
                HorizontalOptions="Center"
                VerticalOptions="Center"
                Padding="0"
                HasShadow="True"
                OutlineColor="#e6e6e6">
            <Grid BackgroundColor="White"
                    RowSpacing="0"
                    ColumnSpacing="0">
                <StackLayout>
                    <ActivityIndicator IsRunning="true"
                                        Margin="10"
                                        HorizontalOptions="Center"
                                        VerticalOptions="Center" />
                    <Label Text="{i18n:Translate Text=loading_contacts}"
                            Margin="20,0,20,10"
                            HorizontalOptions="Center"
                            VerticalOptions="Center"/>
                </StackLayout>     
            </Grid>
        </Frame>
    </Grid>
</Grid>