Skip to content

SyncfusionExamples/How-to-Prevent-User-Interaction-While-BusyIndicator-is-Active-in-.NET-MAUI

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 

Repository files navigation

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

BusyIndicator_Interaction.gif

About

This repository contains a sample explaining how to prevent user interaction while BusyIndicator is active in .NET MAUI.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages