.net MAUI Community Toolkit popup different layout behavior than page

Question

I'm dealing with popups from .net MAUI Community Toolkit. I'm currently displaying my custom controls in popups. However, I noticed a layout difference in my controls when they are displayed on a page or in a popup. When my controls are displayed in a popup, their element's width will automatically stretch out to fill all the available space (which I do not want, and they are not doing this when displayed on a page).

For example, here are the two renders I got when I displayed the same control on a page and in a popup (notice the Show a popup button width difference)

In page	In popup

As I use the same control, I expect the render to be the same.

My question is why does my control render differently if it's displayed on a page or in a popup?, and how to avoid that Layout behavior difference?

Here is the example code:

Control definition

namespace Medali.Views.Components
{
    public partial class TestComponent : ContentView
    {
        public TestComponent()
        {
            InitializeComponent();
        }
    }
}

Popup definition

using CommunityToolkit.Maui.Views;
using CommunityToolkit.Mvvm.Input;
using Medali.ViewModels.Components;

namespace Medali.Views.Components
{
    public partial class ComponentPopup: Popup
    {
        public ComponentPopup(int width, int height, Color backgroundColor)
        {
            InitializeComponent();
            Size = new Size(width, height);
            mainFrame.BackgroundColor = backgroundColor;
        }

        public T setComponent() where T : ContentView, new()
        {
            mainFrame.Content = new T();
            return (T)mainFrame.Content;
        }
    }
}

Page definition

Button control definition:

using CommunityToolkit.Mvvm.Input;
using Medali.Services;
using Medali.ViewModels.Components;

namespace Medali.Views.Components
{
    public partial class ButtonComponent : ContentView
    {
        private readonly ButtonComponentViewModel vm;

        public ButtonComponent()
        {
            InitializeComponent();
            vm = new() { paddingStyle = NoI, fillStyle = NoFillC, MainColor = ColorHelper.GetColor("DarkBlue") };
            updateColors();
            Loaded += (s, e) =>
            {
                contentContainer.Style = vm.paddingStyle;
                btnContainer.Style = vm.fillStyle;
            };
        }

        public static BindableProperty TypeProperty = BindableProperty.Create(
            nameof(Type),
            typeof(string),
            typeof(ButtonComponent),
            propertyChanged: (bindable, oldValue, newValue) =>
            {
                var control = (ButtonComponent)bindable;

                switch (newValue as string)
                {
                    case "Secondary":
                        control.vm.MainColor = ColorHelper.GetColor("Blue");
                        break;
                    case "Confirm":
                        control.vm.MainColor = ColorHelper.GetColor("Green");
                        break;
                    case "Danger":
                        control.vm.MainColor = ColorHelper.GetColor("Red");
                        break;
                    case "Primary":
                    default:
                        control.vm.MainColor = ColorHelper.GetColor("DarkBlue");
                        break;
                }
                control.updateColors();
            }
        );
        public string Type
        {
            get => (string)GetValue(TypeProperty);
            set => SetValue(TypeProperty, value);
        }

        public static BindableProperty ImageLeftProperty = BindableProperty.Create(
            nameof(ImageLeft),
            typeof(string),
            typeof(ButtonComponent),
            propertyChanged: (bindable, oldValue, newValue) =>
            {
                var control = (ButtonComponent)bindable;
                control.IconLeft.Source = newValue as string;
                control.IconLeft.IsVisible = true;
                if (control.ImageRight is null)
                {
                    control.vm.paddingStyle = control.ILeft;
                } else
                {
                    control.vm.paddingStyle = control.ILeftRight;
                }
            }
        );
        public string ImageLeft
        {
            get => (string)GetValue(ImageLeftProperty);
            set => SetValue(ImageLeftProperty, value);
        }

        public static BindableProperty ImageRightProperty = BindableProperty.Create(
            nameof(ImageRight),
            typeof(string),
            typeof(ButtonComponent),
            propertyChanged: (bindable, oldValue, newValue) =>
            {
                var control = (ButtonComponent)bindable;
                control.IconRight.Source = newValue as string;
                control.IconRight.IsVisible = true;
                if (control.ImageLeft is null)
                {
                    control.vm.paddingStyle = control.IRight;
                } else
                {
                    control.vm.paddingStyle = control.ILeftRight;
                }
            }
        );
        public string ImageRight
        {
            get => (string)GetValue(ImageRightProperty);
            set => SetValue(ImageRightProperty, value);
        }

        public static BindableProperty FillContainerProperty = BindableProperty.Create(
            nameof(FillContainer),
            typeof(bool),
            typeof(ButtonComponent),
            defaultValue: false,
            propertyChanged: (bindable, oldValue, newValue) =>
            {
                var control = (ButtonComponent)bindable;
                control.vm.fillStyle = ((bool)newValue ? control.FillC : control.NoFillC);
            }
        );
        public bool FillContainer
        {
            get => (bool)GetValue(FillContainerProperty);
            set => SetValue(FillContainerProperty, value);
        }

        public static BindableProperty TextProperty = BindableProperty.Create(
            nameof(Text),
            typeof(string),
            typeof(ButtonComponent),
            propertyChanged: (bindable, oldValue, newValue) =>
            {
                var control = (ButtonComponent)bindable;

                control.lbl.Text = newValue as string;
            }
        );
        public string Text
        {
            get => (string)GetValue(TextProperty);
            set => SetValue(TextProperty, value);
        }

        public static BindableProperty BgColorProperty = BindableProperty.Create(
            nameof(BgColor),
            typeof(Color),
            typeof(ButtonComponent),
            propertyChanged: (bindable, oldValue, newValue) =>
            {
                var control = (ButtonComponent)bindable;
                if (newValue as Color is not null)
                {
                    control.vm.MainColor = (Color)newValue;
                }
                control.updateColors();
            }
        );
        public Color BgColor
        {
            get => (Color)GetValue(BgColorProperty);
            set => SetValue(BgColorProperty, value);
        }

        public static BindableProperty IsDisableProperty = BindableProperty.Create(
            nameof(IsDisable),
            typeof(bool),
            typeof(ButtonComponent),
            defaultValue: false,
            propertyChanged: (bindable, oldValue, newValue) =>
            {
                var control = (ButtonComponent)bindable;

                control.vm.isDisable = (bool)newValue;
                control.updateColors();
            }
        );
        public bool IsDisable
        {
            get => (bool)GetValue(IsDisableProperty);
            set => SetValue(IsDisableProperty, value);
        }

        public static BindableProperty AsyncActionCommandProperty = BindableProperty.Create(
            nameof(AsyncActionCommand),
            typeof(AsyncRelayCommand),
            typeof(ButtonComponent),
            null
        );
        public AsyncRelayCommand AsyncActionCommand
        {
            get => (AsyncRelayCommand)GetValue(AsyncActionCommandProperty);
            set => SetValue(AsyncActionCommandProperty, value);
        }

        public static BindableProperty ActionCommandProperty = BindableProperty.Create(
            nameof(ActionCommand),
            typeof(RelayCommand),
            typeof(ButtonComponent),
            null
        );
        public RelayCommand ActionCommand
        {
            get => (RelayCommand)GetValue(ActionCommandProperty);
            set => SetValue(ActionCommandProperty, value);
        }

        void setNewTintColor(Color color)
        {
            lbl.TextColor = color;
            IconLeftColor.TintColor = color;
            IconRightColor.TintColor = color;
        }
        void setNewBackgroundColor(Color color)
        {
            btnContainer.BackgroundColor = color;
        }
        void updateColors()
        {
            setNewTintColor(vm.GetTintColor());
            setNewBackgroundColor(vm.GetBackgroundColor());
        }

        void OnPointerEntered(object sender, PointerEventArgs e)
        {
            vm.isHover = true;
            updateColors();
        }

        void OnPointerExited(object sender, PointerEventArgs e)
        {
            vm.isHover = false;
            updateColors();
        }

        void OnTapGestureRecognizerTapped(object sender, TappedEventArgs args)
        {
            if (!IsDisable)
            {
                ActionCommand?.Execute(null);
                AsyncActionCommand?.Execute(null);
            }
        }
    }
}

.net MAUI Community Toolkit popup different layout behavior than page

Answers (1)

Related Questions