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

Aneetha 65

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://learn.microsoft.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.) 32,546 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.) 32,546 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 65

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.) 32,546 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 65

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.) 32,546 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 65 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.) 32,546 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 65 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.) 32,546 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?
Aneetha 65 Reputation points

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

No, this line is from the Program.cs file which is in Platforms/iOS,
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,546 Reputation points Microsoft Vendor

2024-07-08T01:06:08.9433333+00:00

Since I still cannot reproduce the issue, could you share me a minimal reproducible demo? I know you said there are some security issues, you could try to create a minimal demo that only contains the custom renderer, and make sure there is no sensitive private information. Thanks for your collaboration in advance.
Aneetha 65 Reputation points

2024-07-11T12:23:15.3233333+00:00

Please find the minimal reproducible demo code below,

https://1drv.ms/u/s!AuAVuXsUt8tVgWcYPggJwhKy4ood?e=wQhEXE

Please let me know the solution to this issue.
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,546 Reputation points Microsoft Vendor

2024-07-12T09:35:33.35+00:00

After testing, I will get the same error when the style is Default,Label,OnelineButton. I didn't reproduce your issue because I set the type to ButtonStyle.ApplicationButton

I'm still investigating the underlying reason. If it's possible, could you remove those styles?
Aneetha 65 Reputation points

2024-07-12T10:00:23.1466667+00:00
I can not remove these Default,Label,OnelineButton styles.

My application has a button with customized styles on different pages. So I need all of them.

I noticed for these styles of buttons, the following property values are NaN, which may cause this issue,

WidthRequest HeightRequest MinimumHeightRequest MinimumWidthRequest MaximumWidthRequest MaximumHeightRequest

In MAUI, what are the default values for these properties in Button?
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 32,546 Reputation points Microsoft Vendor

2024-07-15T09:40:40.9633333+00:00

After testing, setting these properties or not didn't influence the error result. I still investigate which property caused the error.
Sharaniya Swaminathan 0 Reputation points

2024-07-16T18:01:24.4866667+00:00

Hi, Is there any update on this. I too exactly experience the same error. Any findings will be very helpful!

1 answer

youzeliang 735 Reputation points

2024-07-15T11:13:07.6+00:00

#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
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

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

1 answer

Your answer