Image size, placement in Image Button for Xamarin Forms Labs

Question

I have the following Xaml using Xamarin Forms Labs. The images are way too small, and the text is centered. I'm trying to get the images a little bigger, but the ImageHeightRequest attributes appear to have no affect. I also tried several combinations of StackLayout formatting, such as HorizontalOptions="StartAndExpand" on the StackLayout only, and as well as the elements. This results in the buttons being squished to the left side, and not wide enough to display the whole text of the button. Does anyone have any idea how to implement this with larger images, and everything aligned to the left? I know the images are bigger, because I'm porting this from Windows Phone to Xamarin, and the same images are larger on Windows Phone. I've also tried using the regular Xamarin Forms Image Button, which renders the same size images

 <StackLayout Spacing="0"  >

<Label>
  <Label.FormattedText>
    <FormattedString>
      <FormattedString.Spans>
        <Span Text="My Label" ForegroundColor="#5C85FF" Font="Large"/>
      </FormattedString.Spans>
    </FormattedString>
  </Label.FormattedText>
</Label>

<controls:ImageButton Text="Button 1" BackgroundColor="#5C85FF" TextColor="#ffffff" HeightRequest="90" WidthRequest="175" Image="Image1.png" Orientation="ImageToLeft"  ImageHeightRequest="85" ImageWidthRequest="100" Clicked="ScanProductClicked"  />

<controls:ImageButton Text="Button 2" BackgroundColor="#5C85FF" TextColor="#ffffff" HeightRequest="90" WidthRequest="175" Image="Image2.png" Orientation="ImageToLeft"  ImageHeightRequest="85" ImageWidthRequest="100" Clicked="ShopProductsClicked"  />

<controls:ImageButton Text="Button 3" BackgroundColor="#5C85FF" TextColor="#ffffff" HeightRequest="90" WidthRequest="175" Image="Image3.png" Orientation="ImageToLeft"  ImageHeightRequest="85" ImageWidthRequest="100" Clicked="ShoppingListsClicked"  />

<controls:ImageButton Text="Button 4" BackgroundColor="#5C85FF" TextColor="#ffffff" HeightRequest="90" WidthRequest="175" Image="Image4.png" Orientation="ImageToLeft"  ImageHeightRequest="85" ImageWidthRequest="100" Clicked="LogInClicked"  />

<controls:ImageButton Text="Button 5" BackgroundColor="#5C85FF" TextColor="#ffffff" HeightRequest="90" WidthRequest="175" Image="Image5.png" Orientation="ImageToLeft"  ImageHeightRequest="85" ImageWidthRequest="100" Clicked="SettingsClicked"  /> </StackLayout>

I abandoned ImageButton. Instead, I decided to use Image and make it clickable by implementing TapGestureRecognizer. — William Grand
I think the latest of Xamarin.Forms makes Image Buttons available out of the box. Adam J Wolf has a short article on the subject: syntaxismyui.com/xamarin-forms-button-nugget . Unfortunately, I'm not sure how much control of size, position, and the like you have — Joe
@Joe I tried it but size on images also doesnt work. It looks like that it is a Button with Image inside. So the sizes are just effecting Button but not image — Emil

Aditya Kumar Aditya Kumar · Accepted Answer · 2015-04-21T16:57:35

You can solve this by making an Image tap-able using TapGestureRecognizer. For implementation, go through this: http://www.c-sharpcorner.com/UploadFile/e04e9a/xamarin-forms-image-button-recipe/

Image size, placement in Image Button for Xamarin Forms Labs

1 Answers