We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Height Problem When Creating Popup

Thread ID:





143473 Mar 21,2019 11:58 AM UTC Mar 25,2019 07:13 AM UTC Xamarin.Forms 3
Tags: SfPopup
Asked On March 21, 2019 11:58 AM UTC


I'm currently trying to write in C# a control which inherits from a stacklayout, and shows an entry and a button control. Clicking on the button control will show a popup with 4 sliders. The code is below.

I have 2 issues here, the first issue is that the first time I click the button, the popup control will appear without issue, subsequent clicks will crash out the application. My next and most pressing concern is that despite everything I've checked I cannot change the height of the popup to fit all my controls. Here is a screenshot of how it currently looks.

using Syncfusion.XForms.PopupLayout;
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;

namespace BootCom.XamForms.Core.Controls
    public class ColourEntry : StackLayout  

        public static readonly BindableProperty ColourProperty = BindableProperty.Create("Colour", typeof(Color), typeof(Color));

        public SfPopupLayout ColourPopup { get; internal set; }

        public Entry ValueEntry { get; internal set; }

        public Button ValueButton { get; internal set; }

        public ColourEntry() 
            this.Orientation = StackOrientation.Horizontal;

            ValueEntry = new Entry();
            ValueButton = new Button() { Text = "Select" };


            ValueButton.Clicked += ValueButton_Clicked;

            // Configure the page ...
            ColourPopup = new SfPopupLayout();
            ColourPopup.PopupView.HeaderTitle = "Select Colour";

            var ColourPopupContent = new Grid();
            ColourPopupContent.RowDefinitions.Add(new RowDefinition { Height = 40 });
            ColourPopupContent.RowDefinitions.Add(new RowDefinition { Height = 40 });
            ColourPopupContent.RowDefinitions.Add(new RowDefinition { Height = 40 });
            ColourPopupContent.RowDefinitions.Add(new RowDefinition { Height = 40 });
            ColourPopupContent.RowDefinitions.Add(new RowDefinition { Height = 40 });

            ColourPopupContent.ColumnDefinitions.Add(new ColumnDefinition { Width = 100 });
            ColourPopupContent.ColumnDefinitions.Add(new ColumnDefinition());

            var LabelA = new Label { Text = "A" };
            var LabelR = new Label { Text = "R" };
            var LabelG = new Label { Text = "G" };
            var LabelB = new Label { Text = "B" };

            var Slider_ColA = new Slider();
            var Slider_ColR = new Slider();
            var Slider_ColG = new Slider();
            var Slider_ColB = new Slider();

            ColourPopupContent.Children.Add(LabelA, 0, 0);
            ColourPopupContent.Children.Add(Slider_ColA, 1, 0);
            ColourPopupContent.Children.Add(LabelR, 0, 1);
            ColourPopupContent.Children.Add(Slider_ColR, 1, 1);
            ColourPopupContent.Children.Add(LabelG, 0, 2);
            ColourPopupContent.Children.Add(Slider_ColG, 1, 2);
            ColourPopupContent.Children.Add(LabelB, 0, 3);
            ColourPopupContent.Children.Add(Slider_ColB, 1, 3);

            var datatemplate = new DataTemplate(() => ColourPopupContent);
            ColourPopup.PopupView.ContentTemplate = datatemplate;
           // ColourPopup.PopupView.HeightRequest = 600;

            ColourPopup.Opening += ColourPopup_Opening;
            ColourPopup.Closing += ColourPopup_Closing;


        private void ColourPopup_Opening(object sender, System.ComponentModel.CancelEventArgs e)

        private void ValueButton_Clicked(object sender, EventArgs e)
           // ColourPopup.StaysOpen = true;

        private void ColourPopup_Closing(object sender, System.ComponentModel.CancelEventArgs e)


Subburaj Pandian Veluchamy [Syncfusion]
Replied On March 22, 2019 12:09 PM UTC

Hi Chris, 
Thank you for contacting Syncfusion support. 
Query 1: Popupview should adjust its size based on popup view content size. 
Based on the desired content Template, Popup view will render within the default size. If you want to handle the content view size, you need to handle the Popup view height as well. You can also handle Header and Footer height using HeaderHeight and FooterHeight property of PopupView in popupLayout. 
Please refer the following code to define the popup view height based on our scenario, 
ColourPopup.PopupView.HeightRequest = ColourPopupContent.RowDefinitions.Count * 40 + 
    ColourPopup.PopupView.HeaderHeight + ColourPopup.PopupView.FooterHeight; 
Query 2: Application is crashed when we open second time. 
We have already found this bug and included the issue fix in 2019 volume 1 Betta release we have also attached the tested sample for your reference. 
If the sample doesn’t meet your requirement, please modify the sample based on your scenario and revert us back with more details. It will be helpful for us to check on it and provide you the solution at the earliest.   
Subburaj Pandian V 

Replied On March 24, 2019 06:59 PM UTC


This works extremely well. I've found what I think is another issue but that's potentially for another ticket.

Thanks for your help on this issue.

Subburaj Pandian Veluchamy [Syncfusion]
Replied On March 25, 2019 07:13 AM UTC

Hi Chris,  
Thank you for the update. We are happy that the given solution meets your requirement. 
Please get in touch with us if you would require any further assistance. 
Subburaj Pandian V  


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon