0

I have a custom renderer that is attempting to create a white square with rounded corners containing a single font image at the top and text under it. I have been able to do something similar with the ImageRenderer, but am looking to support font images with this version.
In LayoutSubviews I set the frame to the requested size, set the corner radius, and set Clip to Bounds to true. At theis point in time Bounds are still (0,0,0,0) but setting there here has no effect.

            Control.Layer.CornerRadius = 10;
            Control.Layer.MasksToBounds = false;
            Control.Layer.Frame = new CGRect(0, 0, element.WidthRequest, element.HeightRequest);
            Control.Layer.BackgroundColor = HelperUtilities.GetColor(element.Item.BackgroundColor, Color.White).ToCGColor();
            Control.ClipsToBounds = true;

I have also checked the value of Bounds in Draw both before and after calling the base code, and they are as expected - (0,0,126,126). Yet when the screen is drawn the white background is too short - it's a rectangle the proper width, but the height of the font icon, not the given height. I can change the font icon's placement within the square area by changing the VerticalTextAlignment from Start to End which moves it from the top to the bottom of the square. Next, I add the UIView for the additional text and anchor it to the BottomAnchor of the Control, it anchors to the bottom of the white area rather than the bottom of the square which tells me the Control's Bounds have been changed so the height is no longer 126 but is the actual height of the Font and FontSize being used.

What do I need to set and/or override to get the control to have the given height instead of the font height?

This is what is displayed:
enter image description here

This is what I want it to display:
enter image description here

Christine
  • 562
  • 3
  • 19
  • Did you put the `VerticalOptions` of this white square as `EndAndExpand`? It seems that is not the white square that need to be with corner radius for the below part, it's the image behind. You also needs to edit the opacity of the background color of your white square to achieve what you want. – techie Oct 15 '21 at 18:21
  • The VerticalOptions of the object are StartAndExpend, but that does not make the white expand to the bottom of the available area. The white square is created in the iOS Renderer, so it doesn't have VerticalOptins. There shouldn't be anything behind the white square. The pink in the first picture is a Background just for testing, the white should come down to the bottom of where the pink is. – Christine Oct 15 '21 at 18:26
  • Would you mind sharing us a baisc, minimal project to test ? You can upload it to github and attach the link here . – Wen xu Li Oct 18 '21 at 02:45

1 Answers1

0

I was able to solve this by adding padding to the bottom of the object that inherits from Label in my forms app to account for the expanded area. I only add the padding if iOS as Android didn't have the issue. This was a much easier solution than adding it into the custom renderer.

enter image description here

Christine
  • 562
  • 3
  • 19