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

Pierre-ChristopheDusPierre-ChristopheDus FRUniversity ✭✭✭
edited January 2018 in Xamarin.Forms

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

  • CharwakaCharwaka INMember ✭✭✭✭
    edited January 2018

    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

  • seanydaseanyda GBMember ✭✭✭✭✭

    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.

  • CharwakaCharwaka INMember ✭✭✭✭

    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>
    
  • CharwakaCharwaka INMember ✭✭✭✭

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

  • seanydaseanyda GBMember ✭✭✭✭✭

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

  • CharwakaCharwaka INMember ✭✭✭✭

    @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

  • seanydaseanyda GBMember ✭✭✭✭✭

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

  • CharwakaCharwaka INMember ✭✭✭✭

    @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

  • seanydaseanyda GBMember ✭✭✭✭✭

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

  • CharwakaCharwaka INMember ✭✭✭✭

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

  • Pierre-ChristopheDusPierre-ChristopheDus FRUniversity ✭✭✭

    @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
  • CharwakaCharwaka INMember ✭✭✭✭
    edited January 2018

    @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

  • nick5454nick5454 USUniversity ✭✭
    edited February 4

    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>

Sign In or Register to comment.