Layout Customizations

The SfPopupLayout supports two types of SfPopupLayout.PopupView.AppearanceMode. By default, the AppearanceMode.OneButton is set. You can change the appearance of the SfPopupLayout by using the SfPopupLayout.PopupView.AppearanceMode property.

Two different appearance modes in the SfPopupLayout are as follows.

Modes Description

OneButton

Shows the SfPopupLayout with one button in the footer view. This is the default value.

TwoButton

Shows the SfPopupLayout with two buttons in the footer view.

In the following code example, the SfPopupLayout.PopupView.AppearanceMode property is set as OneButton which displays only the Accept button in the footer view.

  • c#
  • using Syncfusion.iOS.PopupLayout;
    
    namespace GettingStarted
    {
        public class MyViewController:UIViewController
        {
            SfPopupLayout popupLayout;
            CustomView customView;
            UIButton showPopupButton;
    
            public MyViewController()
            {
                popupLayout = new SfPopupLayout();
                popupLayout.Content = GetContentOfPopup();
    
                //Setting the AppearanceMode as OneButton
                popupLayout.PopupView.AppearanceMode = AppearanceMode.OneButton;
    
                this.View.AddSubview(popupLayout);
            }
            private UIView GetContentOfPopup()
            {
                customView = new CustomView();
                customView.BackgroundColor = UIColor.White;
    
                showPopupButton = new UIButton();
                showPopupButton.SetTitle("Click to show Popup", UIControlState.Normal);
                showPopupButton.SetTitleColor(UIColor.White, UIControlState.Normal);
                showPopupButton.BackgroundColor = UIColor.Gray;
                showPopupButton.TouchDown += ShowPopupButton_TouchDown;
    
                customView.AddSubview(showPopupButton);
                return customView;
            }
            private void ShowPopupButton_TouchDown(object sender, EventArgs e)
            {
                popupLayout.Show();
            }
            public override void ViewDidLayoutSubviews()
            {
                base.ViewDidLayoutSubviews();
                popupLayout.Frame = new CGRect(0, 20, this.View.Frame.Width, this.View.Frame.Height - 20);
            }
        }
    }

    Executing the above codes renders the following output in an iOS device.

    In the following code example, the SfPopupLayout.PopupView.AppearanceMode property is set as TwoButton which displays both Accept button and Decline button in the footer view.

  • c#
  • using Syncfusion.iOS.PopupLayout;
    
    namespace GettingStarted
    {
        public class MyViewController:UIViewController
        {
            SfPopupLayout popupLayout;
            CustomView customView;
            UIButton showPopupButton;
    
            public MyViewController()
            {
                popupLayout = new SfPopupLayout();
                popupLayout.Content = GetContentOfPopup();
    
                //Setting the AppearanceMode as TwoButton
                popupLayout.PopupView.AppearanceMode = AppearanceMode.TwoButton;
    
                this.View.AddSubview(popupLayout);
            }
            private UIView GetContentOfPopup()
            {
                customView = new CustomView();
                customView.BackgroundColor = UIColor.White;
    
                showPopupButton = new UIButton();
                showPopupButton.SetTitle("Click to show Popup", UIControlState.Normal);
                showPopupButton.SetTitleColor(UIColor.White, UIControlState.Normal);
                showPopupButton.BackgroundColor = UIColor.Gray;
                showPopupButton.TouchDown += ShowPopupButton_TouchDown;
    
                customView.AddSubview(showPopupButton);
                return customView;
            }
            private void ShowPopupButton_TouchDown(object sender, EventArgs e)
            {
                popupLayout.Show();
            }
            public override void ViewDidLayoutSubviews()
            {
                base.ViewDidLayoutSubviews();
                popupLayout.Frame = new CGRect(0, 20, this.View.Frame.Width, this.View.Frame.Height - 20);
            }
        }
    }

    Executing the above codes renders the following output in an iOS device.

    Customizing pop-up layouts

    You can customize the entire view of the pop-up by loading the templates or custom views for the header, body, and footer.

    Header customization

    Any view can be added as the header content using the SfPopupLayout.PopupView.HeaderView property to refresh it. Refer to the following code example in which a UILabel is added as a header content.

  • c#
  • using Syncfusion.iOS.PopupLayout;
    
    namespace GettingStarted
    {
        public class MyViewController:UIViewController
        {
            SfPopupLayout popupLayout;
            CustomView customView;
            UIButton showPopupButton;
            UILabel headerContent;
    
            public MyViewController()
            {
                popupLayout = new SfPopupLayout();
                popupLayout.Content = GetContentOfPopup();
    
                headerContent = new UILabel();
                headerContent.Text = "Customized Header";
                headerContent.TextAlignment = UITextAlignment.Center;
                headerContent.BackgroundColor = UIColor.Blue;
                headerContent.Font = UIFont.FromName("Helvetica-Bold", 16);
    
                // Adding Header view of the SfPopupLayout
                popupLayout.PopupView.HeaderView = headerContent;
                popupLayout.PopupView.ShowCloseButton = false;
                this.View.AddSubview(popupLayout);
            }
            private UIView GetContentOfPopup()
            {
                customView = new CustomView();
                customView.BackgroundColor = UIColor.White;
    
                showPopupButton = new UIButton();
                showPopupButton.SetTitle("Click to show Popup", UIControlState.Normal);
                showPopupButton.SetTitleColor(UIColor.White, UIControlState.Normal);
                showPopupButton.BackgroundColor = UIColor.Gray;
                showPopupButton.TouchDown += ShowPopupButton_TouchDown;
    
                customView.AddSubview(showPopupButton);
                return customView;
            }
            private void ShowPopupButton_TouchDown(object sender, EventArgs e)
            {
                popupLayout.Show();
            }
            public override void ViewDidLayoutSubviews()
            {
                base.ViewDidLayoutSubviews();
                popupLayout.Frame = new CGRect(0, 20, this.View.Frame.Width, this.View.Frame.Height - 20);
            }
        }
    }

    Executing the above codes renders the following output in an iOS device.

    Any view can be added as the footer content using the SfPopupLayout.PopupView.FooterView property to refresh it. Refer to the following code example in which a UILabel is added as a footer content.

  • c#
  • using Syncfusion.iOS.PopupLayout;
    
    namespace GettingStarted
    {
        public class MyViewController:UIViewController
        {
            SfPopupLayout popupLayout;
            CustomView customView;
            UIButton showPopupButton;
            UILabel footerContent;
    
            public MyViewController()
            {
                popupLayout = new SfPopupLayout();
                popupLayout.Content = GetContentOfPopup();
    
                footerContent = new UILabel();
                footerContent.Text = "Customized Footer";
                footerContent.TextAlignment = UITextAlignment.Center;
                footerContent.BackgroundColor = UIColor.Blue;
                footerContent.Font = UIFont.FromName("Helvetica-Bold", 16);
               
                // Adding Footer view of the SfPopupLayout
                popupLayout.PopupView.FooterView = footerContent;
    
                this.View.AddSubview(popupLayout);
            }
            private UIView GetContentOfPopup()
            {
                customView = new CustomView();
                customView.BackgroundColor = UIColor.White;
    
                showPopupButton = new UIButton();
                showPopupButton.SetTitle("Click to show Popup", UIControlState.Normal);
                showPopupButton.SetTitleColor(UIColor.White, UIControlState.Normal);
                showPopupButton.BackgroundColor = UIColor.Gray;
                showPopupButton.TouchDown += ShowPopupButton_TouchDown;
    
                customView.AddSubview(showPopupButton);
                return customView;
            }
            private void ShowPopupButton_TouchDown(object sender, EventArgs e)
            {
                popupLayout.Show();
            }
            public override void ViewDidLayoutSubviews()
            {
                base.ViewDidLayoutSubviews();
                popupLayout.Frame = new CGRect(0, 20, this.View.Frame.Width, this.View.Frame.Height - 20);
            }
        }
    }

    Executing the above codes renders the following output in an iOS device.

    Styles

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

    Customizing header elements

    The SfPopupLayout allows customizing the header elements with various available header customizations.

    Property Description

    SfPopupLayout.PopupView.PopupStyle.HeaderBackgroundColor

    Gets or sets the background color for the header.

    SfPopupLayout.PopupView.PopupStyle.HeaderFont

    Gets or sets the font style for the header title.

    SfPopupLayout.PopupView.PopupStyle.HeaderFontSize

    Gets or sets the font size for the header title.

    SfPopupLayout.PopupView.PopupStyle.HeaderTextAlignment

    Gets or sets the text alignment for the header.

    SfPopupLayout.PopupView.PopupStyle.HeaderTextColor

    Gets or sets the text color for the header title.

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

  • c#
  • //MyViewController.cs
    
    public MyViewController()
    {
        ....
        popupLayout = new SfPopupLayout();
        popupLayout.Content = GetContentOfPopup();
        popupLayout.PopupView.PopupStyle.HeaderBackgroundColor = UIColor.FromRGB(105, 105, 105);
        popupLayout.PopupView.PopupStyle.HeaderFont = "Helvetica-Bold";
        popupLayout.PopupView.PopupStyle.HeaderFontSize = 25;
        popupLayout.PopupView.PopupStyle.HeaderTextAlignment = UITextAlignment.Center;
        popupLayout.PopupView.PopupStyle.HeaderTextColor = UIColor.White;
        this.View.AddSubview(popupLayout);
        ....
    }

    Executing the above codes renders the following output in an iOS device.

    The SfPopupLayout allows customizing the footer elements with various available footer customizations.

    Property Description

    SfPopupLayout.PopupView.PopupStyle.FooterBackgroundColor

    Gets or sets the background color for the footer.

    SfPopupLayout.PopupView.PopupStyle.AcceptButtonBackgroundColor

    Gets or sets the background color for the Accept button in the footer.

    SfPopupLayout.PopupView.PopupStyle.AcceptButtonTextColor

    Gets or sets the foreground color for the Accept button in the footer.

    SfPopupLayout.PopupView.PopupStyle.DeclineButtonBackgroundColor

    Gets or sets the background color for the Decline button in the footer.

    SfPopupLayout.PopupView.PopupStyle.DeclineButtonTextColor

    Gets or sets the foreground color for the Decline button in the footer.

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

  • c#
  • //MyViewController.cs
    
    public MyViewController()
    {
        ....
        popupLayout = new SfPopupLayout();
        popupLayout.Content = GetContentOfPopup();
        popupLayout.PopupView.PopupStyle.FooterBackgroundColor = UIColor.LightGray;
        popupLayout.PopupView.PopupStyle.AcceptButtonBackgroundColor = UIColor.FromRGB(105, 105, 105);
        popupLayout.PopupView.PopupStyle.AcceptButtonTextColor = UIColor.White;
        popupLayout.PopupView.PopupStyle.DeclineButtonBackgroundColor = UIColor.FromRGB(105, 105, 105);
        popupLayout.PopupView.PopupStyle.DeclineButtonTextColor = UIColor.White;
        this.View.AddSubview(popupLayout);
        ....
    }

    Executing the above codes renders the following output in an iOS device.

    Border customization

    The SfPopupLayout allows customizing the border appearance with various available border customizations.

    Property Description

    SfPopupLayout.PopupView.PopupStyle.BorderColor

    Gets or sets the border color for the PopupView.

    SfPopupLayout.PopupView.PopupStyle.BorderThickness

    Gets or sets the border thickness for the PopupView.

    SfPopupLayout.PopupView.PopupStyle.CornerRadius

    Gets or sets the corner radius for the PopupView.

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

  • c#
  • //MyViewController.cs
    
    public MyViewController()
    {
        ....
        popupLayout = new SfPopupLayout();
        popupLayout.Content = GetContentOfPopup();
        popupLayout.PopupView.PopupStyle.BorderColor = UIColor.Blue;
        popupLayout.PopupView.PopupStyle.BorderThickness = 3;
        popupLayout.PopupView.PopupStyle.CornerRadius = 5;
        this.View.AddSubview(popupLayout);
        ....
    }

    Executing the above codes renders the following output in an iOS device.