CODEWITHSUNDEEP
c#xamlxamarinxamarin.forms
user9582784
user9582784

Reputation: 185

Resize Image on button

I am creating an app in Xamarin Forms and try to imitate a FloatingActionButton, so I created a round Button that shall have a centered icon. Unfortunately my icon overlaps the Button by far and I have not found any way to properly rescale it. I tried to work around by making the Button that big so it fits to the icon and scale the whole thing down, but it loses it’s quality by that. Is there a way to only resize the image?

The Button could simply look like this, the problem seems to be something general:

<Button x:Name="button" ImageSource="image.png" />

Upvotes: 0

Views: 200

Answers (1)

TaiT&#39;s
TaiT&#39;s

Reputation: 3216

There are 2 scenarios.

If your image is not rounded and transparent

You can force it this way using a Frame:

<Frame CornerRadius="50" 
       HeightRequest="100"
       WidthRequest="100"
       Padding="0"
       IsClippedToBounds="True">
    <Image Source="image.png" 
           HorizontalOptions="Center"
           VerticalOptions="Center">
            <Image.GestureRecognizers>
                <TapGestureRecognizer Tapped="MyTappedEvent" />
                <!-- or <TapGestureRecognizer Command="{Binding MyCommand}" /> -->
            </Image.GestureRecognizers>
    </Image>
</Frame>

Just replace HeightRequest, WidthRequest and CornerRadius with your values. You have to make sure that CornerRadius is half the size or WirthRequest/HeightRequest to make it looks like a circle.

Then just use the Tapped event for basic usage or the Command of the TapGestureRecognizer if you use MVVM pattern.

If your png image is already rounded and transparent

Then you can just use the TapGestureRecognizer directly on your image so it behaves like a button:

<Image Source="image.png" HeightRequest="100" WidthRequest="100">
    <Image.GestureRecognizers>
        <TapGestureRecognizer Command="{Binding AddCommand}" />
    </Image.GestureRecognizers>
</Image>

Hope it helps,

Happy coding!

Upvotes: 3

Related Questions