Skip to content

Commit a369e19

Browse files
MohamedHasan3644MohamedHasan3644
committed
Updated code snippet
1 parent 7651938 commit a369e19

File tree

8 files changed

+348
-16
lines changed

8 files changed

+348
-16
lines changed

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

Lines changed: 66 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,74 @@ To achieve a glass like background in the Front or Back Layer, set the `Backgrou
2626
The following code snippet demonstrates how to apply the Liquid Glass Effect to the Front or Back layer of the `SfBackdropPage` control:
2727

2828
{% tabs %}
29-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
29+
{% highlight xaml tabtitle="MainPage.xaml" %}
30+
31+
<backdrop:SfBackdropPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
32+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
33+
x:Class="AcrylicBackdropPage"
34+
xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop">
35+
36+
<backdrop:SfBackdropPage.BackLayer>
37+
<backdrop:BackdropBackLayer EnableLiquidGlassEffect="True">
38+
<Grid>
39+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
40+
<StackLayout Padding="16">
41+
<Label Text="Back layer content" FontSize="16"/>
42+
</StackLayout>
43+
</Grid>
44+
</backdrop:BackdropBackLayer>
45+
</backdrop:SfBackdropPage.BackLayer>
46+
47+
<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>
56+
</backdrop:SfBackdropPage.FrontLayer>
57+
</backdrop:SfBackdropPage>
3058

3159
{% endhighlight %}
32-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
60+
{% highlight c# tabtitle="MainPage.xaml.cs" %}
61+
62+
using Syncfusion.Maui.Backdrop;
63+
64+
this.BackLayer = new BackdropBackLayer
65+
{
66+
EnableLiquidGlassEffect = true,
67+
Content = new Grid
68+
{
69+
Children =
70+
{
71+
new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill },
72+
new VerticalStackLayout
73+
{
74+
Padding = 16,
75+
Children = { new Label { Text = "Back layer content", FontSize = 16 } }
76+
}
77+
}
78+
}
79+
};
80+
81+
this.FrontLayer = new BackdropFrontLayer
82+
{
83+
EnableLiquidGlassEffect = true,
84+
Content = new Grid
85+
{
86+
Children =
87+
{
88+
new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill },
89+
new VerticalStackLayout
90+
{
91+
Padding = 16,
92+
Children = { new Label { Text = "Front layer content", FontSize = 16 } }
93+
}
94+
}
95+
}
96+
};
3397

3498
{% endhighlight %}
3599
{% endtabs %}

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

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,46 @@ To achieve a glass like background in the Calendar, set the `Background` propert
3232
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfCalendar` control:
3333

3434
{% tabs %}
35-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
35+
{% highlight xaml tabtitle="MainPage.xaml" %}
36+
37+
<ContentPage
38+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
39+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
40+
xmlns:calendar="clr-namespace:Syncfusion.Maui.Calendar;assembly=Syncfusion.Maui.Calendar"
41+
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
42+
x:Class="AcrylicCalendarPage">
43+
44+
<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>
55+
</Grid>
56+
</ContentPage>
3657

3758
{% endhighlight %}
38-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
59+
{% highlight c# tabtitle="MainPage.xaml.cs" %}
60+
61+
using Syncfusion.Maui.Core;
62+
using Syncfusion.Maui.Calendar;
63+
64+
var glassView = new SfGlassEffectsView
65+
{
66+
CornerRadius = 20,
67+
Padding = new Thickness(12),
68+
EffectType = LiquidGlassEffectType.Regular,
69+
EnableShadowEffect = true
70+
};
71+
72+
var calendar = new SfCalendar();
73+
74+
glassView.Content = calendar;
3975

4076
{% endhighlight %}
4177
{% endtabs %}

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

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,46 @@ To achieve a glass like background in the card view, set the `Background` proper
2626
The following code snippet demonstrates how to apply the Liquid Glass Effect to the card view:
2727

2828
{% tabs %}
29-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
29+
{% highlight xaml tabtitle="MainPage.xaml" %}
30+
31+
<ContentPage
32+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
33+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
34+
xmlns:cards="clr-namespace:Syncfusion.Maui.Cards;assembly=Syncfusion.Maui.Cards"
35+
x:Class="AcrylicCardsPage">
36+
37+
<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>
47+
</Grid>
48+
49+
</ContentPage>
3050

3151
{% endhighlight %}
32-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
52+
{% highlight c# tabtitle="MainPage.xaml.cs" %}
53+
using Syncfusion.Maui.Cards;
54+
55+
var card = new SfCardView
56+
{
57+
EnableLiquidGlassEffect = true,
58+
};
59+
60+
card.Content = new VerticalStackLayout
61+
{
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+
}
68+
};
3369

3470
{% endhighlight %}
3571
{% endtabs %}

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

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,46 @@ To achieve a glass like background in the Date Picker, set the `Background` prop
3232
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfDatePicker` control:
3333

3434
{% tabs %}
35-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
35+
{% highlight xaml tabtitle="MainPage.xaml" %}
36+
37+
<ContentPage
38+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
39+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
40+
xmlns:datepicker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker"
41+
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
42+
x:Class="AcrylicDatePickerPage">
43+
44+
<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>
55+
</Grid>
56+
</ContentPage>
3657

3758
{% endhighlight %}
38-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
59+
{% highlight c# tabtitle="MainPage.xaml.cs" %}
60+
61+
using Syncfusion.Maui.Core;
62+
using Syncfusion.Maui.Picker;
63+
64+
var glassView = new SfGlassEffectsView
65+
{
66+
CornerRadius = 20,
67+
Padding = new Thickness(12),
68+
EffectType = LiquidGlassEffectType.Regular,
69+
EnableShadowEffect = true
70+
};
71+
72+
var datePicker = new SfDatePicker();
73+
74+
glassView.Content = datePicker;
3975

4076
{% endhighlight %}
4177
{% endtabs %}

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

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,46 @@ To achieve a glass like background in the Date Time Picker, set the `Background`
3232
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfDateTimePicker` control:
3333

3434
{% tabs %}
35-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
35+
{% highlight xaml tabtitle="MainPage.xaml" %}
36+
37+
<ContentPage
38+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
39+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
40+
xmlns:datetimepicker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker"
41+
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
42+
x:Class="AcrylicDateTimePickerPage">
43+
44+
<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+
<datetimepicker:SfDateTimePicker />
54+
</core:SfGlassEffectsView>
55+
</Grid>
56+
</ContentPage>
3657

3758
{% endhighlight %}
38-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
59+
{% highlight c# tabtitle="MainPage.xaml.cs" %}
60+
61+
using Syncfusion.Maui.Core;
62+
using Syncfusion.Maui.Picker;
63+
64+
var glassView = new SfGlassEffectsView
65+
{
66+
CornerRadius = 20,
67+
Padding = new Thickness(12),
68+
EffectType = LiquidGlassEffectType.Regular,
69+
EnableShadowEffect = true
70+
};
71+
72+
var dateTimePicker = new SfDateTimePicker();
73+
74+
glassView.Content = dateTimePicker;
3975

4076
{% endhighlight %}
4177
{% endtabs %}

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

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,46 @@ To achieve a glass like background in the Picker, set the `Background` property
3232
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfPicker` control:
3333

3434
{% tabs %}
35-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
35+
{% highlight xaml tabtitle="MainPage.xaml" %}
36+
37+
<ContentPage
38+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
39+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
40+
xmlns:picker="clr-namespace:Syncfusion.Maui.Picker;assembly=Syncfusion.Maui.Picker"
41+
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
42+
x:Class="AcrylicPickerPage">
43+
44+
<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+
<picker:SfPicker />
54+
</core:SfGlassEffectsView>
55+
</Grid>
56+
</ContentPage>
3657

3758
{% endhighlight %}
38-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
59+
{% highlight c# tabtitle="MainPage.xaml.cs" %}
60+
61+
using Syncfusion.Maui.Core;
62+
using Syncfusion.Maui.Picker;
63+
64+
var glassView = new SfGlassEffectsView
65+
{
66+
CornerRadius = 20,
67+
Padding = new Thickness(12),
68+
EffectType = LiquidGlassEffectType.Regular,
69+
EnableShadowEffect = true
70+
};
71+
72+
var picker = new SfPicker();
73+
74+
glassView.Content = picker;
3975

4076
{% endhighlight %}
4177
{% endtabs %}

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

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,47 @@ To achieve a glass like background in the Time Picker, set the `Background` prop
3232
The following code snippet demonstrates how to apply the Liquid Glass Effect to the `SfTimePicker` control:
3333

3434
{% tabs %}
35-
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="14 16 20" %}
35+
{% highlight xaml tabtitle="MainPage.xaml" %}
36+
37+
<ContentPage
38+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
39+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
40+
xmlns:timepicker="clr-namespace:Syncfusion.Maui.TimePicker;assembly=Syncfusion.Maui.TimePicker"
41+
xmlns:core="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
42+
x:Class="AcrylicTimePickerPage">
43+
44+
<Grid>
45+
<!-- Background to make acrylic blur visible -->
46+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
47+
48+
<core:SfGlassEffectsView
49+
CornerRadius="20"
50+
Padding="12"
51+
EffectType="Regular"
52+
EnableShadowEffect="True">
53+
54+
<timepicker:SfTimePicker />
55+
</core:SfGlassEffectsView>
56+
</Grid>
57+
</ContentPage>
3658

3759
{% endhighlight %}
38-
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="21 22 23 24 25 30" %}
60+
{% highlight c# tabtitle="MainPage.xaml.cs" %}
61+
62+
using Syncfusion.Maui.Core;
63+
using Syncfusion.Maui.TimePicker;
64+
65+
var glassView = new SfGlassEffectsView
66+
{
67+
CornerRadius = 20,
68+
Padding = new Thickness(12),
69+
EffectType = LiquidGlassEffectType.Regular,
70+
EnableShadowEffect = true
71+
};
72+
73+
var timePicker = new SfTimePicker();
74+
75+
glassView.Content = timePicker;
3976

4077
{% endhighlight %}
4178
{% endtabs %}

0 commit comments

Comments
 (0)