Skip to content

Commit 7f545ac

Browse files
aarthisf3966aarthisf3966
committed
997111-Changed code snippets of Kanban and IE.
1 parent e4523a7 commit 7f545ac

File tree

2 files changed

+245
-81
lines changed

2 files changed

+245
-81
lines changed

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

Lines changed: 2 additions & 26 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,21 +56,9 @@ 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

8864
var glassView = new SfGlassEffectView

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

Lines changed: 243 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -7,79 +7,63 @@ control: Kanban (SfKanban)
77
documentation: ug
88
---
99

10-
# Liquid Glass Effect for .NET MAUI Kanban Board (SfKanban)
10+
# Liquid Glass Effect in .NET MAUI Kanban Board (SfKanban)
1111

1212
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.
1313

1414
## Apply liquid glass effect
1515

1616
Follow these steps to enable and configure the Liquid Glass Effect in the Kanban control:
1717

18-
### Step 1: Enable the liquid glass effect on Kanban
18+
### Step 1: Wrap the control inside glass effect view
1919

20-
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 dependent elements and provides responsive interaction for a smooth and engaging user experience.
20+
To apply the Liquid Glass Effect to Syncfusion® .NET MAUI `Kanban` control, wrap the control inside the `SfGlassEffectView` class.
2121

22-
### Step 2: Customize the background
22+
For more details, refer to the `Liquid Glass Getting Started documentation`.
2323

24-
To achieve a glass like background in Kanban, set the `Background` property to `Transparent` and use theme keys to style it, ensuring a consistent look and feel across your application.
24+
### Step 2: Enable the liquid glass effect on Kanban
2525

26-
For more details, refer to the `Liquid Glass Getting Started documentation`.
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.
2731

2832
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `Kanban` control:
2933

3034
{% tabs %}
31-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="18" %}
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-
46-
<kanban:SfKanban x:Name="kanban"
47-
Background="Transparent"
48-
AutoGenerateColumns="False"
49-
ItemsSource="{Binding Cards}"
50-
EnableLiquidGlassEffect="True">
51-
<kanban:SfKanban.Columns>
52-
<kanban:KanbanColumn Title="To Do"
53-
Categories="Open"/>
54-
<kanban:KanbanColumn Title="In Progress"
55-
Categories="In Progress"/>
56-
<kanban:KanbanColumn Title="Code Review"
57-
Categories="Code Review"/>
58-
<kanban:KanbanColumn Title="Done"
59-
Categories="Done"/>
60-
</kanban:SfKanban.Columns>
61-
<kanban:SfKanban.BindingContext>
62-
<local:KanbanViewModel/>
63-
</kanban:SfKanban.BindingContext>
64-
</kanban:SfKanban>
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>
6560
</Grid>
6661

6762
{% endhighlight %}
68-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="19" %}
63+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="8 22 23 24 25 26" %}
6964

7065
using Syncfusion.Maui.Kanban;
71-
72-
var gradientBrush = new LinearGradientBrush
73-
{
74-
StartPoint = new Point(0, 0),
75-
EndPoint = new Point(0, 1),
76-
GradientStops = new GradientStopCollection
77-
{
78-
new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
79-
new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
80-
new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
81-
}
82-
};
66+
using Syncfusion.Maui.Core;
8367

8468
var kanban = new SfKanban
8569
{
@@ -96,12 +80,216 @@ kanban.Columns.Add(new KanbanColumn { Title = "Done", Categories = new List<stri
9680

9781
var grid = new Grid
9882
{
99-
Background = gradientBrush,
100-
Children = { kanban }
83+
BackgroundColor = Colors.Transparent
84+
};
85+
86+
var glassView = new SfGlassEffectView
87+
{
88+
CornerRadius = 7,
89+
EffectType = LiquidGlassEffectType.Clear
10190
};
10291

92+
glassView.Content = this.kanban;
93+
grid.Children.Add(glassView);
10394
this.Content = grid;
10495

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+
Assembly assemblyName = typeof(SfImageSourceConverter).GetTypeInfo().Assembly;
131+
var cardsDetails = new ObservableCollection<KanbanModel>();
132+
133+
cardsDetails.Add(new KanbanModel()
134+
{
135+
ID = 1,
136+
Title = "iOS - 1",
137+
ImageURL = assemblyName + ".people_circle1.png",
138+
Category = "Open",
139+
Description = "Analyze customer requirements.",
140+
IndicatorFill = Colors.Red,
141+
Tags = new List<string> { "Bug", "Customer", "Release Bug" }
142+
});
143+
144+
cardsDetails.Add(new KanbanModel()
145+
{
146+
ID = 6,
147+
Title = "Xamarin - 6",
148+
ImageURL = assemblyName + ".people_circle2.png",
149+
Category = "Open",
150+
Description = "Show the retrieved data from the server in Grid control.",
151+
IndicatorFill = Colors.Red,
152+
Tags = new List<string> { "Bug", "Customer", "Breaking Issue" }
153+
});
154+
155+
cardsDetails.Add(new KanbanModel()
156+
{
157+
ID = 3,
158+
Title = "iOS - 3",
159+
ImageURL = assemblyName + ".people_circle3.png",
160+
Category = "Postponed",
161+
Description = "Fix the filtering issues reported in Safari.",
162+
IndicatorFill = Colors.Red,
163+
Tags = new List<string> { "Bug", "Customer", "Breaking Issue" }
164+
});
165+
166+
cardsDetails.Add(new KanbanModel()
167+
{
168+
ID = 11,
169+
Title = "iOS - 21",
170+
ImageURL = assemblyName + ".people_circle4.png",
171+
Category = "Postponed",
172+
Description = "Add input validation for editing.",
173+
IndicatorFill = Colors.Red,
174+
Tags = new List<string> { "Bug", "Customer", "Breaking Issue" }
175+
});
176+
177+
cardsDetails.Add(new KanbanModel()
178+
{
179+
ID = 15,
180+
Title = "Android - 15",
181+
Category = "Open",
182+
ImageURL = assemblyName + ".people_circle5.png",
183+
Description = "Arrange web meetings for customers.",
184+
IndicatorFill = Colors.Red,
185+
Tags = new List<string> { "Story", "Kanban" }
186+
});
187+
188+
cardsDetails.Add(new KanbanModel()
189+
{
190+
ID = 3,
191+
Title = "Android - 3",
192+
Category = "Code Review",
193+
ImageURL = assemblyName + ".people_circle6.png",
194+
Description = "API Improvements.",
195+
IndicatorFill = Colors.Purple,
196+
Tags = new List<string> { "Bug", "Customer" }
197+
});
198+
199+
cardsDetails.Add(new KanbanModel()
200+
{
201+
ID = 4,
202+
Title = "UWP - 4",
203+
ImageURL = assemblyName + ".people_circle7.png",
204+
Category = "Code Review",
205+
Description = "Enhance editing functionality.",
206+
IndicatorFill = Colors.Brown,
207+
Tags = new List<string> { "Story", "Kanban" }
208+
});
209+
210+
cardsDetails.Add(new KanbanModel()
211+
{
212+
ID = 9,
213+
Title = "Xamarin - 9",
214+
ImageURL = assemblyName + ".people_circle8.png",
215+
Category = "Code Review",
216+
Description = "Improve application's performance.",
217+
IndicatorFill = Colors.Orange,
218+
Tags = new List<string> { "Story", "Kanban" }
219+
});
220+
221+
cardsDetails.Add(new KanbanModel()
222+
{
223+
ID = 13,
224+
Title = "UWP - 13",
225+
ImageURL = assemblyName + ".people_circle9.png",
226+
Category = "In Progress",
227+
Description = "Add responsive support to applications.",
228+
IndicatorFill = Colors.Brown,
229+
Tags = new List<string> { "Story", "Kanban" }
230+
});
231+
232+
cardsDetails.Add(new KanbanModel()
233+
{
234+
ID = 24,
235+
Title = "UWP - 24",
236+
ImageURL = assemblyName + ".people_circle14.png",
237+
Category = "In Progress",
238+
Description = "Test editing functionality.",
239+
IndicatorFill = Colors.Orange,
240+
Tags = new List<string> { "Feature", "Customer", "Release" }
241+
});
242+
243+
cardsDetails.Add(new KanbanModel()
244+
{
245+
ID = 20,
246+
Title = "iOS - 20",
247+
Category = "In Progress",
248+
ImageURL = assemblyName + ".people_circle15.png",
249+
Description = "Fix the issues reported in data binding.",
250+
IndicatorFill = Colors.Red,
251+
Tags = new List<string> { "Feature", "Release" }
252+
});
253+
254+
cardsDetails.Add(new KanbanModel()
255+
{
256+
ID = 13,
257+
Title = "UWP - 13",
258+
ImageURL = assemblyName + ".people_circle18.png",
259+
Category = "Closed",
260+
Description = "Fix cannot open user's default database SQL error.",
261+
IndicatorFill = Colors.Purple,
262+
Tags = new List<string> { "Bug", "Internal", "Release" }
263+
});
264+
265+
cardsDetails.Add(new KanbanModel()
266+
{
267+
ID = 14,
268+
Title = "Android - 14",
269+
Category = "Closed",
270+
ImageURL = assemblyName + ".people_circle19.png",
271+
Description = "Arrange a web meeting with the customer to get the login page requirement.",
272+
IndicatorFill = Colors.Red,
273+
Tags = new List<string> { "Feature" }
274+
});
275+
276+
cardsDetails.Add(new KanbanModel()
277+
{
278+
ID = 15,
279+
Title = "Xamarin - 15",
280+
Category = "Closed",
281+
ImageURL = assemblyName + ".people_circle20.png",
282+
Description = "Login page validation.",
283+
IndicatorFill = Colors.Red,
284+
Tags = new List<string> { "Bug" }
285+
});
286+
287+
return cardsDetails;
288+
}
289+
290+
#endregion
291+
}
292+
105293
{% endhighlight %}
106294
{% endtabs %}
107295

0 commit comments

Comments
 (0)