I try to create a Rounded/Circle Button that can display font icons. As I already use Iconize in my project, I tried to create the Rounded/Circle Button from the existing IconButton
.
I first tried this, by fixing BorderRadius
as the half value of the HeightRequest
/WidthRequest
:
<iconize:IconButton HeightRequest="40" WidthRequest="40"
BorderRadius="20"
Text="fa-500px" TextColor="Red" FontSize="20"
BackgroundColor="Orange" BorderColor="Red"
BorderWidth="2"
VerticalOptions="Start" HorizontalOptions="Center">
</iconize:IconButton>
The default rendering works as expected on UWP, but the "clicked" rendering is not good, as a rectangle is appearing. However on Android, the button is always in "default" mode: there is no border, no background, ...
So I've added a FlatButton control, and a Renderer for Android:
public class FlatButton : IconButton
{
}
[assembly: ExportRenderer(typeof(FlatButton), typeof(FlatButtonRenderer))]
namespace Iconize.Sample.Droid.Renderers
{
public class FlatButtonRenderer : ButtonRenderer
{
protected override void OnDraw(Android.Graphics.Canvas canvas)
{
base.OnDraw(canvas);
}
protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
{
base.OnElementChanged(e);
}
}
}
And I use it like this:
<controls:FlatButton HeightRequest="40" WidthRequest="40"
BorderRadius="20"
Text="fa-500px" TextColor="Red" FontSize="20"
BackgroundColor="Orange" BorderColor="Red"
BorderWidth="2"
VerticalOptions="Start" HorizontalOptions="Center">
</controls:FlatButton>
This time, the rounded rendering is fine on Android, but I've lost the "display" of the font icon.
Here is a screenshot:
Is there a way to keep the rounded renderer and the icon display? And in a second time, is there a way to fix the rendering issue on UWP when the button is clicked?
I also looked other plugins:
- Flexbutton: seems to work fine, but there is no UWP support
- ButtonCirclePlugin: I wasn't able to use it in my solution, and the I wasn't able to built the provided sample...
Would you have other suggestions?