Skip to content

Commit da4c438

Browse files
committed
Updated the sample
1 parent 2f4ca3e commit da4c438

File tree

5 files changed

+73
-54
lines changed

5 files changed

+73
-54
lines changed

BusyIndicator/BusyIndicator.sln

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
Microsoft Visual Studio Solution File, Format Version 12.00
33
# Visual Studio Version 17
4-
VisualStudioVersion = 17.12.35514.174 d17.12
4+
VisualStudioVersion = 17.12.35514.174
55
MinimumVisualStudioVersion = 10.0.40219.1
66
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BusyIndicator", "BusyIndicator.csproj", "{FD4E08B9-7674-4252-9AC6-141E37EA8F11}"
77
EndProject
@@ -13,6 +13,7 @@ Global
1313
GlobalSection(ProjectConfigurationPlatforms) = postSolution
1414
{FD4E08B9-7674-4252-9AC6-141E37EA8F11}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
1515
{FD4E08B9-7674-4252-9AC6-141E37EA8F11}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{FD4E08B9-7674-4252-9AC6-141E37EA8F11}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
1617
{FD4E08B9-7674-4252-9AC6-141E37EA8F11}.Release|Any CPU.ActiveCfg = Release|Any CPU
1718
{FD4E08B9-7674-4252-9AC6-141E37EA8F11}.Release|Any CPU.Build.0 = Release|Any CPU
1819
EndGlobalSection

BusyIndicator/MainPage.xaml

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,10 @@
1919
<ListView.ItemTemplate>
2020
<DataTemplate>
2121
<ViewCell>
22-
<VerticalStackLayout Spacing="10">
23-
<Label Text="{Binding}" HorizontalOptions="Center" />
24-
</VerticalStackLayout>
22+
<HorizontalStackLayout Spacing="10">
23+
<Label Text="{Binding Title}" FontAttributes="Bold" HorizontalOptions="Center" />
24+
<Label Text="{Binding Description}" HorizontalOptions="Center" />
25+
</HorizontalStackLayout>
2526
</ViewCell>
2627
</DataTemplate>
2728
</ListView.ItemTemplate>

BusyIndicator/MainViewModel.cs

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,17 @@ public bool IsBusy
1818
}
1919
}
2020

21-
public ObservableCollection<string>? NewsHeadlines { get; set; }
21+
public ObservableCollection<Model>? NewsHeadlines { get; set; }
2222
public ICommand? RefreshNewsCommand { get; }
2323

2424
public MainViewModel()
2525
{
26-
NewsHeadlines = new ObservableCollection<string>
26+
NewsHeadlines = new ObservableCollection<Model>
2727
{
28-
"Breaking: Market hits all-time high",
29-
"Local Sports: Team wins championship",
30-
"Weather Update: Storm approaching",
31-
"Technology: New smartphone released"
28+
new Model(){ Title="Breaking: ", Description="Market hits all-time high"},
29+
new Model(){ Title="Local Sports: ", Description="Team wins championship"},
30+
new Model(){ Title="Weather Update: ", Description="Storm approaching"},
31+
new Model(){ Title="Technology: ", Description="New smartphone released"},
3232
};
3333
RefreshNewsCommand = new Command(async () => await RefreshNewsAsync());
3434
}
@@ -37,8 +37,8 @@ private async Task RefreshNewsAsync()
3737
{
3838
IsBusy = true;
3939
await Task.Delay(2000);
40-
NewsHeadlines?.Add("Health: New fitness trends for 2025");
41-
NewsHeadlines?.Add("Finance: Stocks see major surge");
40+
NewsHeadlines?.Add(new Model() { Title = "Health: ", Description = "New fitness trends for 2025" });
41+
NewsHeadlines?.Add(new Model() { Title = "Finance: ", Description = "Stocks see major surge" });
4242
IsBusy = false;
4343
}
4444

BusyIndicator/Model.cs

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
namespace BusyIndicator
2+
{
3+
public class Model
4+
{
5+
public string? Title { get; set; }
6+
public string? Description { get; set; }
7+
}
8+
}

README.md

Lines changed: 51 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,70 +2,81 @@ This article guides you on how to prevent user interactions on a page within a .
22

33
To prevent user interactions while the `BusyIndicator` is active, you can set the [InputTransparent](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.visualelement.inputtransparent?view=net-maui-9.0) property of the main content's parent layout based on the [IsRunning](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Core.SfBusyIndicator.html#Syncfusion_Maui_Core_SfBusyIndicator_IsRunning) property of the BusyIndicator. The `InputTransparent` property ensures that user input is ignored when the BusyIndicator is running.
44

5+
**Model**
6+
7+
```
8+
public class Model
9+
{
10+
public string? Title { get; set; }
11+
public string? Description { get; set; }
12+
}
13+
```
14+
515
**ViewModel**
616

717
```
8-
public class MainViewModel : INotifyPropertyChanged
18+
public class MainViewModel : INotifyPropertyChanged
19+
{
20+
private bool _isBusy;
21+
public bool IsBusy
922
{
10-
private bool _isBusy;
11-
public bool IsBusy
23+
get => _isBusy;
24+
set
1225
{
13-
get => _isBusy;
14-
set
15-
{
16-
_isBusy = value;
17-
OnPropertyChanged(nameof(IsBusy));
18-
}
26+
_isBusy = value;
27+
OnPropertyChanged(nameof(IsBusy));
1928
}
29+
}
2030
21-
public ObservableCollection<string>? NewsHeadlines { get; set; }
22-
public ICommand? RefreshNewsCommand { get; }
31+
public ObservableCollection<Model>? NewsHeadlines { get; set; }
32+
public ICommand? RefreshNewsCommand { get; }
2333
24-
public MainViewModel()
34+
public MainViewModel()
35+
{
36+
NewsHeadlines = new ObservableCollection<Model>
2537
{
26-
NewsHeadlines = new ObservableCollection<string>
27-
{
28-
"Breaking: Market hits all-time high",
29-
"Local Sports: Team wins championship",
30-
"Weather Update: Storm approaching",
31-
"Technology: New smartphone released"
32-
};
33-
RefreshNewsCommand = new Command(async () => await RefreshNewsAsync());
34-
}
38+
new Model(){ Title="Breaking: ", Description="Market hits all-time high"},
39+
new Model(){ Title="Local Sports: ", Description="Team wins championship"},
40+
new Model(){ Title="Weather Update: ", Description="Storm approaching"},
41+
new Model(){ Title="Technology: ", Description="New smartphone released"},
42+
};
43+
RefreshNewsCommand = new Command(async () => await RefreshNewsAsync());
44+
}
3545
36-
private async Task RefreshNewsAsync()
37-
{
38-
IsBusy = true;
39-
await Task.Delay(2000);
40-
NewsHeadlines?.Add("Health: New fitness trends for 2025");
41-
NewsHeadlines?.Add("Finance: Stocks see major surge");
42-
IsBusy = false;
43-
}
46+
private async Task RefreshNewsAsync()
47+
{
48+
IsBusy = true;
49+
await Task.Delay(2000);
50+
NewsHeadlines?.Add(new Model() { Title = "Health: ", Description = "New fitness trends for 2025" });
51+
NewsHeadlines?.Add(new Model() { Title = "Finance: ", Description = "Stocks see major surge" });
52+
IsBusy = false;
53+
}
4454
45-
public event PropertyChangedEventHandler? PropertyChanged;
46-
protected virtual void OnPropertyChanged(string propertyName)
47-
{
48-
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
49-
}
55+
public event PropertyChangedEventHandler? PropertyChanged;
56+
protected virtual void OnPropertyChanged(string propertyName)
57+
{
58+
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
5059
}
60+
}
5161
```
5262

5363
**XAML**
5464

5565
```
5666
<Grid>
57-
<Grid x:Name="grid" RowDefinitions="Auto,100" InputTransparent="{Binding IsBusy}" >
67+
<Grid x:Name="grid" RowDefinitions="Auto,100" HorizontalOptions="Center" InputTransparent="{Binding IsBusy}" >
5868
<Border WidthRequest="300" Padding="10">
5969
<Border.StrokeShape>
6070
<RoundRectangle CornerRadius="6"/>
6171
</Border.StrokeShape>
62-
<ListView ItemsSource="{Binding NewsHeadlines}" RowHeight="30">
72+
<ListView ItemsSource="{Binding NewsHeadlines}" HorizontalOptions="Center" RowHeight="30">
6373
<ListView.ItemTemplate>
6474
<DataTemplate>
6575
<ViewCell>
66-
<VerticalStackLayout Spacing="10">
67-
<Label Text="{Binding}" HorizontalOptions="Center" />
68-
</VerticalStackLayout>
76+
<HorizontalStackLayout Spacing="10">
77+
<Label Text="{Binding Title}" FontAttributes="Bold" HorizontalOptions="Center" />
78+
<Label Text="{Binding Description}" HorizontalOptions="Center" />
79+
</HorizontalStackLayout>
6980
</ViewCell>
7081
</DataTemplate>
7182
</ListView.ItemTemplate>
@@ -93,8 +104,6 @@ To prevent user interactions while the `BusyIndicator` is active, you can set th
93104
</Grid>
94105
```
95106

96-
By using the `InputTransparent` property in conjunction with the `IsRunning` property of the BusyIndicator, you can effectively block user interactions on a page within a .NET MAUI application when needed. This approach ensures that users have a clear indication of ongoing tasks and minimizes potential disruptions or errors from unintended user actions.
97-
98107
**Output**
99108

100-
![BusyIndicator.gif](https://support.syncfusion.com/kb/agent/attachment/article/19037/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM1NDYyIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.tengmMXFZRA3j34RtHLCrY2X0Z8oYqlByE0l7W2BgFE)
109+
![BusyIndicator_Interaction.gif](https://support.syncfusion.com/kb/agent/attachment/article/19037/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjM2NDA4Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.IJ1hMbmrOUqb6EOXHP25OucTypfloO1DCvT7S3dHW_s)

0 commit comments

Comments
 (0)