Liquid Glass Effect in .NET MAUI Pyramid Chart

8 Jul 20266 minutes to read

The Liquid Glass Effect is a modern design style that provides a sleek, minimalist appearance with clean lines, subtle visual effects, and elegant styling. It features smooth rounded corners and sophisticated visual treatments that create a polished, professional look for your charts.

NOTE

Prerequisite:

• Ensure that the required NuGet package is installed, the necessary namespaces are imported, and the Pyramid Chart control is properly configured in your application. For detailed setup and configuration instructions, refer to the Getting Started guide.
• To use SfGlassEffectView, ensure that the Syncfusion.Maui.Core package is installed and import the Syncfusion.Maui.Core namespace.

NOTE

The liquid glass effect is supported with .NET 10 and on iOS and macOS versions 26 or later.

How it Enhances Chart UI on macOS and iOS

The Liquid Glass Effect enhances MAUI SfPyramidChart with a sleek, glassy look and improved interactivity.

• Tooltip: Applies a glassy appearance to tooltips for clearer data highlights.
• Chart Background: Wrap the chart in an SfGlassEffectView to give the chart surface a blurred or clear glass background.

Apply Liquid Glass Effect to SfPyramidChart

Wrap the SfPyramidChart inside an SfGlassEffectView to give the chart surface a glass (blurred or clear) appearance. SfGlassEffectView is available in the Syncfusion.Maui.Core package.

XAML

<core:SfGlassEffectView CornerRadius="20"
                        Padding="12"
                        EffectType="Regular"
                        EnableShadowEffect="True">
    <chart:SfPyramidChart ItemsSource="{Binding Data}" 
                          XBindingPath="XValue" 
                          YBindingPath="YValue"/>
</core:SfGlassEffectView>

C#

SfPyramidChart chart = new SfPyramidChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";

var glass = new SfGlassEffectView
{
    CornerRadius = 20,
    Padding = new Thickness(12),
    EffectType = GlassEffectType.Regular, // Regular (blurrier) or Clear (glassy)
    EnableShadowEffect = true,
    Content = chart
};

this.Content = glass;

For detailed guidance on SfGlassEffectView, refer to the Getting Started documentation.

Enable Liquid Glass Effect for the Tooltip

To enable the liquid glass effect for the tooltip, set the EnableLiquidGlassEffect and EnableTooltip properties to true on the SfPyramidChart.

XAML

<chart:SfPyramidChart ItemsSource="{Binding Data}" 
                      XBindingPath="XValue" 
                      YBindingPath="YValue"
                      EnableLiquidGlassEffect="True"
                      EnableTooltip="True">
</chart:SfPyramidChart>

C#

SfPyramidChart chart = new SfPyramidChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.EnableLiquidGlassEffect = true;
chart.EnableTooltip = true;

this.Content = chart;

Best Practices and Tips

• Liquid glass effects are most visible over images or colorful backgrounds.
• Set EffectType property of SfGlassEffectView to Regular for a blurrier look and Clear for a crisper, glassy look.
• Adjust CornerRadius and Padding properties to balance content density and visual polish.
• When using a custom template for tooltip with TooltipTemplate, set the background to Transparent to display the liquid glass effect properly.

The following code example shows how to use a custom tooltip template with a transparent background:

XAML

<Grid x:Name="grid">
    <Grid.Resources>
        <DataTemplate x:Key="tooltipTemplate">
            <Label Text="{Binding Item.YValue}"
                   TextColor="White"
                   FontAttributes="Bold"
                   Padding="8"/>
        </DataTemplate>
    </Grid.Resources>

    <chart:SfPyramidChart ItemsSource="{Binding Data}"
                          XBindingPath="XValue"
                          YBindingPath="YValue"
                          EnableLiquidGlassEffect="True"
                          EnableTooltip="True"
                          TooltipTemplate="{StaticResource tooltipTemplate}">
    </chart:SfPyramidChart>
</Grid>

C#

// In your DataTemplate for the tooltip, set Background to Transparent
var tooltipTemplate = new DataTemplate(() =>
{
    var label = new Label
    {
        TextColor = Colors.White,
        FontAttributes = FontAttributes.Bold,
        Padding = 8,
        BackgroundColor = Colors.Transparent  // Ensure transparent background
    };
    label.SetBinding(Label.TextProperty, "Item.YValue");
    return label;
});

SfPyramidChart chart = new SfPyramidChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.EnableLiquidGlassEffect = true;
chart.EnableTooltip = true;
chart.TooltipTemplate = tooltipTemplate;

this.Content = chart;