Skip to content

Commit 64f6a2a

Browse files
Karthickmani97Karthickmani97
authored
Merge pull request #3918 from syncfusion-content/997111-UG-Content-Kanban-Liquid-Effect
997111 - Added UG content for Kanban liquid effect
2 parents 21b4bf1 + 932908f commit 64f6a2a

File tree

3 files changed

+287
-27
lines changed

3 files changed

+287
-27
lines changed

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

Lines changed: 3 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,7 @@ The following code snippet demonstrates how to apply the Liquid Glass Effect to
3434
{% tabs %}
3535
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
3636

37-
<Grid>
38-
<Grid.Background>
39-
<LinearGradientBrush StartPoint="0,0"
40-
EndPoint="0,1">
41-
<GradientStop Color="#0F4C75"
42-
Offset="0.0"/>
43-
<GradientStop Color="#3282B8"
44-
Offset="0.5"/>
45-
<GradientStop Color="#1B262C"
46-
Offset="1.0"/>
47-
</LinearGradientBrush>
48-
</Grid.Background>
49-
37+
<Grid BackgroundColor="Transparent">
5038
<core:SfGlassEffectView EffectType="Regular"
5139
CornerRadius="20">
5240
<imageEditor:SfImageEditor x:Name="imageEditor"
@@ -68,24 +56,12 @@ The following code snippet demonstrates how to apply the Liquid Glass Effect to
6856
using Syncfusion.Maui.Core;
6957
using Syncfusion.Maui.ImageEditor;
7058

71-
var gradientBrush = new LinearGradientBrush
72-
{
73-
StartPoint = new Point(0, 0),
74-
EndPoint = new Point(0, 1),
75-
GradientStops = new GradientStopCollection
76-
{
77-
new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
78-
new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
79-
new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
80-
}
81-
};
82-
8359
var grid = new Grid
8460
{
85-
Background = gradientBrush
61+
BackgroundColor = Colors.Transparent
8662
};
8763

88-
var glassView = new SfGlassEffectsView
64+
var glassView = new SfGlassEffectView
8965
{
9066
CornerRadius = 20,
9167
EffectType = LiquidGlassEffectType.Regular

‎MAUI/Kanban-Board/liquid-glass-effect.md‎

Lines changed: 283 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,283 @@
1+
---
2+
layout: post
3+
title: Liquid Glass Effect for .NET MAUI Kanban control | Syncfusion®
4+
description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion® .NET MAUI Kanban Board (SfKanban) control.
5+
platform: MAUI
6+
control: Kanban (SfKanban)
7+
documentation: ug
8+
---
9+
10+
# Liquid Glass Effect in .NET MAUI Kanban Board (SfKanban)
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 Kanban Board (SfKanban) control.
13+
14+
## Apply liquid glass effect
15+
16+
Follow these steps to enable and configure the Liquid Glass Effect in the Kanban control:
17+
18+
### Step 1: Wrap the control inside glass effect view
19+
20+
To apply the Liquid Glass Effect to Syncfusion® .NET MAUI `Kanban` 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: Enable the liquid glass effect on Kanban
25+
26+
Set the `EnableLiquidGlassEffect` property to `true` in the `SfKanban` control to apply the Liquid Glass Effect. When enabled, the effect is also applied to its child elements and provides responsive interaction for a smooth and engaging user experience.
27+
28+
### Step 3: Customize the background
29+
30+
To achieve a glass like background in the Kanban control, set its `Background` property to `Transparent` and apply theme keys with transparent values to enable the liquid glass effect for kanban child elements. This ensures a consistent look and feel across your application.
31+
32+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `Kanban` control:
33+
34+
{% tabs %}
35+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="8" %}
36+
37+
<Grid BackgroundColor="Transparent">
38+
<core:SfGlassEffectView EffectType="Clear"
39+
CornerRadius="7">
40+
<kanban:SfKanban x:Name="kanban"
41+
Background="Transparent"
42+
AutoGenerateColumns="False"
43+
ItemsSource="{Binding Cards}"
44+
EnableLiquidGlassEffect="True">
45+
<kanban:SfKanban.Columns>
46+
<kanban:KanbanColumn Title="To Do"
47+
Categories="Open"/>
48+
<kanban:KanbanColumn Title="In Progress"
49+
Categories="In Progress"/>
50+
<kanban:KanbanColumn Title="Code Review"
51+
Categories="Code Review"/>
52+
<kanban:KanbanColumn Title="Done"
53+
Categories="Done"/>
54+
</kanban:SfKanban.Columns>
55+
<kanban:SfKanban.BindingContext>
56+
<local:KanbanViewModel/>
57+
</kanban:SfKanban.BindingContext>
58+
</kanban:SfKanban>
59+
</core:SfGlassEffectView>
60+
</Grid>
61+
62+
{% endhighlight %}
63+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="8 22 23 24 25 26" %}
64+
65+
using Syncfusion.Maui.Kanban;
66+
using Syncfusion.Maui.Core;
67+
68+
var kanban = new SfKanban
69+
{
70+
Background = Colors.Transparent,
71+
AutoGenerateColumns = false,
72+
EnableLiquidGlassEffect = true,
73+
BindingContext = new KanbanViewModel()
74+
};
75+
76+
kanban.Columns.Add(new KanbanColumn { Title = "To Do", Categories = new List<string> { "Open" } });
77+
kanban.Columns.Add(new KanbanColumn { Title = "In Progress", Categories = new List<string> { "In Progress" } });
78+
kanban.Columns.Add(new KanbanColumn { Title = "Code Review", Categories = new List<string> { "Code Review" } });
79+
kanban.Columns.Add(new KanbanColumn { Title = "Done", Categories = new List<string> { "Done" } });
80+
81+
var grid = new Grid
82+
{
83+
BackgroundColor = Colors.Transparent
84+
};
85+
86+
var glassView = new SfGlassEffectView
87+
{
88+
CornerRadius = 7,
89+
EffectType = LiquidGlassEffectType.Clear
90+
};
91+
92+
glassView.Content = this.kanban;
93+
grid.Children.Add(glassView);
94+
this.Content = grid;
95+
96+
{% endhighlight %}
97+
{% highlight C# tabtitle="KanbanViewModel.cs" %}
98+
99+
public class KanbanViewModel
100+
{
101+
#region Constructor
102+
103+
/// <summary>
104+
/// Initializes a new instance of the <see cref="KanbanViewModel"/> class.
105+
/// </summary>
106+
public KanbanViewModel()
107+
{
108+
this.Cards = this.GetCardDetails();
109+
}
110+
111+
#endregion
112+
113+
#region Properties
114+
115+
/// <summary>
116+
/// Gets or sets the collection of <see cref="KanbanModel"/> objects representing cards in various stages.
117+
/// </summary>
118+
public ObservableCollection<KanbanModel> Cards { get; set; }
119+
120+
#endregion
121+
122+
#region Private methods
123+
124+
/// <summary>
125+
/// Method to get the collection of predefined Kanban task cards.
126+
/// </summary>
127+
/// <returns>The collection of <see cref="KanbanModel"/> instances.</returns>
128+
private ObservableCollection<KanbanModel> GetCardDetails()
129+
{
130+
var cardsDetails = new ObservableCollection<KanbanModel>();
131+
132+
cardsDetails.Add(new KanbanModel()
133+
{
134+
ID = 1,
135+
Title = "iOS - 1",
136+
Category = "Open",
137+
Description = "Analyze customer requirements.",
138+
IndicatorFill = Colors.Red,
139+
Tags = new List<string> { "Bug", "Customer", "Release Bug" }
140+
});
141+
142+
cardsDetails.Add(new KanbanModel()
143+
{
144+
ID = 6,
145+
Title = "Xamarin - 6",
146+
Category = "Open",
147+
Description = "Show the retrieved data from the server in Grid control.",
148+
IndicatorFill = Colors.Red,
149+
Tags = new List<string> { "Bug", "Customer", "Breaking Issue" }
150+
});
151+
152+
cardsDetails.Add(new KanbanModel()
153+
{
154+
ID = 3,
155+
Title = "iOS - 3",
156+
Category = "Postponed",
157+
Description = "Fix the filtering issues reported in Safari.",
158+
IndicatorFill = Colors.Red,
159+
Tags = new List<string> { "Bug", "Customer", "Breaking Issue" }
160+
});
161+
162+
cardsDetails.Add(new KanbanModel()
163+
{
164+
ID = 11,
165+
Title = "iOS - 21",
166+
Category = "Postponed",
167+
Description = "Add input validation for editing.",
168+
IndicatorFill = Colors.Red,
169+
Tags = new List<string> { "Bug", "Customer", "Breaking Issue" }
170+
});
171+
172+
cardsDetails.Add(new KanbanModel()
173+
{
174+
ID = 15,
175+
Title = "Android - 15",
176+
Category = "Open",
177+
Description = "Arrange web meetings for customers.",
178+
IndicatorFill = Colors.Red,
179+
Tags = new List<string> { "Story", "Kanban" }
180+
});
181+
182+
cardsDetails.Add(new KanbanModel()
183+
{
184+
ID = 3,
185+
Title = "Android - 3",
186+
Category = "Code Review",
187+
Description = "API Improvements.",
188+
IndicatorFill = Colors.Purple,
189+
Tags = new List<string> { "Bug", "Customer" }
190+
});
191+
192+
cardsDetails.Add(new KanbanModel()
193+
{
194+
ID = 4,
195+
Title = "UWP - 4",
196+
Category = "Code Review",
197+
Description = "Enhance editing functionality.",
198+
IndicatorFill = Colors.Brown,
199+
Tags = new List<string> { "Story", "Kanban" }
200+
});
201+
202+
cardsDetails.Add(new KanbanModel()
203+
{
204+
ID = 9,
205+
Title = "Xamarin - 9",
206+
Category = "Code Review",
207+
Description = "Improve application's performance.",
208+
IndicatorFill = Colors.Orange,
209+
Tags = new List<string> { "Story", "Kanban" }
210+
});
211+
212+
cardsDetails.Add(new KanbanModel()
213+
{
214+
ID = 13,
215+
Title = "UWP - 13",
216+
Category = "In Progress",
217+
Description = "Add responsive support to applications.",
218+
IndicatorFill = Colors.Brown,
219+
Tags = new List<string> { "Story", "Kanban" }
220+
});
221+
222+
cardsDetails.Add(new KanbanModel()
223+
{
224+
ID = 24,
225+
Title = "UWP - 24",
226+
Category = "In Progress",
227+
Description = "Test editing functionality.",
228+
IndicatorFill = Colors.Orange,
229+
Tags = new List<string> { "Feature", "Customer", "Release" }
230+
});
231+
232+
cardsDetails.Add(new KanbanModel()
233+
{
234+
ID = 20,
235+
Title = "iOS - 20",
236+
Category = "In Progress",
237+
Description = "Fix the issues reported in data binding.",
238+
IndicatorFill = Colors.Red,
239+
Tags = new List<string> { "Feature", "Release" }
240+
});
241+
242+
cardsDetails.Add(new KanbanModel()
243+
{
244+
ID = 13,
245+
Title = "UWP - 13",
246+
Category = "Closed",
247+
Description = "Fix cannot open user's default database SQL error.",
248+
IndicatorFill = Colors.Purple,
249+
Tags = new List<string> { "Bug", "Internal", "Release" }
250+
});
251+
252+
cardsDetails.Add(new KanbanModel()
253+
{
254+
ID = 14,
255+
Title = "Android - 14",
256+
Category = "Closed",
257+
Description = "Arrange a web meeting with the customer to get the login page requirement.",
258+
IndicatorFill = Colors.Red,
259+
Tags = new List<string> { "Feature" }
260+
});
261+
262+
cardsDetails.Add(new KanbanModel()
263+
{
264+
ID = 15,
265+
Title = "Xamarin - 15",
266+
Category = "Closed",
267+
Description = "Login page validation.",
268+
IndicatorFill = Colors.Red,
269+
Tags = new List<string> { "Bug" }
270+
});
271+
272+
return cardsDetails;
273+
}
274+
275+
#endregion
276+
}
277+
278+
{% endhighlight %}
279+
{% endtabs %}
280+
281+
N>
282+
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
283+
* This feature is available only in `.NET 10.`

‎maui-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -824,6 +824,7 @@
824824
<li><a href="/maui/kanban-board/sorting">Sorting</a></li>
825825
<li><a href="/maui/kanban-board/Localization">Localization</a></li>
826826
<li><a href="/maui/kanban-board/events">Events</a></li>
827+
<li><a href="/maui/kanban-board/liquid-glass-effect">Liquid Glass UI</a></li>
827828
</ul>
828829
</li>
829830
<li>

0 commit comments

Comments
 (0)