Skip to content

Commit abd998f

Browse files
MohamedHasan3644MohamedHasan3644
committed
Updated Codes for liquid glass
1 parent f4e22bb commit abd998f

File tree

8 files changed

+554
-179
lines changed

8 files changed

+554
-179
lines changed

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

Lines changed: 47 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -32,69 +32,78 @@ The following code snippet demonstrates how to apply the Liquid Glass Effect to
3232
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
3333
x:Class="AcrylicBackdropPage"
3434
xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop">
35-
35+
<!-- Back Layer -->
3636
<backdrop:SfBackdropPage.BackLayer>
37-
<backdrop:BackdropBackLayer EnableLiquidGlassEffect="True">
37+
<backdrop:BackdropBackLayer>
3838
<Grid>
39-
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
40-
<StackLayout Padding="16">
41-
<Label Text="Back layer content" FontSize="16"/>
42-
</StackLayout>
39+
<Grid.Background>
40+
<LinearGradientBrush StartPoint="0,0"
41+
EndPoint="0,1">
42+
<GradientStop Color="#0F4C75"
43+
Offset="0.0"/>
44+
<GradientStop Color="#3282B8"
45+
Offset="0.5"/>
46+
<GradientStop Color="#1B262C"
47+
Offset="1.0"/>
48+
</LinearGradientBrush>
49+
</Grid.Background>
50+
<Grid.RowDefinitions>
51+
<RowDefinition Height="Auto"/>
52+
</Grid.RowDefinitions>
53+
<ListView Background="Transparent">
54+
<ListView.ItemsSource>
55+
<x:Array Type="{x:Type x:String}">
56+
<x:String>Appetizers</x:String>
57+
<x:String>Soups</x:String>
58+
<x:String>Desserts</x:String>
59+
<x:String>Salads</x:String>
60+
</x:Array>
61+
</ListView.ItemsSource>
62+
</ListView>
4363
</Grid>
4464
</backdrop:BackdropBackLayer>
4565
</backdrop:SfBackdropPage.BackLayer>
46-
66+
<!-- Front Layer -->
4767
<backdrop:SfBackdropPage.FrontLayer>
48-
<backdrop:BackdropFrontLayer EnableLiquidGlassEffect="True">
49-
<Grid>
50-
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
51-
<StackLayout Padding="16">
52-
<Label Text="Front layer content" FontSize="16"/>
53-
</StackLayout>
54-
</Grid>
55-
</backdrop:BackdropFrontLayer>
68+
<backdrop:BackdropFrontLayer EnableLiquidGlassEffect="True"/>
5669
</backdrop:SfBackdropPage.FrontLayer>
5770
</backdrop:SfBackdropPage>
5871

5972
{% endhighlight %}
6073
{% highlight c# tabtitle="MainPage.xaml.cs" %}
6174

62-
using Syncfusion.Maui.Backdrop;
63-
64-
this.BackLayer = new BackdropBackLayer
75+
this.BackLayer = new BackdropBackLayer()
6576
{
66-
EnableLiquidGlassEffect = true,
67-
Content = new Grid
77+
Content = new Grid()
6878
{
69-
Children =
79+
Background = new LinearGradientBrush()
7080
{
71-
new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill },
72-
new VerticalStackLayout
81+
StartPoint = new Point(0, 0),
82+
EndPoint = new Point(0, 1),
83+
GradientStops =
7384
{
74-
Padding = 16,
75-
Children = { new Label { Text = "Back layer content", FontSize = 16 } }
85+
new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
86+
new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
87+
new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
7688
}
77-
}
78-
}
79-
};
80-
81-
this.FrontLayer = new BackdropFrontLayer
82-
{
83-
EnableLiquidGlassEffect = true,
84-
Content = new Grid
85-
{
89+
},
90+
RowDefinitions =
91+
{
92+
new RowDefinition () { Height = GridLength.Auto}
93+
},
8694
Children =
8795
{
88-
new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill },
89-
new VerticalStackLayout
96+
new ListView()
9097
{
91-
Padding = 16,
92-
Children = { new Label { Text = "Front layer content", FontSize = 16 } }
98+
ItemsSource = new string[] { "Appetizers", "Soups", "Desserts" ,"Salads"}
9399
}
94100
}
95101
}
96102
};
97103

104+
this.FrontLayer = new BackdropFrontLayer();
105+
this.FrontLayer.EnableLiquidGlassEffect = true;
106+
98107
{% endhighlight %}
99108
{% endtabs %}
100109

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

Lines changed: 48 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -40,38 +40,70 @@ The following code snippet demonstrates how to apply the Liquid Glass Effect to
4040
xmlns:calendar="clr-namespace:Syncfusion.Maui.Calendar;assembly=Syncfusion.Maui.Calendar"
4141
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
4242
x:Class="AcrylicCalendarPage">
43-
4443
<Grid>
45-
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
46-
47-
<core:SfGlassEffectsView
48-
CornerRadius="20"
49-
Padding="12"
50-
EffectType="Regular"
51-
EnableShadowEffect="True">
52-
53-
<calendar:SfCalendar />
54-
</core:SfGlassEffectsView>
44+
<Grid.Background>
45+
<LinearGradientBrush StartPoint="0,0"
46+
EndPoint="0,1">
47+
<GradientStop Color="#0F4C75"
48+
Offset="0.0"/>
49+
<GradientStop Color="#3282B8"
50+
Offset="0.5"/>
51+
<GradientStop Color="#1B262C"
52+
Offset="1.0"/>
53+
</LinearGradientBrush>
54+
</Grid.Background>
55+
<Grid>
56+
<core:SfGlassEffectView
57+
EffectType="Regular"
58+
CornerRadius="20">
59+
<calendar:SfCalendar x:Name="calendar"
60+
EnableLiquidGlassEffect="True"
61+
Background="Transparent"
62+
WidthRequest="350"
63+
HeightRequest="350"/>
64+
</core:SfGlassEffectView>
65+
</Grid>
5566
</Grid>
5667
</ContentPage>
5768

5869
{% endhighlight %}
5970
{% highlight c# tabtitle="MainPage.xaml.cs" %}
6071

61-
using Syncfusion.Maui.Core;
62-
using Syncfusion.Maui.Calendar;
72+
// Outer grid with gradient background
73+
var mainGrid = new Grid()
74+
{
75+
Background = new LinearGradientBrush()
76+
{
77+
StartPoint = new Point(0, 0),
78+
EndPoint = new Point(0, 1),
79+
GradientStops =
80+
{
81+
new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
82+
new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
83+
new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
84+
}
85+
}
86+
};
87+
88+
// Inner grid container
89+
var innerGrid = new Grid();
6390

64-
var glassView = new SfGlassEffectsView
91+
var glassView = new SfGlassEffectsView()
6592
{
6693
CornerRadius = 20,
67-
Padding = new Thickness(12),
6894
EffectType = LiquidGlassEffectType.Regular,
69-
EnableShadowEffect = true
7095
};
7196

7297
var calendar = new SfCalendar();
98+
calendar.EnableLiquidGlassEffect = true;
99+
calendar.Background = Colors.Transparent;
100+
calendar.WidthRequest = 350;
101+
calendar.HeightRequest = 350;
73102

74103
glassView.Content = calendar;
104+
innerGrid.Children.Add(glassView);
105+
mainGrid.Children.Add(innerGrid);
106+
this.Content = mainGrid;
75107

76108
{% endhighlight %}
77109
{% endtabs %}

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

Lines changed: 53 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -33,40 +33,73 @@ The following code snippet demonstrates how to apply the Liquid Glass Effect to
3333
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
3434
xmlns:cards="clr-namespace:Syncfusion.Maui.Cards;assembly=Syncfusion.Maui.Cards"
3535
x:Class="AcrylicCardsPage">
36-
3736
<Grid>
38-
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
39-
40-
<cards:SfCardView
41-
EnableLiquidGlassEffect="True">
42-
<VerticalStackLayout Spacing="8">
43-
<Label Text="Glass Card" FontSize="18" FontAttributes="Bold"/>
44-
<Label Text="This card uses the built-in liquid glass effect."/>
45-
</VerticalStackLayout>
46-
</cards:SfCardView>
37+
<Grid.Background>
38+
<LinearGradientBrush StartPoint="0,0"
39+
EndPoint="0,1">
40+
<GradientStop Color="#0F4C75"
41+
Offset="0.0"/>
42+
<GradientStop Color="#3282B8"
43+
Offset="0.5"/>
44+
<GradientStop Color="#1B262C"
45+
Offset="1.0"/>
46+
</LinearGradientBrush>
47+
</Grid.Background>
48+
<Grid>
49+
<cards:SfCardView x:Name="cardView" EnableLiquidGlassEffect="True"
50+
Background="Transparent"
51+
BorderColor="Transparent"
52+
WidthRequest="350"
53+
HeightRequest="200">
54+
<Label Text="SfCardView"
55+
HorizontalOptions="Center"
56+
VerticalOptions="Center"/>
57+
</cards:SfCardView>
58+
</Grid>
4759
</Grid>
48-
4960
</ContentPage>
5061

5162
{% endhighlight %}
5263
{% highlight c# tabtitle="MainPage.xaml.cs" %}
53-
using Syncfusion.Maui.Cards;
5464

55-
var card = new SfCardView
65+
// Outer grid with gradient background
66+
var mainGrid = new Grid()
67+
{
68+
Background = new LinearGradientBrush()
69+
{
70+
StartPoint = new Point(0, 0),
71+
EndPoint = new Point(0, 1),
72+
GradientStops =
73+
{
74+
new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
75+
new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
76+
new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
77+
}
78+
}
79+
};
80+
81+
var innerGrid = new Grid();
82+
83+
var card = new SfCardView()
5684
{
5785
EnableLiquidGlassEffect = true,
86+
Background = Colors.Transparent,
87+
BorderColor = Colors.Transparent,
88+
WidthRequest = 350,
89+
HeightRequest = 200,
5890
};
5991

60-
card.Content = new VerticalStackLayout
92+
card.Content = new Label()
6193
{
62-
Spacing = 8,
63-
Children =
64-
{
65-
new Label { Text = "Glass Card", FontSize = 18, FontAttributes = FontAttributes.Bold },
66-
new Label { Text = "This card uses the built-in liquid glass effect." },
67-
}
94+
Text = "SfCardView",
95+
HorizontalOptions = LayoutOptions.Center,
96+
VerticalOptions = LayoutOptions.Center
6897
};
6998

99+
innerGrid.Add(card);
100+
mainGrid.Add(innerGrid);
101+
this.Content = mainGrid;
102+
70103
{% endhighlight %}
71104
{% endtabs %}
72105

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

Lines changed: 62 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -40,38 +40,83 @@ The following code snippet demonstrates how to apply the Liquid Glass Effect to
4040
xmlns:datepicker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker"
4141
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
4242
x:Class="AcrylicDatePickerPage">
43-
4443
<Grid>
45-
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
46-
47-
<core:SfGlassEffectsView
48-
CornerRadius="20"
49-
Padding="12"
50-
EffectType="Regular"
51-
EnableShadowEffect="True">
52-
53-
<datepicker:SfDatePicker />
54-
</core:SfGlassEffectsView>
44+
<Grid.Background>
45+
<LinearGradientBrush StartPoint="0,0"
46+
EndPoint="0,1">
47+
<GradientStop Color="#0F4C75"
48+
Offset="0.0"/>
49+
<GradientStop Color="#3282B8"
50+
Offset="0.5"/>
51+
<GradientStop Color="#1B262C"
52+
Offset="1.0"/>
53+
</LinearGradientBrush>
54+
</Grid.Background>
55+
<Grid>
56+
<core:SfGlassEffectView
57+
EffectType="Regular"
58+
CornerRadius="20"
59+
WidthRequest="350"
60+
HeightRequest="350">
61+
<picker:SfDatePicker x:Name="datepicker"
62+
EnableLiquidGlassEffect="True"
63+
Background="Transparent">
64+
<picker:SfDatePicker.ColumnHeaderView>
65+
<picker:DatePickerColumnHeaderView Background="Transparent"/>
66+
</picker:SfDatePicker.ColumnHeaderView>
67+
</picker:SfDatePicker>
68+
</core:SfGlassEffectView>
69+
</Grid>
5570
</Grid>
5671
</ContentPage>
5772

5873
{% endhighlight %}
5974
{% highlight c# tabtitle="MainPage.xaml.cs" %}
6075

61-
using Syncfusion.Maui.Core;
62-
using Syncfusion.Maui.Picker;
76+
// Outer grid with gradient background
77+
var mainGrid = new Grid()
78+
{
79+
Background = new LinearGradientBrush()
80+
{
81+
StartPoint = new Point(0, 0),
82+
EndPoint = new Point(0, 1),
83+
GradientStops =
84+
{
85+
new GradientStop { Color = Color.FromArgb("#0F4C75"), Offset = 0.0f },
86+
new GradientStop { Color = Color.FromArgb("#3282B8"), Offset = 0.5f },
87+
new GradientStop { Color = Color.FromArgb("#1B262C"), Offset = 1.0f }
88+
}
89+
}
90+
};
91+
92+
// Inner grid container
93+
var innerGrid = new Grid();
6394

64-
var glassView = new SfGlassEffectsView
95+
var glassView = new SfGlassEffectsView()
6596
{
6697
CornerRadius = 20,
67-
Padding = new Thickness(12),
6898
EffectType = LiquidGlassEffectType.Regular,
69-
EnableShadowEffect = true
99+
WidthRequest = 350,
100+
HeightRequest = 350,
101+
Background = Colors.Transparent
70102
};
71103

72-
var datePicker = new SfDatePicker();
104+
var datePicker = new SfDatePicker()
105+
{
106+
EnableLiquidGlassEffect = true,
107+
Background = Colors.Transparent,
108+
WidthRequest = 350,
109+
HeightRequest = 350,
110+
ColumnHeaderView = new DatePickerColumnHeaderView()
111+
{
112+
Background = Colors.Transparent,
113+
}
114+
};
73115

74116
glassView.Content = datePicker;
117+
innerGrid.Children.Add(glassView);
118+
mainGrid.Children.Add(innerGrid);
119+
this.Content = mainGrid;
75120

76121
{% endhighlight %}
77122
{% endtabs %}

0 commit comments

Comments
 (0)