MAUI .NET 8 on iOS -System.ArgumentException: NaN is not a valid value for width

Aneetha 25

I have created a new MAUI .NET 8 project and migrated the Xamarin forms project code. When tried to run the project with the iOS simulator, which threw the exception below,

System.ArgumentException: NaN is not a valid value for width

at Microsoft.Maui.Graphics.Size..ctor(Double width, Double height)

at Microsoft.Maui.ViewHandlerExtensions.GetDesiredSizeFromHandler(IViewHandler viewHandler, Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Handlers.ViewHandler`2[[Microsoft.Maui.IView, Microsoft.Maui, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[UIKit.UIView, Microsoft.iOS, Version=17.0.0.0, Culture=neutral, PublicKeyToken=84e04ff9cfb79065]].GetDesiredSize(Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Layouts.LayoutExtensions.ComputeDesiredSize(IView view, Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Controls.VisualElement.MeasureOverride(Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Controls.VisualElement.Microsoft.Maui.IView.Measure(Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Layouts.VerticalStackLayoutManager.Measure(Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Controls.StackLayoutManager.Measure(Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Controls.Layout.CrossPlatformMeasure(Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Platform.MauiView.CrossPlatformMeasure(Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Platform.MauiView.SizeThatFits(CGSize size)

at Microsoft.Maui.ViewHandlerExtensions.GetDesiredSizeFromHandler(IViewHandler viewHandler, Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Handlers.ViewHandler`2[[Microsoft.Maui.ILayout, Microsoft.Maui, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[Microsoft.Maui.Platform.LayoutView, Microsoft.Maui, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].GetDesiredSize(Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Layouts.LayoutExtensions.ComputeDesiredSize(IView view, Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Controls.VisualElement.MeasureOverride(Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Controls.VisualElement.Microsoft.Maui.IView.Measure(Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Layouts.LayoutExtensions.MeasureContent(IContentView contentView, Thickness inset, Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Layouts.LayoutExtensions.MeasureContent(IContentView contentView, Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Controls.ContentPage.Microsoft.Maui.ICrossPlatformLayout.CrossPlatformMeasure(Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Platform.MauiView.CrossPlatformMeasure(Double widthConstraint, Double heightConstraint)

at Microsoft.Maui.Platform.MauiView.LayoutSubviews()

at Microsoft.Maui.Platform.ContentView.LayoutSubviews()

at UIKit.UIApplication.UIApplicationMain(Int32 argc, String[] argv, IntPtr principalClassName, IntPtr delegateClassName) in /Users/builder/azdo/_work/1/s/xamarin-macios/src/UIKit/UIApplication.cs:line 58

at UIKit.UIApplication.Main(String[] args, Type principalClass, Type delegateClass) in /Users/builder/azdo/_work/1/s/xamarin-macios/src/UIKit/UIApplication.cs:line 94

at SKM_MOBILE.Program.Main(String[] args) in /Users/macmini3/Documents/MAUI/SKM_MOBILE/SKM_MOBILE/Platforms/iOS/Program.cs:line 13

In my Xamarin project, I used the CustomRender, I just wanted to use the same code in the converted MAUI project, so I added the below code in the MauiProgram.cs file as per this https://video2.skills-academy.com/en-gb/dotnet/maui/migration/custom-renderers?view=net-maui-8.0 documentation,

handlers.AddCompatibilityRenderer(typeof(CustomButton), typeof(SKM_MOBILE.iOS.Renderers.ButtonRenderer_IOS));

public class ButtonRenderer_IOS : Microsoft.Maui.Controls.Compatibility.Platform.iOS.ButtonRenderer
{
    bool IsCalledForFirstTime = false;
    protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
    {
        base.OnElementChanged(e);
        if (Control != null)
        {
            Control.TitleLabel.LineBreakMode = UILineBreakMode.WordWrap;
            Control.TitleLabel.TextAlignment = UITextAlignment.Center;
            if (!IsCalledForFirstTime)
            {
                IsCalledForFirstTime = true;
                Control.TouchDown += Control_TouchDown;
                Control.TouchUpInside += Control_TouchUp;
                Control.TouchDragExit += Control_TouchDragExit;
            }
        }

    }

public CustomButton(ButtonStyle buttonType = ButtonStyle.SystemSpecific)
{
    this.buttonStyle = buttonType;
    switch (buttonType)
    {
        case ButtonStyle.Default:
        {
            BackgroundColor = Colors.Gray;
            CornerRadius = 5;
            TextColor = Colors.White;
        }
            break;
        case ButtonStyle.LongTextButton:
        {
            BackgroundColor = Colors.Transparent;
            TextColor = ApplicationButtonBGnTxtColor;
            HorizontalOptions = LayoutOptions.Center;
            BorderColor = ApplicationButtonBGnTxtColor;
            BorderWidth = 2;
            CornerRadius = 5;
            FontSize = 15;
            FontAttributes = FontAttributes.Bold;
            Pressed += OnPressed;
            Released += OnReleased;
            SetAllCaps = false;
            Padding = new Thickness(4, 0, 4, 0);
            HeightRequest = 40;

        }
            break;

Did I miss anything? How do I resolve this issue?

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 28,631 Reputation points Microsoft Vendor

2024-07-03T06:54:28.4233333+00:00

CustomButton is your MAUI control, right? What's the ButtonStyle? Is it a bindable property of your CustomButton?

Also, it's not clear how you consume the control on the page. Would you mind sharing more code snippets about the CustomButton class and the Xml about how to consume it?

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 28,631 Microsoft Vendor

I remove the ButtonStyle and test on my side, it works. I cannot reproduce your issue.

MAUI control

public class CustomButton: Button { 
public CustomButton()
{
                 BackgroundColor = Colors.Transparent;
                 TextColor = Colors.Yellow;
                 HorizontalOptions = LayoutOptions.Center;
                 BorderColor = Colors.Blue;
                 BorderWidth = 2;
                 CornerRadius = 5;
                 FontSize = 15;
                 FontAttributes = FontAttributes.Bold;
                 Padding = new Thickness(4, 0, 4, 0);
                 HeightRequest = 40;
 
}
}

custom renderer on iOS

#if IOS
    public class ButtonRenderer_IOS : Microsoft.Maui.Controls.Compatibility.Platform.iOS.ButtonRenderer
    {
        bool IsCalledForFirstTime = false;
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.TitleLabel.LineBreakMode = UILineBreakMode.WordWrap;
                Control.TitleLabel.TextAlignment = UITextAlignment.Center;
                if (!IsCalledForFirstTime)
                {
                    IsCalledForFirstTime = true;
 
                }
            }
        }    
    }
#endif

Register Handler

.UseMauiCompatibility()
                .ConfigureMauiHandlers((handlers) =>
                            {
#if IOS
                             handlers.AddCompatibilityRenderer(typeof(CustomButton), typeof(ButtonRenderer_IOS));
#endif
                            });

Consume the control on a Page, and tested on iOS simulator, the text color changed

<local:CustomButton Text="CustomButtonCustomButtonCustomButton"></local:CustomButton>

Aneetha 25

Thank you for your effort... But I have an issue when I run the project, the OnElementChanged method is invoked in ButtonRenderer_IOS.cs,

protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
    base.OnElementChanged(e);
    if (Control != null)
    {
        Control.TitleLabel.LineBreakMode = UILineBreakMode.WordWrap;
        Control.TitleLabel.TextAlignment = UITextAlignment.Center;
        if (!IsCalledForFirstTime)
        {
            IsCalledForFirstTime = true;
            Control.TouchDown += Control_TouchDown;
            Control.TouchUpInside += Control_TouchUp;
            Control.TouchDragExit += Control_TouchDragExit;
        }
    }

}

then, immediately I got an exception, from

namespace Microsoft.Maui.Graphics
{
    [DebuggerDisplay("Width={Width}, Height={Height}")]
    [TypeConverter(typeof(Converters.SizeTypeConverter))]
    public partial struct Size
    {

Screenshot 2024-07-03 at 12.52.51 PM

Could you please help me to resolve this issue?

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 28,631 Reputation points Microsoft Vendor

2024-07-03T09:36:36.4766667+00:00

From the code snippets, it's hard to trouble shooting. Would you mind sharing more code snippets about the CustomButton class and the Xml about how to consume it?

Aneetha 25

Please find the code below,

namespace SKM_MOBILE.UI.CustomControls;

   public enum ButtonStyle
    {
        Default,
        SystemSpecific,
        Label,
        PopupButton,
        ApplicationButton,
        CmdEditorButton,
        OnelineButton,
        LongTextButton,
        SubscriptionButton
    }

    public enum TextAlign
    {
        None,
        Start,
        Center,
        End
    }

    public class CustomButton : Button
    {
        public event EventHandler Pressed;
        public event EventHandler Released;
        public event EventHandler Clicked;

        public bool SetAllCaps { get; set; } = true; // Default behaiver of android
        public TextAlign HorizontalTextAlignment { get; set; } = TextAlign.None;

        public ButtonStyle buttonStyle { get; set; }

        public CustomButton(ButtonStyle buttonType = ButtonStyle.SystemSpecific)
        {
            this.buttonStyle = buttonType;
            switch (buttonType)
            {
                case ButtonStyle.Default:
                {
                    BackgroundColor = Colors.Gray;
                    CornerRadius = 5;
                    TextColor = Colors.White;
                }
                    break;
                case ButtonStyle.LongTextButton:
                {
                    BackgroundColor = Colors.Transparent;
                    TextColor = ApplicationButtonBGnTxtColor;
                    HorizontalOptions = LayoutOptions.Center;
                    BorderColor = ApplicationButtonBGnTxtColor;
                    BorderWidth = 2;
                    CornerRadius = 5;
                    FontSize = 15;
                    FontAttributes = FontAttributes.Bold;
                    Pressed += OnPressed;
                    Released += OnReleased;
                    SetAllCaps = false;
                    Padding = new Thickness(4, 0, 4, 0);
                    HeightRequest = 40;

                }
                    break;
                case ButtonStyle.SubscriptionButton:
                {
                    BackgroundColor = ApplicationButtonBGnTxtColor;
                    TextColor = Colors.White;
                    HorizontalOptions = LayoutOptions.Center;
                    BorderColor = ApplicationButtonBGnTxtColor;
                    BorderWidth = 2;
                    CornerRadius = 5;
                    FontSize = 20;
                    FontAttributes = FontAttributes.Bold;
                    Pressed += OnPressed;
                    Released += OnReleased;
                    SetAllCaps = false;
                    Padding = new Thickness(4, 0, 4, 0);
                    HeightRequest = 40;

                }
                    break;
                case ButtonStyle.Label:
                {
                    TextColor = Colors.Black;
                    BackgroundColor = Colors.Transparent;
                }
                    break;

                case ButtonStyle.ApplicationButton:
                {
                    BackgroundColor = Colors.Transparent;
                    TextColor = ApplicationButtonBGnTxtColor;
                    HorizontalOptions = LayoutOptions.Center;
                    BorderColor = ApplicationButtonBGnTxtColor;
                    BorderWidth = 2;
                    CornerRadius = 5;
                    FontAttributes = FontAttributes.Bold;
                    FontSize = 15;
                    Pressed += OnPressed;
                    Released += OnReleased;
                    SetAllCaps = false;
                    Padding = new Thickness(4, 0, 4, 0);
                    HeightRequest = 40;
                    WidthRequest = 90;

                }
                    break;
                case ButtonStyle.CmdEditorButton:
                {
                    BackgroundColor = Colors.Transparent;
                    TextColor = ApplicationButtonBGnTxtColor;
                    HorizontalOptions = LayoutOptions.Center;
                    BorderColor = ApplicationButtonBGnTxtColor;
                    BorderWidth = 2;
                    CornerRadius = 5;
                    FontSize = 15;
                    FontAttributes = FontAttributes.Bold;
                    Pressed += OnPressed;
                    Released += OnReleased;
                    SetAllCaps = false;
                    Padding = new Thickness(0, 2, 0, 2);
                    WidthRequest = 80;
                }
                    break;
                case ButtonStyle.OnelineButton:
                {
                    BorderWidth = 2;
                    BorderColor = Colors.White;
                    TextColor = Colors.White;
                    BackgroundColor = ApplicationButtonBGnTxtColor;
                    FontAttributes = FontAttributes.Bold;
                    SetAllCaps = false;
                }
                    break;
                default:

                    break;
            }
        }

        private void OnReleased(object? sender, EventArgs e)
        {
            if (Microsoft.Maui.Devices.DeviceInfo.Platform == DevicePlatform.Android)
            {
                BackgroundColor = Colors.Transparent;
                TextColor = ApplicationButtonBGnTxtColor;
            }
            else if (Microsoft.Maui.Devices.DeviceInfo.Platform == DevicePlatform.iOS)
            {
                //In ios we imlemented in ios button renderer why bcaz while press button button text opacity decrese in ios only,so we fix this issue on renderer.but in android it works fine.
            }
        }

        private void OnPressed(object? sender, EventArgs e)
        {
            if (DeviceInfo.Platform == DevicePlatform.Android)
            {
                BackgroundColor = ApplicationButtonBGnTxtColor;
                TextColor = Colors.White;
            }
            else if (DeviceInfo.Platform == DevicePlatform.iOS)
            {
                //In ios we imlemented in ios button renderer why bcaz while press button button text opacity decrese in ios only,so we fix this issue on renderer.but in android it works fine.
            }
        }


        public virtual void OnPressed()
        {
            Pressed?.Invoke(this, EventArgs.Empty);

        }


        public virtual void OnClicked()
        {
            Clicked?.Invoke(this, EventArgs.Empty);
        }

        public virtual void OnReleased()
        {
            Released?.Invoke(this, EventArgs.Empty);
        }

    }

//[assembly: Microsoft.Maui.Controls.Compatibility.ExportRenderer(typeof(CustomButton), typeof(ButtonRenderer_IOS))]
namespace SKM_MOBILE.iOS.Renderers
{

    public class ButtonRenderer_IOS : Microsoft.Maui.Controls.Compatibility.Platform.iOS.ButtonRenderer
    {
        bool IsCalledForFirstTime = false;
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                Control.TitleLabel.LineBreakMode = UILineBreakMode.WordWrap;
                Control.TitleLabel.TextAlignment = UITextAlignment.Center;
                if (!IsCalledForFirstTime)
                {
                    IsCalledForFirstTime = true;
                    Control.TouchDown += Control_TouchDown;
                    Control.TouchUpInside += Control_TouchUp;
                    Control.TouchDragExit += Control_TouchDragExit;
                }
            }

        }

        private void Control_TouchDragExit(object? sender, EventArgs e)
        {
            if (this.Element != null)
            {
                CustomButton entry = OnReleaseStyle();
                entry?.OnReleased();
            }
        }

        private CustomButton OnReleaseStyle()
        {
            CustomButton entry = (CustomButton)this.Element;
            if (entry != null && Control != null && entry.buttonStyle == ButtonStyle.ApplicationButton)
            {
                Control.TitleLabel.TextColor = ApplicationButtonBGnTxtColor.ToUIColor();
                Control.TintColor = Colors.Transparent.ToUIColor();
                Control.BackgroundColor = Colors.Transparent.ToUIColor();
                Control.Selected = false;
            }
            if (entry != null && Control != null && entry.buttonStyle == ButtonStyle.SubscriptionButton)
            {
                Control.TitleLabel.TextColor = Colors.White.ToUIColor();
                Control.TintColor = Colors.White.ToUIColor();
                Control.BackgroundColor = ApplicationButtonBGnTxtColor.ToUIColor();
                Control.Selected = false;
            }

            return entry;
        }

        private void Control_TouchUp(object? sender, EventArgs e)
        {
            if (this.Element != null)
            {
                CustomButton entry = OnReleaseStyle();
                entry?.OnReleased();
                entry?.OnClicked();
            }
        }

        private void Control_TouchDown(object? sender, EventArgs e)
        {
            if (this.Element != null)
            {
                CustomButton entry = (CustomButton)this.Element;
                if (entry != null && Control != null && entry.buttonStyle == ButtonStyle.ApplicationButton)
                {
                    Control.Selected = true;
                    Control.TitleLabel.TextColor = UIColor.White;
                    Control.TintColor = ApplicationButtonBGnTxtColor.ToUIColor();
                    Control.BackgroundColor = ApplicationButtonBGnTxtColor.ToUIColor();
                }
                else if (entry != null && Control != null && entry.buttonStyle == ButtonStyle.SubscriptionButton)
                {
                    Control.TitleLabel.TextColor = Colors.White.ToUIColor();
                    Control.TintColor = Colors.White.ToUIColor();
                    Control.BackgroundColor = ApplicationButtonBGnTxtColor.ToUIColor();
                    Control.Selected = false;

                }
                    entry?.OnPressed();
            }

        }
    }
}

//Consume button in Xaml 
btnLogin = new CustomButton(ButtonStyle.ApplicationButton)
{
    Text = "Login",
    FontSize = 15,
    
}

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 28,631 Reputation points Microsoft Vendor

2024-07-04T09:38:28.3733333+00:00
I added the btnLogin on the MainPage, but I still cannot reproduce your issue. I understand that you tested on simulator, I tested on iPhone15pro iOS17.5 simulator. Would you mind sharing a minimal reproducible sample with me?

public MainPage() { InitializeComponent(); CustomButton btnLogin = new CustomButton(ButtonStyle.ApplicationButton) { Text = "Login", FontSize = 15, }; MyStackLayout.Add(btnLogin); }
Aneetha 25 Reputation points

2024-07-04T10:09:34.43+00:00
Sharing a code is not possible because of some security issues.

I understand that the issue is not relying on the ButtonRenederer. problem is somewhere else that I need to focus on...

Do you have an idea about the cause of this exception in Maui?

but this exception is happening only after I added the below code in the MauiProgram.cs file, which is confusing

handlers.AddCompatibilityRenderer(typeof(Button), typeof(SKM_MOBILE.iOS.Renderers.ButtonRenderer_IOS));
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 28,631 Reputation points Microsoft Vendor

2024-07-05T02:54:55.7666667+00:00
Hello,

You could try AddHandler method instead of AddCompatibilityRenderer method.

.ConfigureMauiHandlers((handlers) => { #if IOS handlers.AddHandler(typeof(CustomButton), typeof(SKM_MOBILE.iOS.Renderers.ButtonRenderer_IOS)); #endif });

Best Regards, Wenyan Zhang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Aneetha 25 Reputation points

2024-07-05T04:24:49.2566667+00:00
I changed the AddCompatibilityRenderer method to the AddHandler method,

handlers.AddHandler(typeof(CustomButton), typeof(SKM_MOBILE.iOS.Renderers.ButtonRenderer_IOS));

But I received an exception,
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 28,631 Reputation points Microsoft Vendor

2024-07-05T08:38:32.4933333+00:00

Do you have an idea about the cause of this exception in Maui?

at SKM_MOBILE.Program.Main(String[] args) in /Users/macmini3/Documents/MAUI/SKM_MOBILE/SKM_MOBILE/Platforms/iOS/Program.cs:line 13

Line13 is to register handler, right?

1 answer

Aneetha 25 Reputation points

2024-07-05T09:30:28.0033333+00:00

No, this line is from the Program.cs file which is in Platforms/iOS,
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Share via

MAUI .NET 8 on iOS -System.ArgumentException: NaN is not a valid value for width

1 answer