Skip to content

Commit 013ba9a

Browse files
naveenkumar-sanjeevirayannaveenkumar-sanjeevirayan
committed
Merge branch 'development' of https://github.com/syncfusion-content/maui-docs into ContextUG
# Conflicts: # maui-toc.html
2 parents 7588153 + e542932 commit 013ba9a

File tree

63 files changed

+2952
-281
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+2952
-281
lines changed

‎MAUI/AIAssistView/styles.md‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1181,3 +1181,115 @@ public MainPage()
11811181
{% endtabs %}
11821182

11831183
![Common suggestion style in .NET MAUI AI AssistView](Images/styles/maui-aiassistview-styles-commonsuggestion.png)
1184+
1185+
## Scroll to bottom button style
1186+
1187+
To style the scroll to bottom button view based on its appearance, set values to the in-built keys in the resource dictionary.
1188+
1189+
<table>
1190+
<tr>
1191+
<th> Key </th>
1192+
<th> Description </th>
1193+
</tr>
1194+
<tr>
1195+
<td> SfAIAssistViewScrollToBottomButtonBackground </td>
1196+
<td> Background color of the scroll to bottom button view. </td>
1197+
</tr>
1198+
<tr>
1199+
<td> SfAIAssistViewScrollToBottomButtonIconColor </td>
1200+
<td> Color of the scroll to bottom button. </td>
1201+
</tr>
1202+
</table>
1203+
1204+
{% tabs %}
1205+
{% highlight xaml %}
1206+
1207+
<ContentPage.Resources>
1208+
<core:SyncfusionThemeDictionary>
1209+
<core:SyncfusionThemeDictionary.MergedDictionaries>
1210+
<ResourceDictionary>
1211+
<x:String x:Key="SfAIAssistViewTheme">CustomTheme</x:String>
1212+
<Color x:Key="SfAIAssistViewScrollToBottomButtonBackground">Orange</Color>
1213+
<Color x:Key="SfAIAssistViewScrollToBottomButtonIconColor">White</Color>
1214+
</ResourceDictionary>
1215+
</core:SyncfusionThemeDictionary.MergedDictionaries>
1216+
</core:SyncfusionThemeDictionary>
1217+
</ContentPage.Resources>
1218+
1219+
{% endhighlight %}
1220+
{% highlight c# %}
1221+
1222+
public MainPage()
1223+
{
1224+
InitializeComponent();
1225+
ResourceDictionary dictionary = new ResourceDictionary();
1226+
dictionary.Add("SfAIAssistViewTheme", "CustomTheme");
1227+
dictionary.Add("SfAIAssistViewScrollToBottomButtonBackground", Colors.Orange);
1228+
dictionary.Add("SfAIAssistViewScrollToBottomButtonIconColor", Colors.White);
1229+
this.Resources.Add(dictionary);
1230+
}
1231+
1232+
{% endhighlight %}
1233+
{% endtabs %}
1234+
1235+
## Action button style
1236+
1237+
To style the action button view based on its appearance, set values to the in-built keys in the resource dictionary.
1238+
1239+
<table>
1240+
<tr>
1241+
<th> Key </th>
1242+
<th> Description </th>
1243+
</tr>
1244+
<tr>
1245+
<td> SfAIAssistViewActionButtonBackground </td>
1246+
<td> Background color of the action button. </td>
1247+
</tr>
1248+
<tr>
1249+
<td> SfAIAssistViewActionButtonIconColor </td>
1250+
<td> Color of the action button. </td>
1251+
</tr>
1252+
<tr>
1253+
<td> SfAIAssistViewActionButtonViewTextColor </td>
1254+
<td> Text color of an item in the action button. </td>
1255+
</tr>
1256+
<tr>
1257+
<td> SfAIAssistViewActionButtonsPopupBackground </td>
1258+
<td> Background color of the action buttons view. </td>
1259+
</tr>
1260+
</table>
1261+
1262+
{% tabs %}
1263+
{% highlight xaml %}
1264+
1265+
<ContentPage.Resources>
1266+
<core:SyncfusionThemeDictionary>
1267+
<core:SyncfusionThemeDictionary.MergedDictionaries>
1268+
<ResourceDictionary>
1269+
<x:String x:Key="SfAIAssistViewTheme">CustomTheme</x:String>
1270+
<Color x:Key="SfAIAssistViewActionButtonBackground">Orange</Color>
1271+
<Color x:Key="SfAIAssistViewActionButtonIconColor">White</Color>
1272+
<Color x:Key="SfAIAssistViewActionButtonViewTextColor">Black</Color>
1273+
<Color x:Key="SfAIAssistViewActionButtonsPopupBackground">LightGray</Color>
1274+
</ResourceDictionary>
1275+
</core:SyncfusionThemeDictionary.MergedDictionaries>
1276+
</core:SyncfusionThemeDictionary>
1277+
</ContentPage.Resources>
1278+
1279+
{% endhighlight %}
1280+
{% highlight c# %}
1281+
1282+
public MainPage()
1283+
{
1284+
InitializeComponent();
1285+
ResourceDictionary dictionary = new ResourceDictionary();
1286+
dictionary.Add("SfAIAssistViewTheme", "CustomTheme");
1287+
dictionary.Add("SfAIAssistViewActionButtonBackground", Colors.Orange);
1288+
dictionary.Add("SfAIAssistViewActionButtonIconColor", Colors.White);
1289+
dictionary.Add("SfAIAssistViewActionButtonViewTextColor", Colors.Black);
1290+
dictionary.Add("SfAIAssistViewActionButtonsPopupBackground", Colors.LightGray);
1291+
this.Resources.Add(dictionary);
1292+
}
1293+
1294+
{% endhighlight %}
1295+
{% endtabs %}

‎MAUI/Autocomplete/LiquidGlassSupport.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
layout: post
3+
title: Liquid Glass Support for .NET MAUI Autocomplete entry | Syncfusion®
4+
description: Learn here about providing liquid glass support for Syncfusion® .NET MAUI Autocomplete (SfAutocomplete) control and more.
5+
platform: MAUI
6+
control: SfAutocomplete
7+
documentation: ug
8+
---
9+
10+
# Liquid glass support
11+
12+
The [SfAutocomplete](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Inputs.SfAutocomplete.html) supports a liquid `glass` appearance by hosting the control inside the Syncfusion [SfGlassEffectsView](). 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 SfAutocomplete is placed over images or colorful layouts. Additionally, the dropdown portion of SfAutocomplete applies the glass effect only when the [EnableLiquidGlassEffect]() property is set to true.
13+
14+
## Availability
15+
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.
19+
20+
## Prerequisites
21+
22+
- Add the Syncfusion.Maui.Core package (for SfGlassEffectsView) and Syncfusion.Maui.Inputs (for SfAutocomplete).
23+
24+
XAML example Wrap the SfAutocomplete in an SfGlassEffectsView, then enable the dropdown’s glass effect with `EnableLiquidGlassEffect`.
25+
26+
{% tabs %}
27+
{% highlight xaml hl_lines="49 52" %}
28+
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="AcrylicAutocompleteBoxPage">
36+
37+
<Grid>
38+
<!-- Background to make acrylic blur visible -->
39+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
40+
<core:SfGlassEffectsView
41+
CornerRadius="20"
42+
HeightRequest="40"
43+
EffectType="Regular"
44+
EnableShadowEffect="True">
45+
46+
<inputs:SfAutocomplete
47+
EnableLiquidGlassEffect="True"
48+
ItemsSource="{Binding Employees}"
49+
DisplayMemberPath="Name"
50+
DropDownBackground="Transparent"
51+
Placeholder="Select employee"/>
52+
</core:SfGlassEffectsView>
53+
</Grid>
54+
</ContentPage>
55+
56+
{% endhighlight %}
57+
{% highlight c# hl_lines="74 77" %}
58+
59+
using Syncfusion.Maui.Core;
60+
using Syncfusion.Maui.Inputs;
61+
62+
var glassEffects = new SfGlassEffectsView
63+
{
64+
CornerRadius=20,
65+
HeightRequest=40,
66+
EffectType=LiquidGlassEffectType.Regular,
67+
EnableShadowEffect=True
68+
};
69+
70+
var Autocomplete = new SfAutocomplete
71+
{
72+
EnableLiquidGlassEffect = true, // Dropdown glass effect
73+
ItemsSource = viewModel.Employees,
74+
DisplayMemberPath = "Name",
75+
DropDownBackground= Colors.Transparent,
76+
Placeholder = "Select employee",
77+
};
78+
79+
glassEffects.Content = Autocomplete;
80+
81+
{% endhighlight %}
82+
{% endtabs %}
83+
84+
85+
The following screenshot illustrates SfAutocomplete within an acrylic container, with the dropdown using the glass effect.

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

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
---
2+
layout: post
3+
title: Liquid Glass Support for .NET MAUI Backdrop Page | Syncfusion®
4+
description: Learn how to enable liquid glass support for the Syncfusion® .NET MAUI Backdrop Page using the EnableLiquidGlassEffect property.
5+
platform: MAUI
6+
control: SfBackdropPage
7+
documentation: ug
8+
---
9+
10+
# Liquid Glass Support
11+
12+
The [SfBackdropPage](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.SfBackdropPage.html) supports a liquid glass appearance on both layers. Enable the effect directly on the [BackdropBackLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.BackdropBackLayer.html) and [BackdropFrontLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Backdrop.BackdropFrontLayer.html) by setting their [EnableLiquidGlassEffect]() properties to true. This improves visual depth and readability when the backdrop layers are placed over images or colorful layouts.
13+
14+
## Platform and Version Support
15+
16+
1. This feature is supported on .NET 10 or greater.
17+
2. This feature is supported on macOS 26 and iOS 26 or later.
18+
3. On platforms or versions below these requirements, the layers render without the acrylic blur effect and fall back to a standard background.
19+
20+
## Prerequisites
21+
22+
- Add the [Syncfusion.Maui.Backdrop](https://www.nuget.org/packages/Syncfusion.Maui.Backdrop) package (for SfBackdropPage, BackdropFrontLayer, BackdropBackLayer).
23+
24+
## Apply Liquid Glass Effect to the back layer
25+
26+
Turn on the liquid glass effect on the back layer by setting [EnableLiquidGlassEffect]() to true.
27+
28+
{% tabs %}
29+
{% highlight xaml %}
30+
31+
<?xml version="1.0" encoding="utf-8" ?>
32+
<backdrop:SfBackdropPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
33+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
34+
x:Class="AcrylicBackdropPage"
35+
xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop">
36+
37+
<backdrop:SfBackdropPage.BackLayer>
38+
<backdrop:BackdropBackLayer EnableLiquidGlassEffect="True">
39+
<Grid>
40+
<!-- Optional: colorful/image background to visualize acrylic -->
41+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
42+
<StackLayout Padding="16">
43+
<Label Text="Back layer content" FontSize="16"/>
44+
</StackLayout>
45+
</Grid>
46+
</backdrop:BackdropBackLayer>
47+
</backdrop:SfBackdropPage.BackLayer>
48+
49+
<backdrop:SfBackdropPage.FrontLayer>
50+
<backdrop:BackdropFrontLayer>
51+
<Grid BackgroundColor="WhiteSmoke" />
52+
</backdrop:BackdropFrontLayer>
53+
</backdrop:SfBackdropPage.FrontLayer>
54+
</backdrop:SfBackdropPage>
55+
56+
{% endhighlight %}
57+
{% highlight c# %}
58+
59+
using Syncfusion.Maui.Backdrop;
60+
61+
this.BackLayer = new BackdropBackLayer
62+
{
63+
EnableLiquidGlassEffect = true,
64+
Content = new Grid
65+
{
66+
Children =
67+
{
68+
new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill },
69+
new VerticalStackLayout
70+
{
71+
Padding = 16,
72+
Children = { new Label { Text = "Back layer content", FontSize = 16 } }
73+
}
74+
}
75+
}
76+
};
77+
78+
this.FrontLayer = new BackdropFrontLayer
79+
{
80+
Content = new Grid { BackgroundColor = Colors.WhiteSmoke }
81+
};
82+
83+
{% endhighlight %}
84+
{% endtabs %}
85+
86+
## Apply Liquid Glass Effect to the front layer
87+
88+
You can enable the liquid glass effect for the front layer as well by setting [EnableLiquidGlassEffect]() to true.
89+
90+
{% tabs %}
91+
{% highlight xaml %}
92+
93+
<?xml version="1.0" encoding="utf-8" ?>
94+
<backdrop:SfBackdropPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
95+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
96+
x:Class="AcrylicBackdropFrontPage"
97+
xmlns:backdrop="clr-namespace:Syncfusion.Maui.Backdrop;assembly=Syncfusion.Maui.Backdrop">
98+
99+
<backdrop:SfBackdropPage.BackLayer>
100+
<backdrop:BackdropBackLayer>
101+
<Grid>
102+
<Label Text="Menu" HorizontalOptions="Center" VerticalOptions="Center"/>
103+
</Grid>
104+
</backdrop:BackdropBackLayer>
105+
</backdrop:SfBackdropPage.BackLayer>
106+
107+
<backdrop:SfBackdropPage.FrontLayer>
108+
<backdrop:BackdropFrontLayer EnableLiquidGlassEffect="True">
109+
<Grid>
110+
<!-- Optional: place bright imagery behind the surface to visualize blur -->
111+
<Image Source="wallpaper.jpg" Aspect="AspectFill" />
112+
<StackLayout Padding="16">
113+
<Label Text="Front layer content" FontSize="16"/>
114+
</StackLayout>
115+
</Grid>
116+
</backdrop:BackdropFrontLayer>
117+
</backdrop:SfBackdropPage.FrontLayer>
118+
</backdrop:SfBackdropPage>
119+
120+
{% endhighlight %}
121+
{% highlight c# %}
122+
123+
using Syncfusion.Maui.Backdrop;
124+
125+
this.BackLayer = new BackdropBackLayer
126+
{
127+
Content = new Grid
128+
{
129+
Children = { new Label { Text = "Menu", HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center } }
130+
}
131+
};
132+
133+
this.FrontLayer = new BackdropFrontLayer
134+
{
135+
EnableLiquidGlassEffect = true,
136+
Content = new Grid
137+
{
138+
Children =
139+
{
140+
new Image { Source = "wallpaper.jpg", Aspect = Aspect.AspectFill },
141+
new VerticalStackLayout
142+
{
143+
Padding = 16,
144+
Children = { new Label { Text = "Front layer content", FontSize = 16 } }
145+
}
146+
}
147+
}
148+
};
149+
150+
{% endhighlight %}
151+
{% endtabs %}
152+
153+
N>
154+
* Liquid Glass effects are most visible over images or colorful backgrounds.
155+
* You can enable the effect independently on either the back layer, the front layer, or both as needed.
156+
157+
## Best Practices and Tips
158+
159+
- The back and front layers use built-in acrylic when their [EnableLiquidGlassEffect]() property is true.
160+
- Place imagery or vibrant backgrounds beneath the layer surface to see the blur clearly.
161+
- Combine with existing layout properties (RevealedHeight, EdgeShape, etc.) to achieve the desired design while using the effect.
162+
163+
The following screenshots illustrate the back and front layers with the liquid glass effect enabled over colorful backgrounds.

0 commit comments

Comments
 (0)