CODEWITHSUNDEEP
xamarin.iosxamarin.forms
David Douglas
David Douglas

Reputation: 10503

How to prevent Images squeezed in Xamarin.Forms Button?

Button Images inside Xamarin.Forms are appearing squeezed on iOS. How do you set the Image to display in normal aspect ratio in XAML? Also as a bonus how do you make sure the Button Images line up vertically? I have tried setting the WidthRequest XAML property but it has no effect.

Xamarin.Forms Button with Image

XAML in ContentPage.Content:

<StackLayout Orientation="Vertical" VerticalOptions="Start" HorizontalOptions="Fill" Padding="20">
    <Button Image="icon_facebook" Clicked="onClicked" Text="Facebook" />
    <Button Image="icon_twitter" Clicked="onClicked" Text="Twitter" />
    <Button Image="icon_microsoft" Clicked="onClicked" Text="Microsoft Account" />
    <Button Image="icon_google" Clicked="onClicked" Text="Google" />
</StackLayout>

Upvotes: 2

Views: 1636

Answers (1)

Gerald Versluis
Gerald Versluis

Reputation: 33993

If you are open to it you could use the ImageButton from the XLabs package.

Alternatively you could go for a ListView with ImageCells or if that doesn't give you enough flexibility create your own ViewCell. These align well by default and you can trigger the proper action when a user taps an item in the list.

Here is an example of Apple themselves doing something similar:

ListView button example

Upvotes: 1

Related Questions