Button with Image - text is not centered

Hi,

How can I center the text on the button when using an image? I have two buttons next to each other, one with an image and one without. I want the text to be centered on both. The problem can be seen here: http://i68.tinypic.com/msob3o.jpg

The second button (without an image) has correctly centered text.

Answers

  • JohnHardmanJohnHardman GBUniversity mod

    @MikeeSouth - There are probably other ways, but two are:

    (1) to use a custom renderer
    (2) to use an empty string in the button with the image, then overlay a Label (with transparent background) over the top of the Button (using a Layout type - Relative Layout, AbsoluteLayout or Grid) to do the positioning

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    The problem with (2) is that the label is on top of the button... so will/now will the button receive the tap gesture?

    Because of all the problems with an image button I just stopped using them.
    I'd rather lay out a grid and put my image(s) and label(s) the way I want them, then drop a transparent button on top. Lots more flexibility in the layout and you still wire to a button like normal.

                <!--#region Back button-->
                <!--
                    Button.Image property is screwed up in Xamarin so I stack a
                    transparent button on top of my image inside a grid so everything
                    just auto-sizes to the available space
                -->
                <Grid IsVisible="{Binding ShowNavBack}">
                    <Image BackgroundColor="Transparent"
                           IsOpaque="True"
                           Source="{Binding BackButton}" />
                    <Label Text="Back"/>
                    <Button BackgroundColor="Transparent"
                            Command="{Binding NavBackCommand}" />
                </Grid>
                <!--#endregion Back button-->
    
  • MikeeSouthMikeeSouth USMember ✭✭

    @JohnHardman thanks for your suggestions. I just find it (very) odd that noone else has encountered this problem or that it isn't supported by default. I really like the simplicity of XF but custom renderers can't be the answer to everything.

    Does anyone else have a solution for this?

  • MikeeSouthMikeeSouth USMember ✭✭

    @ClintStLaurent thanks for your example. I'm worried about the performance of creating multiple layout containers and overlapping elements instead of using a single element. Have you measured the performance of your "combined grid control"?

  • JohnHardmanJohnHardman GBUniversity mod
    edited October 2016

    @ClintStLaurent @MikeeSouth - If overlaying a Label over a Button, InputTransparent=false will pass through touches/clicks

    I also make use of transparent (well, Opacity=0.02 anyway) buttons overlaid on other controls. Both uses of the z-order make sense in different situations.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    @johnhardman I wasn't really worried about 2 extra elements out of 200 on a page. There are so many more things that impact performance. Unless you're putting 400+ of these "layered" objects on a page I doubt you'd be able to notice something. But no, I didn't compare a page with 500 image buttons versus 500 multi-element grids. If you decide to do that test, please share the results with the rest of us.

  • JohnHardmanJohnHardman GBUniversity mod
    edited October 2016

    @ClintStLaurent - I think you meant to reply to @MikeeSouth

    @MikeeSouth - The performance difference can be significant enough to make the overlaying method unsuitable. I started out by building a generic ContentButton, that allowed me to put any View "inside" a Button using the overlaying technique (a Button with Opacity=0.02 over the top of the View, using a Layout to do the positioning). On some pages where multiple instances of this ContentButton were used, that approach has enough overhead to make the page creation/rendering times unacceptable . As a result, when I identify those areas where it is too slow, I then replace the generic ContentButton with something more specific for that scenario. Where even that is not fast enough, I will put in custom renderers later on, but those will be the exception rather than the first approach.

  • ClintStLaurentClintStLaurent USUniversity ✭✭✭✭✭

    I will point out that if you're worried that much about performance (or seeing that much of a hit) then stop using .02 opacity. You're asking for a ton of math to be done to accomplish that work for next to no visible affect. At .02 then every pixel of the element has to be merged with the pixels of elements below and above. At true opacity no work is done: That pixel simply isn't shown at all and not included in any computations.

  • JohnHardmanJohnHardman GBUniversity mod
    edited October 2016

    @ClintStLaurent - Using Opacity certainly wouldn't be my first choice, but using Color.Transparent or IsVisible or Opacity=0 can hit issues where renderers simply don't render the item with the layout changing as a consequence. This certainly used to be the case - I haven't heard anything to say it has been changed, but it's possible that it might have been without anything obvious in the release notes. Worth a test if I get time...

  • JohnHardmanJohnHardman GBUniversity mod

    @MikeeSouth - Of course, the other question is - could you add your own app's icon to that second button?

  • MikeeSouthMikeeSouth USMember ✭✭

    @JohnHardman I could add another image to the second button but the text is still not centered. Even if the button texts are aligned they are not centered on the screen. I have the application logo above and currently the texts are not centered under the logo which looks weird.

  • JohnHardmanJohnHardman GBUniversity mod

    @MikeeSouth - Fair enough - if the text needs to be centered on the button, rather than just aligned with the text on the previous button, adding the icon won't do what you need.

Sign In or Register to comment.