Styles in .NET MAUI Popup (SfPopup)

15 Jul 202624 minutes to read

The SfPopup applies style to all of its elements by using the PopupStyle property.

Styling popup header

The SfPopup allows customizing the header appearance using the following properties.

Property	Description
HeaderBackground	Gets or sets the background color for the header.
HeaderFontAttribute	Gets or sets the font attribute (such as bold or italic) for the header title.
HeaderFontFamily	Gets or sets the font family for the header title.
HeaderFontSize	Gets or sets the font size for the header title.
HeaderTextAlignment	Gets or sets the text alignment for the header.
HeaderTextColor	Gets or sets the text color to be applied for the header title.

Refer to the following code example for customizing the header elements.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PopupDemo.MainPage"
             xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup">
    <StackLayout>
        <Button x:Name="clickToShowPopup"
                Text="ClickToShowPopup"
                VerticalOptions="Start"
                HorizontalOptions="Center"
                Clicked="ClickToShowPopup_Clicked" />
        <sfPopup:SfPopup x:Name="popup">
            <sfPopup:SfPopup.PopupStyle>
                <sfPopup:PopupStyle HeaderBackground="DimGray"
                                    HeaderFontAttribute="Bold"
                                    HeaderFontFamily="Roboto-Medium"
                                    HeaderFontSize="25"
                                    HeaderTextAlignment="Center"
                                    HeaderTextColor="White"/>
            </sfPopup:SfPopup.PopupStyle>
        </sfPopup:SfPopup>
    </StackLayout>
</ContentPage>

C#

using Syncfusion.Maui.Popup;

public partial class MainPage : ContentPage
{
    SfPopup popup;
    public MainPage()
    {
        InitializeComponent();
        popup = new SfPopup();
        popup.PopupStyle.HeaderBackground = Color.FromRgb(105,105,105);
        popup.PopupStyle.HeaderFontAttribute = FontAttributes.Bold;
        popup.PopupStyle.HeaderFontFamily = "Roboto-Medium";
        popup.PopupStyle.HeaderFontSize = 25;
        popup.PopupStyle.HeaderTextAlignment = TextAlignment.Center;
        popup.PopupStyle.HeaderTextColor = Color.White;
    }

    private void ClickToShowPopup_Clicked(object sender, EventArgs e)
    {
        popup.Show();
    }
}

Styling popup footer

The SfPopup allows customizing the footer appearance using the following properties.

Property	Description
FooterBackground	Gets or sets the background color for the footer.
AcceptButtonBackground	Gets or sets the background color for the Accept button in the footer.
AcceptButtonTextColor	Gets or sets the foreground color for the Accept button in the footer.
DeclineButtonBackground	Gets or sets the background color for the Decline button in the footer.
DeclineButtonTextColor	Gets or sets the foreground color for the Decline button in the footer.
FooterButtonCornerRadius	Gets or sets the corner radius of the accept and decline buttons in the footer. The default value is 20.

Refer to the following code example for customizing the footer elements.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PopupDemo.MainPage"
             xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup">
    <StackLayout>
        <Button x:Name="clickToShowPopup"
                Text="ClickToShowPopup"
                VerticalOptions="Start"
                HorizontalOptions="Center"
                Clicked="ClickToShowPopup_Clicked" />
        <sfPopup:SfPopup x:Name="popup" AppearanceMode="TwoButton" ShowFooter="True">
            <sfPopup:SfPopup.PopupStyle>
                <sfPopup:PopupStyle FooterBackground="LightGray"
                                    AcceptButtonBackground="DimGray"
                                    AcceptButtonTextColor="White"
                                    DeclineButtonBackground="DimGray"
                                    DeclineButtonTextColor="White"
                                    FooterButtonCornerRadius="0,20,20,0"/>
            </sfPopup:SfPopup.PopupStyle>
        </sfPopup:SfPopup>
    </StackLayout>
</ContentPage>

C#

using Syncfusion.Maui.Popup;

public partial class MainPage : ContentPage
{
    SfPopup popup;
    public MainPage()
    {
        InitializeComponent();
        popup = new SfPopup();

        // Setting the AppearanceMode as TwoButton
        popup.ShowFooter = true;
        popup.AppearanceMode = Syncfusion.Maui.Popup.PopupButtonAppearanceMode.TwoButton;

        // Footer customization
        popup.PopupStyle.FooterBackground = Color.LightGray;
        popup.PopupStyle.AcceptButtonBackground = Color.FromRgb(105, 105, 105);
        popup.PopupStyle.AcceptButtonTextColor = Color.White;
        popup.PopupStyle.DeclineButtonBackground = Color.FromRgb(105, 105, 105);
        popup.PopupStyle.DeclineButtonTextColor = Color.White;
        popup.PopupStyle.FooterButtonCornerRadius = new CornerRadius(0,20,20,0);
    }

    private void ClickToShowPopup_Clicked(object sender, EventArgs e)
    {
        popup.Show();
    }
}

Styling popup message

The SfPopup allows customizing the message appearance using the following properties.

Property	Description
MessageBackground	Gets or sets the background color of content.
MessageFontAttribute	Gets or sets the font attribute (such as bold or italic) to be applied for the content.
MessageFontFamily	Gets or sets the font family to be applied for the content.
MessageFontSize	Gets or sets the font size of the content.
MessageTextAlignment	Gets or sets the text alignment of the content.
MessageTextColor	Gets or sets the foreground color of content.

Refer to the following code example for customizing the message elements.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PopupDemo.MainPage"
             xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup">
    <StackLayout>
        <Button x:Name="clickToShowPopup"
                Text="ClickToShowPopup"
                VerticalOptions="Start"
                HorizontalOptions="Center"
                Clicked="ClickToShowPopup_Clicked" />
        <sfPopup:SfPopup x:Name="popup">
            <sfPopup:SfPopup.PopupStyle>
                <sfPopup:PopupStyle MessageBackground="#4F6750A4"
                                    MessageFontAttribute="Bold"
                                    MessageFontFamily="Roboto-Medium"
                                    MessageFontSize="18"
                                    MessageTextAlignment="Center"
                                    MessageTextColor="Gray"/>
            </sfPopup:SfPopup.PopupStyle>
        </sfPopup:SfPopup>
    </StackLayout>
</ContentPage>

C#

using Syncfusion.Maui.Popup;

public partial class MainPage : ContentPage
{
    SfPopup popup;
    public MainPage()
    {
        InitializeComponent();
        popup = new SfPopup();
        popup.PopupStyle.MessageBackground = Color.FromArgb("#4F6750A4");
        popup.PopupStyle.MessageFontAttribute = FontAttributes.Bold;
        popup.PopupStyle.MessageFontFamily = "Roboto-Medium";
        popup.PopupStyle.MessageFontSize = 18;
        popup.PopupStyle.MessageTextAlignment = TextAlignment.Center;
        popup.PopupStyle.MessageTextColor = Color.FromRgb(128, 128, 128);
    }

    private void ClickToShowPopup_Clicked(object sender, EventArgs e)
    {
        popup.Show();
    }
}

Stroke customization

The SfPopup allows customizing the stroke appearance using the following properties.

Property	Description
Stroke	Gets or sets the stroke color for the popup.
StrokeThickness	Gets or sets the stroke thickness for the popup.
CornerRadius	Gets or sets the corner radius for the popup.

NOTE

On Android 33 and above, it is possible to set different corner radii for each corner using the CornerRadius class. However, on versions below Android 33, a corner radius will be applied if the same value is provided for all corners. The corner radius may not be applied if different values are provided for each corner.

Refer to the following code example for customizing the stroke elements.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PopupDemo.MainPage"
             xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup">
    <StackLayout>
        <Button x:Name="clickToShowPopup"
                Text="ClickToShowPopup"
                VerticalOptions="Start"
                HorizontalOptions="Center"
                Clicked="ClickToShowPopup_Clicked" />
        <sfPopup:SfPopup x:Name="popup">
            <sfPopup:SfPopup.PopupStyle>
                <sfPopup:PopupStyle Stroke="LightBlue"
                                    StrokeThickness="10"
                                    CornerRadius="5" />
            </sfPopup:SfPopup.PopupStyle>
        </sfPopup:SfPopup>
    </StackLayout>
</ContentPage>

C#

using Syncfusion.Maui.Popup;

public partial class MainPage : ContentPage
{
    SfPopup popup;
    public MainPage()
    {
        InitializeComponent();
        popup = new SfPopup();
        popup.PopupStyle.Stroke = Color.FromRgb(173, 216, 230);
        popup.PopupStyle.StrokeThickness = 10;
        popup.PopupStyle.CornerRadius = 5;
    }

    private void ClickToShowPopup_Clicked(object sender, EventArgs e)
    {
        popup.Show();
    }
}

Styling popup background

The SfPopup allows you to customize the background color of the popup using the PopupBackground property.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PopupDemo.MainPage"
             xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup">
    <StackLayout>
        <Button x:Name="clickToShowPopup"
                Text="ClickToShowPopup"
                VerticalOptions="Start"
                HorizontalOptions="Center"
                Clicked="ClickToShowPopup_Clicked" />
        <sfPopup:SfPopup x:Name="popup">
            <sfPopup:SfPopup.PopupStyle>
                <sfPopup:PopupStyle PopupBackground="#C3B0D6" />
            </sfPopup:SfPopup.PopupStyle>
        </sfPopup:SfPopup>
    </StackLayout>
</ContentPage>

C#

using Syncfusion.Maui.Popup;

public partial class MainPage : ContentPage
{
    SfPopup popup;
    public MainPage()
    {
        InitializeComponent();
        popup = new SfPopup();
        popup.PopupStyle.PopupBackground = Color.FromArgb("#C3B0D6");
    }

    private void ClickToShowPopup_Clicked(object sender, EventArgs e)
    {
        popup.Show();
    }
}

Styling overlay background

The SfPopup allows you to customize the background color of the overlay using the OverlayColor property.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PopupDemo.MainPage"
             xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup">
    <StackLayout>
        <Button x:Name="clickToShowPopup"
                Text="ClickToShowPopup"
                VerticalOptions="Start"
                HorizontalOptions="Center"
                Clicked="ClickToShowPopup_Clicked" />
        <sfPopup:SfPopup x:Name="popup">
            <sfPopup:SfPopup.PopupStyle>
                <sfPopup:PopupStyle OverlayColor="LightPink" />
            </sfPopup:SfPopup.PopupStyle>
        </sfPopup:SfPopup>
    </StackLayout>
</ContentPage>

C#

using Syncfusion.Maui.Popup;

public partial class MainPage : ContentPage
{
    SfPopup popup;
    public MainPage()
    {
        InitializeComponent();
        popup = new SfPopup();
        popup.PopupStyle.OverlayColor = Color.FromRgb(255, 182, 193);
    }

    private void ClickToShowPopup_Clicked(object sender, EventArgs e)
    {
        popup.Show();
    }
}

Set overlay opacity

The SfPopup allows you to adjust the opacity of the overlay color by setting the color value as rgba in hexadecimal value.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PopupDemo.MainPage"
             xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup">
    <StackLayout>
        <Button x:Name="clickToShowPopup"
                Text="ClickToShowPopup"
                VerticalOptions="Start"
                HorizontalOptions="Center"
                Clicked="ClickToShowPopup_Clicked" />
        <sfPopup:SfPopup x:Name="popup">
            <sfPopup:SfPopup.PopupStyle>
                <sfPopup:PopupStyle OverlayColor="#30FF0000" />
            </sfPopup:SfPopup.PopupStyle>
        </sfPopup:SfPopup>
    </StackLayout>
</ContentPage>

C#

using Syncfusion.Maui.Popup;

public partial class MainPage : ContentPage
{
    SfPopup popup;
    public MainPage()
    {
        InitializeComponent();
        popup = new SfPopup();
        popup.PopupStyle.OverlayColor = Color.FromArgb("#30FF0000");
    }

    private void ClickToShowPopup_Clicked(object sender, EventArgs e)
    {
        popup.Show();
    }
}

Blurred background

The SfPopup allows blurring of the background using the OverlayMode and BlurIntensity properties respectively.

NOTE

OverlayMode="Blur" is supported only on Android, iOS, Mac Catalyst, and Windows. On unsupported platforms, the overlay falls back to the default solid OverlayColor and no blur is rendered.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GettingStarted.MainPage"
             xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup">
    <StackLayout x:Name="layout">
        <Image Source="Blurred_Background.png" Aspect="Fill" >
             <Image.GestureRecognizers>
                 <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
             </Image.GestureRecognizers>
        </Image>
        <sfPopup:SfPopup x:Name="popup" 
                        OverlayMode="Blur" 
                        ShowCloseButton="True">
            <sfPopup:SfPopup.PopupStyle>
                <sfPopup:PopupStyle BlurIntensity="ExtraDark" />
            </sfPopup:SfPopup.PopupStyle>
        </sfPopup:SfPopup>
   </StackLayout>
</ContentPage>

C#

using Syncfusion.Maui.Popup;
namespace GettingStarted
{
    public partial class MainPage : ContentPage
    {
        SfPopup popup;
        public MainPage()
        {
            InitializeComponent();
            popup = new SfPopup();
            popup.ShowCloseButton = true;
            popup.OverlayMode = Syncfusion.Maui.Popup.PopupOverlayMode.Blur;
            popup.PopupStyle.BlurIntensity = Syncfusion.Maui.Popup.PopupBlurIntensity.ExtraDark;
            var layout = new StackLayout();
            var image = new Image() { Source = "Blurred_Background.png", Aspect = Aspect.Fill };
            TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer();
            tapGestureRecognizer.Tapped += TapGestureRecognizer_Tapped;
            image.GestureRecognizers.Add(tapGestureRecognizer);
            layout.Children.Add(image);
            Content = layout;
        }

        private void TapGestureRecognizer_Tapped(object sender, System.EventArgs e)
        {
            popup.Show();
        }
    }
}

Set custom blur intensity

The SfPopup allows customization of the blur effect by setting the BlurIntensity property to Custom and the BlurRadius, which adjusts the blur effect according to the specified value.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="GettingStarted.MainPage"
             xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup">
    <StackLayout x:Name="layout">
        <Image Source="Blurred_Background.png" Aspect="Fill" >
             <Image.GestureRecognizers>
                 <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
             </Image.GestureRecognizers>
        </Image>
        <sfPopup:SfPopup x:Name="popup" 
                        OverlayMode="Blur" 
                        ShowCloseButton="True">
            <sfPopup:SfPopup.PopupStyle>
                <sfPopup:PopupStyle BlurIntensity="Custom"
                                    BlurRadius="3" />
            </sfPopup:SfPopup.PopupStyle>
        </sfPopup:SfPopup>
   </StackLayout>
</ContentPage>

C#

using Syncfusion.Maui.Popup;
namespace GettingStarted
{
    public partial class MainPage : ContentPage
    {
        SfPopup popup;
        public MainPage()
        {
            InitializeComponent();
            popup = new SfPopup();
            popup.OverlayMode = Syncfusion.Maui.Popup.PopupOverlayMode.Blur;
            popup.PopupStyle.BlurIntensity = Syncfusion.Maui.Popup.PopupBlurIntensity.Custom;
            popup.PopupStyle.BlurRadius = 3;
            var layout = new StackLayout();
            var image = new Image() { Source = "Blurred_Background.png", Aspect = Aspect.Fill };
            TapGestureRecognizer tapGestureRecognizer = new TapGestureRecognizer();
            tapGestureRecognizer.Tapped += TapGestureRecognizer_Tapped;
            image.GestureRecognizers.Add(tapGestureRecognizer);
            layout.Children.Add(image);
            Content = layout;
        }

        private void TapGestureRecognizer_Tapped(object sender, System.EventArgs e)
        {
            popup.Show();
        }
    }
}

Changing the close button icon

You can change the close button icon of the SfPopup; see the following code example.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PopupDemo"
             xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"
             x:Class="PopupDemo.MainPage">
    <StackLayout>
        <Button x:Name="clickToShowPopup"
                Text="ClickToShowPopup"
                VerticalOptions="Start"
                HorizontalOptions="Center"
                Clicked="ClickToShowPopup_Clicked" />
        <sfPopup:SfPopup x:Name="popup"
                         ShowCloseButton="True">
            <sfPopup:SfPopup.PopupStyle>
                <sfPopup:PopupStyle CloseButtonIcon="closeicon.png" />
            </sfPopup:SfPopup.PopupStyle>
        </sfPopup:SfPopup>
    </StackLayout>
</ContentPage>

C#

using Syncfusion.Maui.Popup;

public partial class MainPage : ContentPage
{
    SfPopup popup;
    public MainPage()
    {
        InitializeComponent();
        popup = new SfPopup();
        popup.ShowCloseButton = true;
        popup.PopupStyle.CloseButtonIcon = "closeicon.png";
    }

    private void ClickToShowPopup_Clicked(object sender, EventArgs e)
    {
        popup.Show();
    }
}

Setting shadow

The SfPopup allows you to add a shadow effect to the popup. Refer to the code example below.

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:PopupDemo"
             xmlns:sfPopup="clr-namespace:Syncfusion.Maui.Popup;assembly=Syncfusion.Maui.Popup"
             x:Class="PopupDemo.MainPage">
    <StackLayout>
        <Button x:Name="clickToShowPopup"
                Text="ClickToShowPopup"
                VerticalOptions="Start"
                HorizontalOptions="Center"
                Clicked="ClickToShowPopup_Clicked" />
        <sfPopup:SfPopup x:Name="popup">
            <sfPopup:SfPopup.PopupStyle>
                <sfPopup:PopupStyle HasShadow="True" />
            </sfPopup:SfPopup.PopupStyle>
        </sfPopup:SfPopup>
    </StackLayout>
</ContentPage>

C#

using Syncfusion.Maui.Popup;

public partial class MainPage : ContentPage
{
    SfPopup popup;
    public MainPage()
    {
        InitializeComponent();
        popup = new SfPopup();
        popup.PopupStyle.HasShadow = true;
    }

    private void ClickToShowPopup_Clicked(object sender, EventArgs e)
    {
        popup.Show();
    }
}

Limitations

The SfPopup control does not support dynamic style changes while it is open. Any modifications to style properties must be applied before the popup is displayed. If you need to change style properties at runtime, you will need to close the popup, apply the changes, and then reopen it for the updates to take effect.