2

I'm trying to tweak the ImageButtonRenderer in Xamarin.Forms.Labs to render 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 is the default behavior of the renderer.

I came across a StackOverflow article stating that this kind of layout can be achieved in Android using ImageSpan - however, when I translated the code to Xamarin.Forms C# the text is displayed, but not the image. 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?

Community
  • 1
  • 1
bosco
  • 457
  • 1
  • 5
  • 14
  • No there is no limitation to using anything from Android in Xamarin.Forms, some stuff might be a bit more quirky to set up and get working, because you are brawling with the Framework, but you shouldn't be limited to what you can do in custom Views. – Cheesebaron Aug 24 '14 at 11:36

1 Answers1

-1

Yes, it is year old question. Whatever, I guess this post can help with that problem.

Just need to load images to some (invisible) view, then your ImageSpan images would display.

Ircover
  • 2,406
  • 2
  • 22
  • 42