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

Height Problem When Creating Popup


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)


3 Replies

SP Subburaj Pandian Veluchamy Syncfusion Team 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 

CH Chris 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.

SP Subburaj Pandian Veluchamy Syncfusion Team 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  

Live Chat Icon For mobile
Up arrow icon