Recently I’ve created custom grid control to prevent the keyboard from overlapping with other controls. This works quite well as long as you don’t have any stack views inside this custom grid. Because if you do have one inside the control the iOS renderer will add the same margin to any elements inside the stack view as it will add to the keyboard view (custom grid control). This is not only super annoying it also moves all your elements inside the stack view! 🤬
So it’s time to create another custom control! 💪
Creating the custom element
When I first saw the bug I searched and debugged for a while until I found out that the stack view puts the same margin to each of its elements as the custom keyboard view grid does…
So the solution to this problem is a stack view that does not set any margin to its elements or if someone tries to set a margin, resets it.
Create the control
To create a custom stack view element just add a new class and inherit from StackView.
Create the custom iOS renderer
If we’ve created the control we have to create the custom renderer for iOS to stop the resize behaviour.
The only thing we do inside this renderer is to add a new event handler to fire when the control is to be resized. Every time someone tries to resize the stack view the event handler resets the margin of all children.
That’s everything we need to do 😉
Now you can simply replace every stack views inside the keyboard view with this custom control and the controls will not get any strange margin when the keyboard is shown.