Skip to content

Commit 40e2899

Browse files
Karthickmani97Karthickmani97
authored
Merge pull request #3917 from syncfusion-content/liquid-glass-controls-ug-dev
985616-[Dev] Liquid Glass Effect UG for Progresbar controls
2 parents 64f6a2a + a475308 commit 40e2899

File tree

3 files changed

+294
-0
lines changed

3 files changed

+294
-0
lines changed

‎MAUI/LinearProgressBar/liquid-glass-effect.md‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
---
2+
layout: post
3+
title: Liquid Glass Effect for .NET MAUI Linear Progress Bar | Syncfusion®
4+
description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion® .NET MAUI Linear Progress Bar (SfLinearProgressBar) control.
5+
platform: MAUI
6+
control: SfLinearProgressBar
7+
documentation: ug
8+
---
9+
10+
# Liquid Glass Effect in .NET MAUI Linear Progress Bar
11+
12+
The Liquid Glass Effect introduces a modern, translucent design with adaptive color tinting and light refraction, creating a sleek, glass like user experience that remains clear and accessible. This section explains how to enable and customize the effect in the Syncfusion® .NET MAUI Linear Progress Bar (SfLinearProgressBar) control.
13+
14+
## Apply liquid glass effect
15+
16+
Follow these steps to enable and configure the Liquid Glass Effect in the Linear Progress Bar control:
17+
18+
### Step 1: Wrap the control inside glass effect view
19+
20+
To apply the Liquid Glass Effect to the Syncfusion® .NET MAUI [LinearProgressBar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ProgressBar.SfLinearProgressBar.html) control, wrap the control inside the `SfGlassEffectView` class.
21+
22+
For more details, refer to the `Liquid Glass Getting Started documentation`.
23+
24+
### Step 2: Customize the background
25+
26+
To achieve a glass like background in the Linear Progress Bar, set the `Background` property to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the controls.
27+
28+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the [SfLinearProgressBar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ProgressBar.SfLinearProgressBar.html) control:
29+
30+
{% tabs %}
31+
{% highlight xaml hl_lines="14 15 16 25" %}
32+
33+
<Grid>
34+
<Grid.Background>
35+
<LinearGradientBrush StartPoint="0,0"
36+
EndPoint="0,1">
37+
<GradientStop Color="#0F4C75"
38+
Offset="0.0" />
39+
<GradientStop Color="#3282B8"
40+
Offset="0.5" />
41+
<GradientStop Color="#1B262C"
42+
Offset="1.0" />
43+
</LinearGradientBrush>
44+
</Grid.Background>
45+
<StackLayout>
46+
<core:SfGlassEffectView HeightRequest="18"
47+
CornerRadius="9"
48+
EffectType="Clear">
49+
<progressBar:SfLinearProgressBar x:Name="linearProgressBar"
50+
TrackHeight="8"
51+
ProgressHeight="8"
52+
ProgressCornerRadius="8"
53+
TrackCornerRadius="8"
54+
Progress="75"
55+
Margin="5"
56+
BackgroundColor="Transparent" />
57+
</core:SfGlassEffectView>
58+
</StackLayout>
59+
</Grid>
60+
61+
{% endhighlight %}
62+
{% highlight c# hl_lines="19 21 22 23 37 38" %}
63+
64+
var gradientBrush = new LinearGradientBrush
65+
{
66+
StartPoint = new Point(0, 0),
67+
EndPoint = new Point(0, 1),
68+
GradientStops = new GradientStopCollection
69+
{
70+
new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
71+
new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
72+
new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
73+
}
74+
};
75+
76+
var grid = new Grid
77+
{
78+
Background = gradientBrush
79+
};
80+
81+
var stackLayout = new StackLayout();
82+
var glassView = new SfGlassEffectView
83+
{
84+
HeightRequest = 18,
85+
CornerRadius = 9,
86+
EffectType = LiquidGlassEffectType.Clear
87+
};
88+
89+
var linearProgressBar = new SfLinearProgressBar
90+
{
91+
TrackHeight = 8,
92+
ProgressHeight = 8,
93+
ProgressCornerRadius = 8,
94+
TrackCornerRadius = 8,
95+
Progress = 75,
96+
Margin = new Thickness(5),
97+
BackgroundColor = Colors.Transparent
98+
};
99+
100+
glassView.Content = linearProgressBar;
101+
stackLayout.Children.Add(glassView);
102+
grid.Children.Add(stackLayout);
103+
this.Content = grid;
104+
105+
{% endhighlight %}
106+
{% endtabs %}
107+
108+
N>
109+
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
110+
* This feature is available only in `.NET 10.`

‎MAUI/StepProgressBar/liquid-glass-effect.md‎

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
---
2+
layout: post
3+
title: Liquid Glass Effect for .NET MAUI Step Progress Bar | Syncfusion®
4+
description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion® .NET MAUI Step Progress Bar (SfStepProgressBar) control.
5+
platform: MAUI
6+
control: SfStepProgressBar
7+
documentation: ug
8+
---
9+
10+
# Liquid Glass Effect in .NET MAUI Step Progress Bar (SfStepProgressBar)
11+
12+
The Liquid Glass Effect introduces a modern, translucent design with adaptive color tinting and light refraction, creating a sleek, glass like user experience that remains clear and accessible. This section explains how to enable and customize the effect in the Syncfusion® .NET MAUI Step Progress Bar (SfStepProgressBar) control.
13+
14+
## Apply liquid glass effect
15+
16+
Follow these steps to enable and configure the Liquid Glass Effect in the Step Progress Bar control:
17+
18+
### Step 1: Wrap the control inside glass effect view
19+
20+
To apply the Liquid Glass Effect to the Syncfusion® .NET MAUI [StepProgressBar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ProgressBar.SfStepProgressBar.html) control, wrap the control inside the `SfGlassEffectView` class.
21+
22+
For more details, refer to the `Liquid Glass Getting Started documentation`.
23+
24+
### Step 2: Customize the background
25+
26+
To achieve a glass like background in the Step Progress Bar, set the `Background` property to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the controls.
27+
28+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the [SfStepProgressBar](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.ProgressBar.SfStepProgressBar.html) control:
29+
30+
{% tabs %}
31+
{% highlight xaml hl_lines="28 29 30 31 44" %}
32+
33+
<Grid>
34+
<Grid.Background>
35+
<LinearGradientBrush StartPoint="0,0"
36+
EndPoint="0,1">
37+
<GradientStop Color="#0F4C75"
38+
Offset="0.0" />
39+
<GradientStop Color="#3282B8"
40+
Offset="0.5" />
41+
<GradientStop Color="#1B262C"
42+
Offset="1.0" />
43+
</LinearGradientBrush>
44+
</Grid.Background>
45+
<Grid.BindingContext>
46+
<local:ViewModel />
47+
</Grid.BindingContext>
48+
<stepProgressBar:SfStepProgressBar x:Name="stepProgress"
49+
VerticalOptions="Center"
50+
HorizontalOptions="Center"
51+
Orientation="Horizontal"
52+
LabelSpacing="12"
53+
ActiveStepIndex="2"
54+
ActiveStepProgressValue="60"
55+
ProgressAnimationDuration="2500"
56+
ItemsSource="{Binding StepProgressItem}">
57+
<stepProgressBar:SfStepProgressBar.StepTemplate>
58+
<DataTemplate>
59+
<Grid>
60+
<core:SfGlassEffectView WidthRequest="32"
61+
HeightRequest="32"
62+
CornerRadius="16"
63+
Background="#007AFF">
64+
<Border Background="Transparent"
65+
Margin="0.5">
66+
<Border.StrokeShape>
67+
<RoundRectangle CornerRadius="15" />
68+
</Border.StrokeShape>
69+
<Label Text="&#xe70c;"
70+
FontFamily="MauiMaterialAssets"
71+
HorizontalOptions="Center"
72+
VerticalOptions="Center"
73+
TextColor="White"
74+
FontSize="20" />
75+
</Border>
76+
</core:SfGlassEffectView>
77+
</Grid>
78+
</DataTemplate>
79+
</stepProgressBar:SfStepProgressBar.StepTemplate>
80+
</stepProgressBar:SfStepProgressBar>
81+
</Grid>
82+
83+
{% endhighlight %}
84+
{% highlight c# hl_lines="18 20 21 22 23 47 48" %}
85+
86+
ViewModel viewModel = new ViewModel();
87+
SfStepProgressBar stepProgressBar = new SfStepProgressBar()
88+
{
89+
VerticalOptions = LayoutOptions.Center,
90+
HorizontalOptions = LayoutOptions.Center,
91+
Orientation = StepProgressBarOrientation.Horizontal,
92+
LabelSpacing = 12,
93+
ActiveStepIndex = 2,
94+
ActiveStepProgressValue = 60,
95+
ProgressAnimationDuration = 2500,
96+
ItemsSource = viewModel.StepProgressItem,
97+
};
98+
99+
var stepTemplate = new DataTemplate(() =>
100+
{
101+
var grid = new Grid();
102+
103+
var glassVeiew = new SfGlassEffectView
104+
{
105+
WidthRequest = 32,
106+
HeightRequest = 32,
107+
CornerRadius = 16,
108+
Background = Color.FromArgb("#007AFF")
109+
};
110+
111+
var border = new Border
112+
{
113+
Background = Colors.Transparent,
114+
Margin = new Thickness(0.5),
115+
StrokeShape = new RoundRectangle
116+
{
117+
CornerRadius = new CornerRadius(15)
118+
}
119+
};
120+
121+
var iconLabel = new Label
122+
{
123+
Text = "\ue70c",
124+
FontFamily = "MauiMaterialAssets",
125+
HorizontalOptions = LayoutOptions.Center,
126+
VerticalOptions = LayoutOptions.Center,
127+
TextColor = Colors.White,
128+
FontSize = 20
129+
};
130+
131+
border.Content = iconLabel;
132+
glassVeiew.Content = border;
133+
grid.Add(glassVeiew);
134+
135+
return grid;
136+
});
137+
138+
stepProgressBar.StepTemplate = stepTemplate;
139+
grid.Children.Add(stepProgressBar);
140+
this.Content = grid;
141+
142+
{% endhighlight %}
143+
{% highlight c# tabtitle="ViewModel.cs" %}
144+
145+
public class ViewModel
146+
{
147+
/// <summary>
148+
/// The Step progress bar item collection.
149+
/// </summary>
150+
private ObservableCollection<StepProgressBarItem> stepProgressItem;
151+
152+
/// <summary>
153+
/// The Step progress bar item collection.
154+
/// </summary>
155+
public ObservableCollection<StepProgressBarItem> StepProgressItem
156+
{
157+
get
158+
{
159+
return stepProgressItem;
160+
}
161+
set
162+
{
163+
stepProgressItem = value;
164+
}
165+
}
166+
167+
public ViewModel()
168+
{
169+
stepProgressItem = new ObservableCollection<StepProgressBarItem>();
170+
stepProgressItem.Add(new StepProgressBarItem() { PrimaryText = "Cart" });
171+
stepProgressItem.Add(new StepProgressBarItem() { PrimaryText = "Address" });
172+
stepProgressItem.Add(new StepProgressBarItem() { PrimaryText = "Delivery" });
173+
stepProgressItem.Add(new StepProgressBarItem() { PrimaryText = "Ordered" });
174+
}
175+
}
176+
177+
{% endhighlight %}
178+
{% endtabs %}
179+
180+
N>
181+
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
182+
* This feature is available only in `.NET 10.`

‎maui-toc.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -857,6 +857,7 @@
857857
<li><a href="/maui/LinearProgressBar/appearance">Appearance</a></li>
858858
<li><a href="/maui/LinearProgressBar/animation">Animation</a></li>
859859
<li><a href="/maui/LinearProgressBar/events">Events</a></li>
860+
<li><a href="/maui/LinearProgressBar/liquid-glass-effect">Liquid Glass UI</a></li>
860861
</ul>
861862
</li>
862863
<li>
@@ -1307,6 +1308,7 @@
13071308
<li><a href="/maui/StepProgressBar/tooltip">Tooltip</a></li>
13081309
<li><a href="/maui/StepProgressBar/right-to-left">Right To Left</a></li>
13091310
<li><a href="/maui/StepProgressBar/accessibility">Accessibility</a></li>
1311+
<li><a href="/maui/StepProgressBar/liquid-glass-effect">Liquid Glass UI</a></li>
13101312
</ul>
13111313
</li>
13121314
<li>

0 commit comments

Comments
 (0)