Hello,
I tried to create a button that looks like this:
But, I would like to use a icon fonts (like FontAwesome) instead of a Bitmap as source of the Image.
I thought that I could it with Iconize, but it's not the case: IconizeButton only replace the Text by the FontIcon.
So is there a way to manage both label in Text and FontIcon in Image for a Button?
Answers
Hi @Pierre-ChristopheDus
did you check this
https://xamarininsider.com/2017/07/12/using-icon-fonts-in-your-xamarin-forms-apps/
you can customize this renderer as per your wish
I'd recommend building the whole button with a
Grid
. UsingRowDefinitions
andColumnDefinitions
you will be able to control exactly where you want theLabel
,Image
and any otherViews
inside theGrid
can be placed.Hi @Pierre-ChristopheDus
Check this i made this out of the Renderer with FontAwesome
so how you gonna add FontAwesome icons without Renderer ?
Find a custom renderer or use an
Image
because by using aGrid
, You control exactly where every item is placed, It's a cross platform solution so it'll work over UWP, iOS and Android. It doesn't have to be anotherLabel
, You could just use theImage
in a Row and save creating 3 individual custom renderers for all platforms........yes that too works ,since he explicitly wants font awesome i propsed this, and coming to images it will put more pressure on performance
You could make it a
CachedImage
with FFImageLoading and it'd be a minimal performance hit for the sake of creating 3 custom renderers and the limitations of how theButton
will look using a differentLayout
solution. Also we are talking image icons here, not a 200x200 image. But if FontAwesome is a requirement then yeah, Take the custom renderer route.look in Xamarin profiler font awesome is bit fast than icon images
I'm not debating that, It's a font, of course it's going to be faster. I said it's a minimal performance hit for the sake of creating 3 custom renderers. Using Xamarin.iOS is faster then using Xamarin.Forms, but users take this route because it saves time and offers a cross platform solution...
i totally agree Cheers
@Charwaka
Your solution seems to be interesting.
However I suppose that the color of your "custom button" doesn't change when the user click on it.
In add, is it possible to get the context with TapGestureRecognizer? I must implement the same button for 2 cases:
you can pass command parameter to differentiate
<TapGestureRecognizer Command="{Binding OpenTour}" **CommandParameter="{Binding myobject}"**/>
for tapped effect you can do something like this
https://forums.xamarin.com/discussion/50693/how-to-create-button-pressed-effect
I used this:
<Button Text="Photo {x:Static local:FAIcons.FACamera}" FontFamily="{x:Static local:FAFamily.Family}" HeightRequest="100" BackgroundColor="LimeGreen" TextColor="White" FontSize="36"></Button>