Iconize icon indicating copy to clipboard operation
Iconize copied to clipboard

Create a Rounded/Circle Button from IconButton

Open pcdus opened this issue 7 years ago • 0 comments

Hello,

I try to create a Rounded/Circle Button that can use font icons: so I tried to use 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?

pcdus avatar Feb 13 '18 08:02 pcdus