Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Custom TimePicker went wrong

MasterOfXamarinMasterOfXamarin Member ✭✭✭
edited April 7 in Xamarin.Forms

Hi, I am struggling with a problem with custom renderer in xamarin forms for ios, I am heading to get this

if (this.Control != null && this.Element != null && !string.IsNullOrEmpty(element.Image))
            {
                var downarrow = UIImage.FromBundle(element.Image);

                UIGraphics.BeginImageContext(new CGSize(element.ImageReSize, element.ImageReSize));
                downarrow.Draw(new CGRect(0, 0, element.ImageReSize, element.ImageReSize));
                var resultImage = UIGraphics.GetImageFromCurrentImageContext();
                UIGraphics.EndImageContext();

                Control.RightViewMode = UITextFieldViewMode.Always;
                Control.RightView = new UIImageView(resultImage);
            }

but my image is to the righ side, I dont know how to get the final desired design, Thnaks

Best Answer

  • ColeXColeX Member, Xamarin Team Xamurai
    Accepted Answer

    There is a method RightViewRect used to define the location of RightView , but you should create a subclass to override it .

    Code

    [assembly: ExportRenderer(typeof(TimePicker), typeof(MyRenderer))]
    namespace App2.iOS
    {
        class MyRenderer : TimePickerRenderer
        {
            protected override void OnElementChanged(ElementChangedEventArgs<TimePicker> e)
            {
                base.OnElementChanged(e);
    
                if (this.Control != null && this.Element != null )
                {
                    var downarrow = UIImage.FromBundle("icon.png");
    
                    UIGraphics.BeginImageContext(new CGSize(20,20));
                    downarrow.Draw(new CGRect(0, 0, 20, 20));
                    var resultImage = UIGraphics.GetImageFromCurrentImageContext();
                    UIGraphics.EndImageContext();
    
                    Control.RightViewMode = UITextFieldViewMode.Always;
                    Control.RightView = new UIImageView(resultImage);
                }
            }
    
            protected override UITextField CreateNativeControl()
            {
                return new MyTimePicker();
            }
        }
    
        class MyTimePicker : UITextField
        {
            public override CGRect RightViewRect(CGRect forBounds)
            {
                var rect = base.RightViewRect(forBounds);
                rect.X -= 10;
                return rect;
            }
        }
    }
    

Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    Accepted Answer

    There is a method RightViewRect used to define the location of RightView , but you should create a subclass to override it .

    Code

    [assembly: ExportRenderer(typeof(TimePicker), typeof(MyRenderer))]
    namespace App2.iOS
    {
        class MyRenderer : TimePickerRenderer
        {
            protected override void OnElementChanged(ElementChangedEventArgs<TimePicker> e)
            {
                base.OnElementChanged(e);
    
                if (this.Control != null && this.Element != null )
                {
                    var downarrow = UIImage.FromBundle("icon.png");
    
                    UIGraphics.BeginImageContext(new CGSize(20,20));
                    downarrow.Draw(new CGRect(0, 0, 20, 20));
                    var resultImage = UIGraphics.GetImageFromCurrentImageContext();
                    UIGraphics.EndImageContext();
    
                    Control.RightViewMode = UITextFieldViewMode.Always;
                    Control.RightView = new UIImageView(resultImage);
                }
            }
    
            protected override UITextField CreateNativeControl()
            {
                return new MyTimePicker();
            }
        }
    
        class MyTimePicker : UITextField
        {
            public override CGRect RightViewRect(CGRect forBounds)
            {
                var rect = base.RightViewRect(forBounds);
                rect.X -= 10;
                return rect;
            }
        }
    }
    
  • MasterOfXamarinMasterOfXamarin Member ✭✭✭
    edited April 7

    @ColeX awesome, thanks a lot, so maybe do you know how to implement this vertical line between img and text too. I will be so grateful to get an answer

Sign In or Register to comment.