ImageButton2

RedCorners.Forms.ImageButton2 is an alternative to Xamarin.Forms ImageButton, which provides a button that contains an Image and/or a Label. ImageButton2 does not derive from Xamarin.Forms.ImageButton, but instead from Grid.

ImageButton2 comes in four different styles (ImageButtonStyles):

  • Image (1),
  • Text (2),
  • ImageText (1 | 2),
  • ImageTextStack (1 | 2 | 4)

When ImageText or ImageTextStack styles are used, both an image and a label are shown. In ImageText, the image and label are arranged in a Grid with two different rows, and in ImageTextStack they are arranged in a Grid with four rows, with first and last row heights set to Star values, and the middle two containing the image and the label.

These two different styles visually control how the image and label are aligned next to each other. In ImageText the label takes up as much space as it needs (or the amount set in TextHeight), and the rest of the space is occupied by the image. In ImageTextStack, The image also uses the space it needs, and the remaining space is used as the top and bottom paddings of the control, to vertically center the contents.

The size and margins around the Image component can be assigned via the ImageWidthRequest, ImageHeightRequest and ImageMargin bindable properties.

The label can be customized via the following bindable properties:

  • Text
  • TextColor
  • FontSize
  • FontFamily
  • FontAttributes
  • TextHeight
  • VerticalTextAlignment
  • HorizontalTextAlignment

Furthermore, through the Orientation bindable property of ImageButton2, four different rotations can be assigned to it:

  • Up (0),
  • Down (180),
  • Right (-90),
  • Left (90)

Similar to Image and Button controls, the image source can be assigned to the Source property, and the command and its parameter to the Command and CommandParameter properties. However, ImageButton2 also provides the following additional commands:

  • PressedCommand/PressedCommandParameter: Executed when a touch down event occurs on the control.
  • ReleasedCommand/ReleasedCommandParameter: Executed when a touch release event occurs on the control.

These events come from the embedded Button2 control inside ImageButton2. For more information, refer to Button2.

Properties

ImageSource Source

This property assigns the image source.

ICommand Command

This property assigns the Command that is executed on a successful tap.

object CommandParameter

This property assigns the parameter used with the Command property.

ICommand PressedCommand

This property assigns the Command that is executed on a touch down.

object PressedCommandParameter

This property assigns the parameter used with the PressedCommand property.

ICommand ReleasedCommand

This property assigns the Command that is executed on a touch release.

object ReleasedCommandParameter

This property assigns the parameter used with the ReleasedCommand property.

Thickness ImageMargin

This property assigns the margins of the internal Image control. This is useful when you want a smaller image with a larger touchable area.

ImageButtonStyles ImageButtonStyle

This property changes the style of the ImageButton2. Valid values are: Image, Text, ImageText and ImageTextStack.

string Text

This property sets the text of the internal Label.

Color TextColor

This property sets the text color of the internal Label.

double FontSize

This property sets the font size of the internal Label.

string FontFamily

This property sets the font family of the internal Label.

FontAttributes FontAttributes

This property sets the font attributes of the internal Label.

GridLength TextHeight

This property adjusts the height of the internal Label. If set to Auto, the Label consumes as much space as it needs. If set to Star, the Label will occupy all unused space. If a value is set, the Label uses that much space.

double ImageWidthRequest, double ImageHeightRequest

These properties override the size requests of the internal Image.

TextAlignment VerticalTextAlignment, TextAlignment HorizontalTextAlignment

These properties adjust the text alignment of the internal Label.

ImageButtonOrientations Orientation

This property adjusts the orientation of the image button. Valid values are: Up (default), Down, Right and Left.