How to Prevent User Interaction in .NET MAUI Busyindicator?

This article guides you on how to prevent user interactions on a page within a .NET MAUI app when the .NET MAUI BusyIndicator is active.

To prevent user interactions while the BusyIndicator is active, you can set the InputTransparent property of the main content’s parent layout based on the IsRunning property of the BusyIndicator. The InputTransparent property ensures that user input is ignored when the BusyIndicator is running.

Model

public class Model
{
    public string? Title {  get; set; }
    public string? Description {  get; set; }
}

ViewModel

public class MainViewModel : INotifyPropertyChanged
{
    private bool _isBusy;
    public bool IsBusy
    {
        get => _isBusy;
        set
        {
            _isBusy = value;
            OnPropertyChanged(nameof(IsBusy));
        }
    }

    public ObservableCollection<Model>? NewsHeadlines { get; set; }
    public ICommand? RefreshNewsCommand { get; }

    public MainViewModel()
    {
        NewsHeadlines = new ObservableCollection<Model>
        {
            new Model(){ Title="Breaking: ", Description="Market hits all-time high"},
            new Model(){ Title="Local Sports: ", Description="Team wins championship"},
            new Model(){ Title="Weather Update: ", Description="Storm approaching"},
            new Model(){ Title="Technology: ", Description="New smartphone released"},
        };
        RefreshNewsCommand = new Command(async () => await RefreshNewsAsync());
    }

    private async Task RefreshNewsAsync()
    {
        IsBusy = true;
        await Task.Delay(2000); 
        NewsHeadlines?.Add(new Model() { Title = "Health: ", Description = "New fitness trends for 2025" });
        NewsHeadlines?.Add(new Model() { Title = "Finance: ", Description = "Stocks see major surge" });
        IsBusy = false;
    }

    public event PropertyChangedEventHandler? PropertyChanged;
    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

XAML

<Grid>
    <Grid x:Name="grid" RowDefinitions="Auto,100" HorizontalOptions="Center" InputTransparent="{Binding IsBusy}" >
        <Border WidthRequest="300" Padding="10">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="6"/>
            </Border.StrokeShape>
            <ListView ItemsSource="{Binding NewsHeadlines}" HorizontalOptions="Center" RowHeight="30">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <HorizontalStackLayout Spacing="10">
                                <Label Text="{Binding Title}" FontAttributes="Bold" HorizontalOptions="Center" />
                                <Label Text="{Binding Description}" HorizontalOptions="Center" />
                            </HorizontalStackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </Border>

        <Button Grid.Row="1" Text="Refresh News" Command="{Binding RefreshNewsCommand}"
                VerticalOptions="Center" HorizontalOptions="Center"/>
    </Grid>

    <indicator:SfBusyIndicator x:Name="indicator"
                               IsRunning="{Binding IsBusy}"
                               Title="Loading...">
        <indicator:SfBusyIndicator.OverlayFill>
            <Color x:FactoryMethod="FromRgba">
                <x:Arguments>
                    <x:Int32>211</x:Int32>
                    <x:Int32>211</x:Int32>
                    <x:Int32>211</x:Int32>
                    <x:Int32>155</x:Int32>
                </x:Arguments>
            </Color>
        </indicator:SfBusyIndicator.OverlayFill>
    </indicator:SfBusyIndicator>
</Grid>

Output

Download the complete sample from GitHub

Conclusion

I hope you enjoyed learning how to prevent user interaction in .NET MAUI Busyndicator.

You can refer to our .NET MAUI BusyIndicator’s feature tour page for other groundbreaking feature representations. Explore our .NET MAUI BusyIndicator documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Busy Indicator and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!