Is possible to create a Button containing both a Text and and an icon fonts as Image?

Pierre-ChristopheDus

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?

Charwaka

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

seanyda

I'd recommend building the whole button with a Grid. Using RowDefinitions and ColumnDefinitions you will be able to control exactly where you want the Label, Image and any other Views inside the Grid can be placed.

Charwaka

Hi @Pierre-ChristopheDus

Check this i made this out of the Renderer with FontAwesome

<Frame CornerRadius="10" BackgroundColor="#485460" HorizontalOptions="CenterAndExpand" VerticalOptions="End" Margin="0,0,0,20"  HeightRequest="50" WidthRequest="140" OutlineColor="Red" HasShadow="True" Padding="0" >
                    <StackLayout Orientation="Horizontal">
                        <Helpers:FontAwesomeLabel Text="{x:Static Helpers:Icon.FAMusic}"
              HorizontalOptions="Center"
              VerticalOptions="Center"
              FontSize="20"
                                                  FontAttributes="None"
                                             Margin="5,0,0,0"     
              TextColor="White" />
                        <Label Text="Austin Tour" FontSize="20"  TextColor="White"  HorizontalOptions="End"
              VerticalOptions="Center" />
                        <Frame.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding OpenTour}"/>
                        </Frame.GestureRecognizers>
                    </StackLayout>
                </Frame>

Charwaka

@seanyda said:
I'd recommend building the whole button with a Grid. Using RowDefinitions and ColumnDefinitions you will be able to control exactly where you want the Label, Image and any other Views inside the Grid can be placed.

so how you gonna add FontAwesome icons without Renderer ?

seanyda

@Charwaka said:

@seanyda said:
I'd recommend building the whole button with a Grid. Using RowDefinitions and ColumnDefinitions you will be able to control exactly where you want the Label, Image and any other Views inside the Grid can be placed.

so how you gonna add FontAwesome icons without Renderer ?

Find a custom renderer or use an Image because by using a Grid, 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 another Label, You could just use the Image in a Row and save creating 3 individual custom renderers for all platforms........

Charwaka

@seanyda said:

@Charwaka said:

@seanyda said:
I'd recommend building the whole button with a Grid. Using RowDefinitions and ColumnDefinitions you will be able to control exactly where you want the Label, Image and any other Views inside the Grid can be placed.

so how you gonna add FontAwesome icons without Renderer ?

Find a custom renderer or use an Image because by using a Grid, 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 another Label, You could just use the Image 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

seanyda

@Charwaka said:

@seanyda said:

@Charwaka said:

@seanyda said:
I'd recommend building the whole button with a Grid. Using RowDefinitions and ColumnDefinitions you will be able to control exactly where you want the Label, Image and any other Views inside the Grid can be placed.

so how you gonna add FontAwesome icons without Renderer ?

Find a custom renderer or use an Image because by using a Grid, 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 another Label, You could just use the Image 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 the Button will look using a different Layout 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.

Charwaka

@seanyda said:

@Charwaka said:

@seanyda said:

@Charwaka said:

@seanyda said:
I'd recommend building the whole button with a Grid. Using RowDefinitions and ColumnDefinitions you will be able to control exactly where you want the Label, Image and any other Views inside the Grid can be placed.

so how you gonna add FontAwesome icons without Renderer ?

Find a custom renderer or use an Image because by using a Grid, 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 another Label, You could just use the Image 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 the Button will look using a different Layout 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

seanyda

@Charwaka said:

@seanyda said:

@Charwaka said:

@seanyda said:

@Charwaka said:

@seanyda said:
I'd recommend building the whole button with a Grid. Using RowDefinitions and ColumnDefinitions you will be able to control exactly where you want the Label, Image and any other Views inside the Grid can be placed.

so how you gonna add FontAwesome icons without Renderer ?

Find a custom renderer or use an Image because by using a Grid, 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 another Label, You could just use the Image 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 the Button will look using a different Layout 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...

Charwaka

@seanyda said:

@Charwaka said:

@seanyda said:

@Charwaka said:

@seanyda said:

@Charwaka said:

@seanyda said:
I'd recommend building the whole button with a Grid. Using RowDefinitions and ColumnDefinitions you will be able to control exactly where you want the Label, Image and any other Views inside the Grid can be placed.

so how you gonna add FontAwesome icons without Renderer ?

Find a custom renderer or use an Image because by using a Grid, 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 another Label, You could just use the Image 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 the Button will look using a different Layout 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

Pierre-ChristopheDus

@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:

• on a single product page
• on a ListView, through a custom cell

Charwaka

@Pierre-ChristopheDus said:
@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:

• on a single product page
• on a ListView, through a custom cell

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

nick5454

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>