locked
Button Image property not scaling RRS feed

  • Question

  • User292172 posted

    I am trying to use a Button with an Image. My image file is a 225x225 png file (with transparent background).

                        <Button Grid.Column="2" 
                                Image="options_dots.png"
                                Scale="0.2"
                                Margin="2,2,2,2"
                                Command="{Binding ShowOptionsCommand}" 
                                HorizontalOptions="Center"
                                VerticalOptions="Center"
                                BackgroundColor="{StaticResource SoftBlue}"/>
    

    Although the button is indeed scaled to 20%, it is taking up the same amount of space around it as if it were at 100%

    Wednesday, February 15, 2017 6:25 PM

Answers

  • User180523 posted

    In my experience the Button with image is not very reliable. If you are married to having the button theme in place you're kinda stuck.

    however, You can stack things in a grid of 1 cell and have everything size to fit.

    So if you make a grid, put in a boxview, then a label, then an image, and lastly a button whose color is transparent... You make a var more verstile control that lets you have full control over each little part. But... It won't have the various theming: It will be a rectangle. That can be good or bad. It does mean identical look on every platform.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, February 15, 2017 6:41 PM

All replies

  • User180523 posted

    In my experience the Button with image is not very reliable. If you are married to having the button theme in place you're kinda stuck.

    however, You can stack things in a grid of 1 cell and have everything size to fit.

    So if you make a grid, put in a boxview, then a label, then an image, and lastly a button whose color is transparent... You make a var more verstile control that lets you have full control over each little part. But... It won't have the various theming: It will be a rectangle. That can be good or bad. It does mean identical look on every platform.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Wednesday, February 15, 2017 6:41 PM
  • User292172 posted

    Thanks, I was using a grid anyways and just figured that out. I put an image then a button with transparent background.

    The other thing I learned is that the scale property on the image doesn't work as expected.
    If I scale the 225x225 image to 20% using Scale="0.2" it does indeed scale, but, still consumes the space as if it were full size.

    To fix that I use Width and Height Request - then the image takes up only that space.

    Next things is to figure out rounded corners ... loathing having to use custom renderers. The whole reason I want to use Xamarin.Forms is to avoid writing custom device dependent code!

    Wednesday, February 15, 2017 6:59 PM