I'm trying to tweak the ImageButtonRenderer in Xamarin.Forms.Labs so that I can create ImageButtons with the image & text centered (as a block) on the image button, rather than having the image aligned to the left/right edge of the button, as the control currently works.
I came across a number of StackOverflow articles stating that this could be achieved using an ImageSpan, but when I use the ImageSpan class, the images don't appear. Can anyone see something obviously wrong with this code?...
source is the ImageSource value of the ImageButton control
var handler = new FileImageSourceHandler();
var bitmap = await handler.LoadImageAsync(source, this.Context);
if (bitmap != null)
{
var bitmapWidth = this.ImageButton.ImageWidthRequest.Equals(0) ? bitmap.Width : (int)(this.ImageButton.ImageWidthRequest);
var bitmapHeight = this.ImageButton.ImageHeightRequest.Equals(0) ? bitmap.Height : (int)(this.ImageButton.ImageHeightRequest);
Drawable drawable = new BitmapDrawable(Resources, bitmap);
var scaledDrawable = new ScaleDrawable(drawable, 0, bitmapWidth, bitmapHeight).Drawable;
scaledDrawable.SetBounds(0, 0, bitmapWidth, bitmapHeight);
var scaledBitmap = Bitmap.CreateScaledBitmap(bitmap, bitmapWidth, bitmapHeight, true);
var leftPadding = (int)this.ImageButton.ButtonPadding.Left;
var rightPadding = (int)this.ImageButton.ButtonPadding.Right;
var topPadding = (int)this.ImageButton.ButtonPadding.Top;
var bottomPadding = (int)this.ImageButton.ButtonPadding.Bottom;
Control.SetPadding(leftPadding, topPadding, rightPadding, bottomPadding);
Control.Gravity = GravityFlags.CenterHorizontal | GravityFlags.CenterVertical;
switch (this.ImageButton.Orientation)
{
case ImageOrientation.ImageToRight:
var rightButtonLabel = new SpannableString(string.Format("{0} ", this.Control.Text));
//rightButtonLabel.SetSpan(new ImageSpan(scaledBitmap), rightButtonLabel.Length() - 1, rightButtonLabel.Length(), SpanTypes.InclusiveInclusive);
//rightButtonLabel.SetSpan(new ImageSpan(scaledDrawable, SpanAlign.Bottom), rightButtonLabel.Length() - 1, rightButtonLabel.Length(), SpanTypes.InclusiveInclusive);
//rightButtonLabel.SetSpan(new ImageSpan(scaledDrawable), rightButtonLabel.Length() - 1, rightButtonLabel.Length(), SpanTypes.InclusiveInclusive);
rightButtonLabel.SetSpan(new ImageSpan(Forms.Context, scaledBitmap, SpanAlign.Bottom), rightButtonLabel.Length() - 1, rightButtonLabel.Length(), SpanTypes.InclusiveInclusive);
Control.SetText(rightButtonLabel, Android.Widget.TextView.BufferType.Spannable);
break;
case ImageOrientation.ImageToLeft:
default:
var leftButtonLabel = new SpannableString(string.Format(" {0}", this.Control.Text));
//leftButtonLabel.SetSpan(new ImageSpan(scaledBitmap), 0, 1, SpanTypes.InclusiveInclusive);
//leftButtonLabel.SetSpan(new ImageSpan(scaledDrawable, SpanAlign.Bottom), 0, 1, SpanTypes.InclusiveInclusive);
//leftButtonLabel.SetSpan(new ImageSpan(scaledDrawable), 0, 1, SpanTypes.ExclusiveExclusive);
leftButtonLabel.SetSpan(new ImageSpan(Forms.Context, scaledBitmap, SpanAlign.Bottom), 0, 1, SpanTypes.InclusiveInclusive);
Control.SetText(leftButtonLabel, Android.Widget.TextView.BufferType.Spannable);
break;
}
}
The text centers just fine, but there's no image. I've tried a few different ImageSpan overloads with Drawable, Bitmaps, using the Forms.Context, and none of them work.
Is there some limitation with using ImageSpan in Xamarin.Forms?