Skip to content

Commit 1700221

Browse files
NatarajanSF4844NatarajanSF4844
committed
content changes
1 parent b10f3ee commit 1700221

File tree

10 files changed

+171
-288
lines changed

10 files changed

+171
-288
lines changed

‎MAUI/Chips/LiquidGlassSupport.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,11 @@ SfChipGroup chipGroup = new SfChipGroup
5252
EnableLiquidGlassEffect = true, // Enables built-in glassy look on chips
5353
};
5454

55-
chipGroup.Items.Add(new SfChip(){Text="Extra Small", Background = Colors.Blue });
56-
chipGroup.Items.Add(new SfChip(){Text="Small", Background = Colors.Blue });
57-
chipGroup.Items.Add(new SfChip(){Text="Medium", Background = Colors.Blue });
58-
chipGroup.Items.Add(new SfChip(){Text="Large", Background = Colors.Blue });
59-
chipGroup.Items.Add(new SfChip(){Text="Extra Large", Background = Colors.Blue });
55+
chipGroup.Items.Add(new SfChip(){Text="Extra Small"});
56+
chipGroup.Items.Add(new SfChip(){Text="Small"});
57+
chipGroup.Items.Add(new SfChip(){Text="Medium"});
58+
chipGroup.Items.Add(new SfChip(){Text="Large"});
59+
chipGroup.Items.Add(new SfChip(){Text="Extra Large" });
6060

6161
{% endhighlight %}
6262
{% endtabs %}

‎MAUI/DateTime-Range-Selector/LiquidGlassSupport.md‎

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,30 @@
11
---
22
layout: post
3-
title: Liquid Glass Support for .NET MAUI DateTimeRangeSelector | Syncfusion®
4-
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI DateTimeRangeSelector (SfDateTimeRangeSelector) control and more.
3+
title: Liquid Glass Effect for .NET MAUI DateTime RangeSelectors | Syncfusion®
4+
description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion® .NET MAUI DateTime RangeSelectors (SfDateTimeRangeSelector) control.
55
platform: MAUI
66
control: SfDateTimeRangeSelector
77
documentation: ug
88
---
99

10+
# Liquid Glass Effect in .NET MAUI DateTime RangeSelectors (SfDateTimeRangeSelector)
1011

11-
# Liquid Glass Support for .NET MAUI DateTime Range Selector
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 DateTime RangeSelectors (SfDateTimeRangeSelector) control.
1213

13-
The [SfDateTimeRangeSelector](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeRangeSelector.html) provides `liquid glass` effect for its thumbs when [EnableLiquidGlassEffect]() is enabled. The frosted, translucent effect is applied only while the user is pressing/dragging the thumb, creating a subtle, responsive visual that blends with the content behind it. This enhances visual feedback without altering the slider’s appearance at rest, and works well over images or colorful layouts.
14+
## Apply liquid glass effect
1415

15-
## Availability
16+
Follow these steps to enable and configure the Liquid Glass Effect in the DateTime RangeSelectors control:
1617

17-
1. Supported on .NET 10 or greater.
18-
2. Supported on mac or iOS 26 or greater.
19-
3. On platforms/versions below these requirements, the glass effect is not applied and the slider thumbs render with the standard appearance.
18+
### Step 1: Enable the liquid glass effect on DateTime RangeSelectors
2019

21-
XAML example The thumb’s glass effect appears only while it is pressed/dragged.
20+
Set the `EnableLiquidGlassEffect` property to `true` in the `SfDateTimeRangeSelector` control to apply the Liquid Glass Effect. When enabled,it provides responsive interaction for a smooth and engaging user experience.
2221

23-
{% tabs %}
24-
{% highlight xaml hl_lines="20" %}
25-
26-
<?xml version="1.0" encoding="utf-8" ?>
27-
<ContentPage
28-
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
29-
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
30-
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
31-
x:Class="SliderGlassEffectPage">
22+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfDateTimeRangeSelector` control:
3223

24+
{% tabs %}
25+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
3326
<Grid>
34-
<!-- Background to make the glass effect visible while pressing the thumb -->
35-
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
36-
3727
<StackLayout Padding="24" Spacing="16" VerticalOptions="Center">
38-
<Label Text="Volume" FontSize="18" TextColor="White" />
39-
4028
<sliders:SfDateTimeRangeSelector
4129
Minimum="2010-01-01"
4230
Maximum="2018-01-01"
@@ -45,11 +33,9 @@ XAML example The thumb’s glass effect appears only while it is pressed/dragged
4533
EnableLiquidGlassEffect="True"/>
4634
</StackLayout>
4735
</Grid>
48-
</ContentPage>
4936

5037
{% endhighlight %}
51-
{% highlight c# hl_lines="8" %}
52-
38+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
5339
using Syncfusion.Maui.Sliders;
5440

5541
SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
@@ -64,8 +50,7 @@ SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
6450
{% endhighlight %}
6551
{% endtabs %}
6652

67-
The following screenshot illustrates SfRangeSlider with the glass effect visible on the thumb while it is pressed.
68-
69-
![date time range selector with liquid glass support](images/getting-started/rangeslider_liquidglass.gif)
70-
71-
N> The glass effect is applied to the thumb only while it is pressed/dragged.
53+
N>
54+
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
55+
* This feature is available only in `.NET 10.`
56+
* The glass effect is applied to the thumb only while it is pressed/dragged.

‎MAUI/DateTime-Range-Slider/LiquidGlassSupport.md‎

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,30 @@
11
---
22
layout: post
3-
title: Liquid Glass Support for .NET MAUI DateTimeRangeSlider | Syncfusion®
4-
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI DateTimeRangeSlider (SfDateTimeRangeSlider) control and more.
3+
title: Liquid Glass Effect for .NET MAUI DateTime RangeSlider | Syncfusion®
4+
description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion® .NET MAUI DateTime RangeSlider (SfDateTimeRangeSlider) control.
55
platform: MAUI
66
control: SfDateTimeRangeSlider
77
documentation: ug
88
---
99

10+
# Liquid Glass Effect in .NET MAUI DateTime RangeSlider (SfDateTimeRangeSlider)
1011

11-
# Liquid Glass Support for .NET MAUI DateTime Range Slider
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 DateTime RangeSlider (SfDateTimeRangeSlider) control.
1213

13-
The [SfDateTimeRangeSlider](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeRangeSlider.html) provides `liquid glass` effect for its thumbs when [EnableLiquidGlassEffect]() is enabled. The frosted, translucent effect is applied only while the user is pressing/dragging the thumb, creating a subtle, responsive visual that blends with the content behind it. This enhances visual feedback without altering the slider’s appearance at rest, and works well over images or colorful layouts.
14+
## Apply liquid glass effect
1415

15-
## Availability
16+
Follow these steps to enable and configure the Liquid Glass Effect in the DateTime RangeSlider control:
1617

17-
1. Supported on .NET 10 or greater.
18-
2. Supported on mac or iOS 26 or greater.
19-
3. On platforms/versions below these requirements, the glass effect is not applied and the slider thumbs render with the standard appearance.
18+
### Step 1: Enable the liquid glass effect on DateTime RangeSlider
2019

21-
XAML example The thumb’s glass effect appears only while it is pressed/dragged.
20+
Set the `EnableLiquidGlassEffect` property to `true` in the `SfDateTimeRangeSlider` control to apply the Liquid Glass Effect. When enabled,it provides responsive interaction for a smooth and engaging user experience.
2221

23-
{% tabs %}
24-
{% highlight xaml hl_lines="20" %}
25-
26-
<?xml version="1.0" encoding="utf-8" ?>
27-
<ContentPage
28-
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
29-
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
30-
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
31-
x:Class="SliderGlassEffectPage">
22+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfDateTimeRangeSlider` control:
3223

24+
{% tabs %}
25+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
3326
<Grid>
34-
<!-- Background to make the glass effect visible while pressing the thumb -->
35-
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
36-
3727
<StackLayout Padding="24" Spacing="16" VerticalOptions="Center">
38-
<Label Text="Volume" FontSize="18" TextColor="White" />
39-
4028
<sliders:SfDateTimeRangeSlider
4129
Minimum="2010-01-01"
4230
Maximum="2018-01-01"
@@ -45,11 +33,9 @@ XAML example The thumb’s glass effect appears only while it is pressed/dragged
4533
EnableLiquidGlassEffect="True" />
4634
</StackLayout>
4735
</Grid>
48-
</ContentPage>
4936

5037
{% endhighlight %}
51-
{% highlight c# hl_lines="9" %}
52-
38+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
5339
using Syncfusion.Maui.Sliders;
5440

5541
SfDateTimeRangeSlider dateTimeRangeSlider = new SfDateTimeRangeSlider
@@ -64,8 +50,7 @@ SfDateTimeRangeSlider dateTimeRangeSlider = new SfDateTimeRangeSlider
6450
{% endhighlight %}
6551
{% endtabs %}
6652

67-
The following screenshot illustrates SfRangeSlider with the glass effect visible on the thumb while it is pressed.
68-
69-
![date time range slider with liquid glass support](images/getting-started/rangeslider_liquidglass.gif)
70-
71-
N> The glass effect is applied to the thumb only while it is pressed/dragged.
53+
N>
54+
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
55+
* This feature is available only in `.NET 10.`
56+
* The glass effect is applied to the thumb only while it is pressed/dragged.

‎MAUI/DateTime-Slider/LiquidGlassSupport.md‎

Lines changed: 16 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,39 @@
11
---
22
layout: post
3-
title: Liquid Glass Support for .NET MAUI DateTimeSlider | Syncfusion®
4-
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI DateTimeSlider (SfDateTimeSlider) control and more.
3+
title: Liquid Glass Effect for .NET MAUI DateTime Slider | Syncfusion®
4+
description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion® .NET MAUI DateTime Slider (SfDateTimeSlider) control.
55
platform: MAUI
66
control: SfDateTimeSlider
77
documentation: ug
88
---
99

10+
# Liquid Glass Effect in .NET MAUI DateTime Slider (SfDateTimeSlider)
1011

11-
# Liquid Glass Support for .NET MAUI DateTime Slider
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 DateTime Slider (SfDateTimeSlider) control.
1213

13-
The [SfDateTimeSlider](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html) provides `liquid glass` effect for its thumb when [EnableLiquidGlassEffect]() is enabled. The frosted, translucent effect is applied only while the user is pressing/dragging the thumb, creating a subtle, responsive visual that blends with the content behind it. This enhances visual feedback without altering the slider’s appearance at rest, and works well over images or colorful layouts.
14+
## Apply liquid glass effect
1415

15-
## Availability
16+
Follow these steps to enable and configure the Liquid Glass Effect in the DateTime Slider control:
1617

17-
1. Supported on .NET 10 or greater.
18-
2. Supported on mac or iOS 26 or greater.
19-
3. On platforms/versions below these requirements, the glass effect is not applied and the slider thumb render with the standard appearance.
18+
### Step 1: Enable the liquid glass effect on DateTime Slider
2019

21-
XAML example The thumb’s glass effect appears only while it is pressed/dragged.
20+
Set the `EnableLiquidGlassEffect` property to `true` in the `SfDateTimeSlider` control to apply the Liquid Glass Effect. When enabled,it provides responsive interaction for a smooth and engaging user experience.
2221

23-
{% tabs %}
24-
{% highlight xaml hl_lines="18" %}
25-
26-
<?xml version="1.0" encoding="utf-8" ?>
27-
<ContentPage
28-
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
29-
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
30-
xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
31-
x:Class="SliderGlassEffectPage">
22+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfDateTimeSlider` control:
3223

24+
{% tabs %}
25+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}<Grid>
3326
<Grid>
34-
<!-- Background to make the glass effect visible while pressing the thumb -->
35-
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
36-
3727
<StackLayout Padding="24" Spacing="16" VerticalOptions="Center">
38-
<Label Text="Volume" FontSize="18" TextColor="White" />
39-
4028
<sliders:SfDateTimeSlider
4129
Minimum="2010-01-01"
4230
Maximum="2018-01-01"
4331
EnableLiquidGlassEffect="True" />
4432
</StackLayout>
4533
</Grid>
46-
</ContentPage>
4734

4835
{% endhighlight %}
49-
{% highlight c# hl_lines="7" %}
50-
36+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
5137
using Syncfusion.Maui.Sliders;
5238

5339
SfDateTimeSlider dateTimeSlider = new SfDateTimeSlider
@@ -60,8 +46,7 @@ SfDateTimeSlider dateTimeSlider = new SfDateTimeSlider
6046
{% endhighlight %}
6147
{% endtabs %}
6248

63-
The following screenshot illustrates SfDateTimeSlider with the glass effect visible on the thumb while it is pressed.
64-
65-
![date time slider with liquid glass support](images/getting-started/slider_liquidglass.gif)
66-
67-
N> The glass effect is applied to the thumb only while it is pressed/dragged.
49+
N>
50+
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
51+
* This feature is available only in `.NET 10.`
52+
* The glass effect is applied to the thumb only while it is pressed/dragged.

‎MAUI/Masked-Entry/LiquidGlassSupport.md‎

Lines changed: 31 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,51 @@
11
---
22
layout: post
3-
title: Liquid Glass Support for .NET MAUI Masked entry | Syncfusion®
4-
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI MaskedEntry (SfMaskedEntry) control and more.
3+
title: Liquid Glass Effect for .NET MAUI MaskedEntry | Syncfusion®
4+
description: Learn how to enable and customize the Liquid Glass Effect in the Syncfusion® .NET MAUI MaskedEntry (SfMaskedEntry) control.
55
platform: MAUI
66
control: SfMaskedEntry
77
documentation: ug
88
---
99

10-
# Liquid Glass Support for .NET MAUI MaskedEntry
10+
# Liquid Glass Effect in .NET MAUI MaskedEntry (SfMaskedEntry)
1111

12-
The [SfMaskedEntry](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfMaskedEntry.html) supports a `liquid glass` appearance by hosting the control inside the Syncfusion [SfGlassEffectView](). The acrylic view creates a blurred, translucent background that blends with the content behind it, producing a frosted `glass effect` around the entry. You can customize the effect using properties such as [EffectType](), [EnableShadowEffect](), and round the corners using [CornerRadius](). This approach improves visual depth and readability when SfMaskedEntry is placed over images or colorful layouts.
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 MaskedEntry (SfMaskedEntry) control.
1313

14-
## Availability
14+
## Apply liquid glass effect
1515

16-
1. This feature is supported on .NET 10 or greater.
17-
2. This feature is supported on mac or iOS 26 or greater.
18-
3. On platforms or versions below these requirements, the control renders without the acrylic blur effect and falls back to a standard background.
16+
Follow these steps to enable and configure the Liquid Glass Effect in the MaskedEntry control:
1917

20-
## Prerequisites
18+
### Step 1: Wrap the control inside glass effect view
2119

22-
- Add the Syncfusion.Maui.Core package (for SfGlassEffectView) and Syncfusion.Maui.Inputs (for SfMaskedEntry).
20+
To apply the Liquid Glass Effect to Syncfusion® .NET MAUI `MaskedEntry` control, wrap the control inside the `SfGlassEffectView` class.
2321

24-
XAML example Wrap the `SfMaskedEntry` in an `SfGlassEffectView` and adjust visual properties to achieve the desired glass effect.
22+
For more details, refer to the `Liquid Glass Getting Started documentation`.
2523

26-
{% tabs %}
27-
{% highlight xaml hl_lines="20" %}
24+
### Step 2: Customize the background
25+
26+
To achieve a glass like background in the MaskedEntry, set the `Background` property to `Transparent`. The background will then be treated as a tinted color, ensuring a consistent glass effect across the controls.
2827

29-
<?xml version="1.0" encoding="utf-8" ?>
30-
<ContentPage
31-
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
32-
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
33-
xmlns:inputs="clr-namespace:Syncfusion.Maui.Inputs;assembly=Syncfusion.Maui.Inputs"
34-
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
35-
x:Class="AcrylicMaskedEntryPage">
28+
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfMaskedEntry` control:
3629

37-
<!-- Background content to make the acrylic blur visible -->
30+
{% tabs %}
31+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
3832
<Grid>
39-
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
40-
<core:SfGlassEffectView
41-
CornerRadius="20"
42-
HeightRequest="40"
43-
EffectType="Regular"
44-
EnableShadowEffect="True">
45-
46-
<inputs:SfMaskedEntry
47-
WidthRequest="200"
48-
Background="Transparent"
49-
ClearButtonVisibility="WhileEditing"
50-
MaskType="RegEx"
51-
Mask="[A-Za-z0-9._%-]+@[A-Za-z0-9]+.[A-Za-z]{2,3}" />
52-
</core:SfGlassEffectView>
33+
<core:SfGlassEffectView
34+
CornerRadius="20"
35+
HeightRequest="40"
36+
EffectType="Regular"
37+
EnableShadowEffect="True">
38+
<inputs:SfMaskedEntry
39+
WidthRequest="200"
40+
Background="Transparent"
41+
ClearButtonVisibility="WhileEditing"
42+
MaskType="RegEx"
43+
Mask="[A-Za-z0-9._%-]+@[A-Za-z0-9]+.[A-Za-z]{2,3}" />
44+
</core:SfGlassEffectView>
5345
</Grid>
54-
</ContentPage>
5546

5647
{% endhighlight %}
57-
{% highlight c# hl_lines="8" %}
58-
48+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
5949
using Syncfusion.Maui.Core;
6050
using Syncfusion.Maui.Inputs;
6151

@@ -81,7 +71,6 @@ glassEffect.Content = maskedEntry;
8171
{% endhighlight %}
8272
{% endtabs %}
8373

84-
85-
The following screenshot illustrates SfMaskedEntry within an acrylic container using the glass effect.
86-
87-
![Masked entry with liquid glass support](MaskedEntry_Images/Maskedentry_liquidglass.png)
74+
N>
75+
* Supported on `macOS 26 or higher` and `iOS 26 or higher`.
76+
* This feature is available only in `.NET 10.`

0 commit comments

Comments
 (0)