Skip to content

Commit 6b9bfaf

Browse files
NatarajanSF4844NatarajanSF4844
committed
Images added
1 parent b0b0f73 commit 6b9bfaf

File tree

13 files changed

+385
-162
lines changed

13 files changed

+385
-162
lines changed

‎MAUI/Autocomplete/LiquidGlassSupport.md‎

Lines changed: 41 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -32,49 +32,67 @@ To achieve a glass like background in the Autocomplete, set the `Background` and
3232
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfAutocomplete` control:
3333

3434
{% tabs %}
35-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
35+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="11" %}
3636

3737
<Grid BackgroundColor="Transparent">
38+
<Image Source="Wallpaper.png" Aspect="AspectFill">
3839
<core:SfGlassEffectView EffectType="Regular"
3940
CornerRadius="20">
4041
<Autocomplete:SfAutocomplete x:Name="Autocomplete"
4142
Background="Transparent"
43+
HeightRequest="40"
44+
WidthRequest="300"
45+
ItemSource="{Binding Names}"
4246
DropDownBackground="Transparent"
4347
EnableLiquidGlassEffect="True">
4448
</Autocomplete:SfAutocomplete>
4549
</core:SfGlassEffectView>
4650
</Grid>
4751

4852
{% endhighlight %}
49-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
53+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="29" %}
5054

5155
using Syncfusion.Maui.Core;
5256
using Syncfusion.Maui.Inputs;
5357

54-
var grid = new Grid
55-
{
56-
BackgroundColor = Colors.Transparent
57-
};
58-
59-
var glassView = new SfGlassEffectView
60-
{
61-
CornerRadius = 20,
62-
EffectType = LiquidGlassEffectType.Regular
63-
};
64-
65-
var Autocomplete = new SfAutocomplete
66-
{
67-
Background = Colors.Transparent,
68-
EnableLiquidGlassEffect = true,
69-
DropDownBackground = Colors.Transparent
70-
};
71-
72-
glassView.Content = this.Autocomplete;
73-
grid.Children.Add(glassView);
74-
this.Content = grid;
58+
var grid = new Grid
59+
{
60+
BackgroundColor = Colors.Transparent
61+
};
62+
63+
var image = new Image
64+
{
65+
Source = "Wallpaper.png",
66+
Aspect = Aspect.AspectFill
67+
};
68+
grid.Children.Add(image);
69+
70+
var glass = new SfGlassEffectView
71+
{
72+
EffectType = LiquidGlassEffectType.Regular,
73+
CornerRadius = 20
74+
};
75+
76+
var autocomplete = new SfAutocomplete
77+
{
78+
Background = Colors.Transparent,
79+
HeightRequest = 40,
80+
WidthRequest = 300,
81+
DropDownBackground = Colors.Transparent,
82+
ItemSource = new List<string>{"Jacob", "Will", "Noah", "Dustin"},
83+
EnableLiquidGlassEffect = true
84+
};
85+
86+
glass.Content = autocomplete;
87+
grid.Children.Add(glass);
88+
this.Content = grid;
7589

7690
{% endhighlight %}
7791
{% endtabs %}
7892

93+
The following screenshot illustrates SfAutocomplete within an acrylic container, with the dropdown using the glass effect.
94+
95+
![Autocomplete editor with liquid glass support](Images/UICustomization/Autocomplete_liquidglass.png)
96+
7997
N>
8098
This feature is supported only on .NET 10 along with iOS 26 and macOS 26

‎MAUI/Button/LiquidGlassSupport.md‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,37 +26,50 @@ To achieve a glass like background in the Buttons, set the `Background` property
2626
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfButton` control:
2727

2828
{% tabs %}
29-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
30-
29+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="6" %}
3130
<Grid>
32-
<StackLayout Padding="24" Spacing="16" VerticalOptions="Center" HorizontalOptions="Center">
33-
<buttons:SfButton
34-
x:Name="GlassButton"
35-
Text="Continue"
36-
EnableLiquidGlassEffect="True"
37-
Background="Transparent"
38-
WidthRequest="180"
39-
CornerRadius="24"
40-
HeightRequest="48" />
41-
</StackLayout>
31+
<Image Source="Wallpaper.png" Aspect="AspectFill">
32+
<buttons:SfButton
33+
x:Name="GlassButton"
34+
Text="GlassButton"
35+
EnableLiquidGlassEffect="True"
36+
Background="Transparent"
37+
WidthRequest="180"
38+
CornerRadius="24"
39+
HeightRequest="48" />
4240
</Grid>
4341

4442
{% endhighlight %}
45-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
43+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="17" %}
4644

4745
using Syncfusion.Maui.Buttons;
4846

49-
var glassButton = new SfButton
50-
{
51-
Text = "GlassButton",
52-
EnableLiquidGlassEffect = true, // Enables glass look and press-time scaling
53-
WidthRequest = 180,
54-
Background=Colors.Transparent;
55-
HeightRequest = 48
56-
};
47+
var grid = new Grid();
48+
var image = new Image
49+
{
50+
Source = "Wallpaper.png",
51+
Aspect = Aspect.AspectFill
52+
};
53+
grid.Children.Add(image);
54+
var glassButton = new SfButton
55+
{
56+
Text = "GlassButton",
57+
Background = Colors.Transparent,
58+
WidthRequest = 180,
59+
HeightRequest = 48,
60+
CornerRadius = 24,
61+
EnableLiquidGlassEffect = true
62+
};
63+
grid.Children.Add(GlassButton);
64+
65+
this.Content = grid;
5766

5867
{% endhighlight %}
5968
{% endtabs %}
6069

70+
The following screenshot illustrates SfButton with the glass effect enabled.
71+
72+
![button with liquid glass support](Images/customization-images/Button_liquidglass.png)
73+
6174
N>
6275
This feature is supported only on .NET 10 along with iOS 26 and macOS 26

‎MAUI/Chips/LiquidGlassSupport.md‎

Lines changed: 38 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -25,41 +25,54 @@ To achieve a glass like background in the Chips, set the `Background` property t
2525

2626
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfChip` control:
2727
{% tabs %}
28-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
28+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="5" %}
2929
<Grid>
30-
<StackLayout Padding="24" Spacing="16" VerticalOptions="Center">
31-
<Label Text="Filters" FontSize="18" TextColor="White" />
32-
<core:SfChipGroup
33-
x:Name="FilterChips"
34-
EnableLiquidGlassEffect="True">
35-
<chip:SfChipGroup.Items>
36-
<chip:SfChip Text="Extra Small"/>
37-
<chip:SfChip Text="Small" />
38-
<chip:SfChip Text="Medium" />
39-
<chip:SfChip Text="Large"/>
40-
<chip:SfChip Text="Extra Large"/>
41-
</chip:SfChipGroup.Items>
42-
</core:SfChipGroup>
43-
</StackLayout>
30+
<Image Source="Wallpaper.png" Aspect="AspectFill">
31+
<core:SfChipGroup
32+
x:Name="FilterChips"
33+
EnableLiquidGlassEffect="True">
34+
<chip:SfChipGroup.Items>
35+
<chip:SfChip Text="Extra Small"/>
36+
<chip:SfChip Text="Small" />
37+
<chip:SfChip Text="Medium" />
38+
<chip:SfChip Text="Large"/>
39+
<chip:SfChip Text="Extra Large"/>
40+
</chip:SfChipGroup.Items>
41+
</core:SfChipGroup>
4442
</Grid>
4543
{% endhighlight %}
46-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
44+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="13" %}
4745

4846
using Syncfusion.Maui.Core;
4947

50-
SfChipGroup chipGroup = new SfChipGroup
51-
{
52-
EnableLiquidGlassEffect = true, // Enables built-in glassy look on chips
53-
};
48+
var grid = new Grid();
49+
var image = new Image
50+
{
51+
Source = "Wallpaper.png",
52+
Aspect = Aspect.AspectFill
53+
};
54+
grid.Children.Add(image);
5455

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" });
56+
var FilterChips = new SfChipGroup
57+
{
58+
EnableLiquidGlassEffect = true
59+
};
60+
61+
FilterChips.Items.Add(new SfChip { Text = "Extra Small" });
62+
FilterChips.Items.Add(new SfChip { Text = "Small" });
63+
FilterChips.Items.Add(new SfChip { Text = "Medium" });
64+
FilterChips.Items.Add(new SfChip { Text = "Large" });
65+
FilterChips.Items.Add(new SfChip { Text = "Extra Large" });
66+
67+
grid.Children.Add(FilterChips);
68+
Content = grid;
6069

6170
{% endhighlight %}
6271
{% endtabs %}
6372

73+
The following screenshot illustrates SfChipGroup with the built-in glass effect enabled via EnableLiquidGlassEffect, displayed over a wallpaper background.
74+
75+
![chips with liquid glass support](images/customization-images/Chip_liquidglass.png)
76+
6477
N>
6578
This feature is supported only on .NET 10 along with iOS 26 and macOS 26

‎MAUI/ComboBox/LiquidGlassSupport.md‎

Lines changed: 38 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -32,49 +32,64 @@ To achieve a glass like background in the Combo Box, set the `Background` and `D
3232
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfComboBox` control:
3333

3434
{% tabs %}
35-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
35+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="9" %}
3636

3737
<Grid BackgroundColor="Transparent">
38+
<Image Source="Wallpaper.png" Aspect="AspectFill">
3839
<core:SfGlassEffectView EffectType="Regular"
3940
CornerRadius="20">
4041
<ComboBox:SfComboBox x:Name="ComboBox"
4142
Background="Transparent"
43+
ItemsSource="{Binding SocialMedias}"
4244
DropDownBackground="Transparent"
4345
EnableLiquidGlassEffect="True">
4446
</ComboBox:SfComboBox>
4547
</core:SfGlassEffectView>
4648
</Grid>
4749

4850
{% endhighlight %}
49-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
51+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="26" %}
5052

5153
using Syncfusion.Maui.Core;
5254
using Syncfusion.Maui.Inputs;
5355

54-
var grid = new Grid
55-
{
56-
BackgroundColor = Colors.Transparent
57-
};
58-
59-
var glassView = new SfGlassEffectView
60-
{
61-
CornerRadius = 20,
62-
EffectType = LiquidGlassEffectType.Regular
63-
};
64-
65-
var comboBox = new SfComboBox
66-
{
67-
Background = Colors.Transparent,
68-
EnableLiquidGlassEffect = true,
69-
DropDownBackground = Colors.Transparent
70-
};
71-
72-
glassView.Content = this.comboBox;
73-
grid.Children.Add(glassView);
74-
this.Content = grid;
56+
var grid = new Grid
57+
{
58+
BackgroundColor = Colors.Transparent
59+
};
60+
61+
var image = new Image
62+
{
63+
Source = "Wallpaper.png",
64+
Aspect = Aspect.AspectFill
65+
};
66+
grid.Children.Add(image);
67+
68+
var glass = new SfGlassEffectView
69+
{
70+
EffectType = LiquidGlassEffectType.Regular,
71+
CornerRadius = 20
72+
};
73+
74+
ComboBox = new SfComboBox
75+
{
76+
Background = Colors.Transparent,
77+
DropDownBackground = Colors.Transparent,
78+
EnableLiquidGlassEffect = true
79+
};
80+
81+
ComboBox.SetBinding(SfComboBox.ItemsSourceProperty, "SocialMedias");
82+
83+
glass.Content = ComboBox;
84+
grid.Children.Add(glass);
85+
this.Content = grid;
7586

7687
{% endhighlight %}
7788
{% endtabs %}
7889

90+
The following screenshot illustrates SfComboBox within an acrylic container, with the dropdown using the glass effect.
91+
92+
![combo box editor with liquid glass support](Images/UICustomization/Combobox_liquidglass.png)
93+
7994
N>
8095
This feature is supported only on .NET 10 along with iOS 26 and macOS 26

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

Lines changed: 28 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,22 +22,33 @@ Set the `EnableLiquidGlassEffect` property to `true` in the `SfDateTimeRangeSele
2222
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfDateTimeRangeSelector` control:
2323

2424
{% tabs %}
25-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
25+
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="8" %}
2626
<Grid>
27-
<StackLayout Padding="24" Spacing="16" VerticalOptions="Center">
28-
<sliders:SfDateTimeRangeSelector
29-
Minimum="2010-01-01"
30-
Maximum="2018-01-01"
31-
RangeStart="2012-01-01"
32-
RangeEnd="2016-01-01"
33-
EnableLiquidGlassEffect="True"/>
34-
</StackLayout>
27+
<Image Source="Wallpaper.png" Aspect="AspectFill">
28+
<sliders:SfDateTimeRangeSelector
29+
Minimum="2010-01-01"
30+
Maximum="2018-01-01"
31+
RangeStart="2012-01-01"
32+
RangeEnd="2016-01-01"
33+
EnableLiquidGlassEffect="True"/>
3534
</Grid>
3635

3736
{% endhighlight %}
38-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
37+
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="23" %}
3938
using Syncfusion.Maui.Sliders;
4039

40+
var grid = new Grid
41+
{
42+
BackgroundColor = Colors.Transparent
43+
};
44+
45+
var image = new Image
46+
{
47+
Source = "Wallpaper.png",
48+
Aspect = Aspect.AspectFill
49+
};
50+
grid.Children.Add(image);
51+
4152
SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
4253
{
4354
Minimum = new DateTime(2010, 01, 01),
@@ -47,8 +58,15 @@ SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
4758
EnableLiquidGlassEffect = true
4859
};
4960

61+
grid.Children.Add(rangeSelector);
62+
this.Content = grid;
63+
5064
{% endhighlight %}
5165
{% endtabs %}
5266

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+
5371
N>
5472
This feature is supported only on .NET 10 along with iOS 26 and macOS 26

0 commit comments

Comments
 (0)