Center cell contents in custom Monotouch.Dialog element

Question

I'm coding a generig Monotouch.Dialog element to display an Image (that doesn't display the image picker), I'm reusing code from UIViewElement and ImageElement, added some parameters so it can be usable in a login screen for instance (showing company logo, etc).

I have this so far:

public class ImageViewElement : Element, IElementSizing
{
    protected UIImage Image;
    public CellFlags Flags = 0;
    public UIViewContentMode Alignment;

    public enum CellFlags {
        Transparent = 1,
        DisableSelection = 2,
        Both = 3
    }

    /// <summary>
    /// Constructor
    /// </summary>
    /// <param name="caption">
    /// The caption, only used for RootElements that might want to summarize results
    /// </param>
    /// <param name="view">
    /// The view to display
    /// </param>
    /// <param name="transparent">
    /// If this is set, then the view is responsible for painting the entire area,
    /// otherwise the default cell paint code will be used.
    /// </param>
    public ImageViewElement (UIImage image, bool transparent, bool selectable, UIViewContentMode alignment) : base ("")
    {
        this.Alignment = alignment;
        this.Image = image;

        if(transparent)
            {Flags+=1;}
        if(!selectable)
            {Flags+=2;}
    }


    public override UITableViewCell GetCell (UITableView tv)
    {
        var cell = tv.DequeueReusableCell (CellKey);
        if (cell == null)
        {
            cell = new UITableViewCell (UITableViewCellStyle.Default, CellKey);
            cell.ContentMode = UIViewContentMode.BottomRight;
            switch(Flags)
            {
            case CellFlags.Transparent:
                cell.BackgroundColor = UIColor.Clear;
                //
                // This trick is necessary to keep the background clear, otherwise
                // it gets painted as black
                //
                cell.BackgroundView = new UIView (RectangleF.Empty) {BackgroundColor = UIColor.Clear};
                break;
            case CellFlags.DisableSelection:
                cell.SelectionStyle = UITableViewCellSelectionStyle.None;
                break;
            case CellFlags.Both:
                cell.BackgroundColor = UIColor.Clear;
                //
                // This trick is necessary to keep the background clear, otherwise
                // it gets painted as black
                //
                cell.BackgroundView = new UIView (RectangleF.Empty) {
                    BackgroundColor = UIColor.Clear};
                cell.SelectionStyle = UITableViewCellSelectionStyle.None;
                break;
            }
            cell.ImageView.ContentMode = Alignment;
            cell.ContentMode = Alignment;
            cell.ImageView.Image = Image;

        }
        return cell;
    }
    public float GetHeight (UITableView tableView, NSIndexPath indexPath)
    {
        return Image.Size.Height;
    }
}

Everything works so far with exception of the alignment, the Image is always displayed left, I tried setting ContentMode on the cell and on the cell's Imageview but it's not working, what can I do?

---

EDIT: Miguel pointed out my bounds are probably not set correctly, so I tried this:

cell.ContentMode = UIViewContentMode.Right;
var test = new UIImageView(Image);
cell.ContentView.Add (test);

Now my ContentView bounds are same as cell bounds, 0,0,320,40, they are not ok but I'm only looking for with, my test bounds are 0,0,256,256, but alignment is still not working... dunno what to do

---

EDIT: Some progress!!!

I asked for advice on IRC

(2012-11-13 10:10:12) CENSORED: Implement a subclass of UITableViewCell
(2012-11-13 10:10:26) CENSORED: add the Image as a subview in the init method of the new class
(2012-11-13 10:10:33) CENSORED: and override layouSubviews
(2012-11-13 10:10:36) CENSORED: with the line:
(2012-11-13 10:10:56) CENSORED: imageView.Center = this.Center;
(2012-11-13 10:11:14) CENSORED: (call super first as well)
(2012-11-13 10:11:25) CENSORED: that way the image will always remain centred in the cell

(2012-11-13 10:38:23) CENSORED: AndreSM: UITableViewCell already has a UIImageView property (named ImageView)
(2012-11-13 10:38:36) CENSORED: you can just use that instead of creating a new one

So I went ahead and created a subclass:

public class ImageViewCell: UITableViewCell
{
    UIImage cellImage;

    public ImageViewCell (UIImage image, NSString key) : base(UITableViewCellStyle.Default, key)
    {
        cellImage = image;
        ImageView.Image = cellImage;
    }

    public override void LayoutSubviews ()
    {
        base.LayoutSubviews ();
        ImageView.Center = ContentView.Center;
        ImageView.SetNeedsDisplay ();
    }
}

But image is still a bit off center, here is a screenshot so you can get what I mean:

I don't get the reason for this, I checked what is the new center and the value is correct (160 in the X axis..)

Answer 1

The problem is that Center is defined in the PARENT coordinate space. So the Center property of the ContentView is defined in the space of its PARENT (the UITableViewCell, which is a view itself). but the ImageView center is defined in the coordinate space of the parent of the imageView which is the ContentView.

This code should solve it by calculating the center in the contentviews own coordinate space

public override void LayoutSubviews ()
{
    base.LayoutSubviews ();
    ImageView.Center = new PointF(ContentView.Bounds.Width/2,ContentView.Bounds.Height/2);   
    ImageView.SetNeedsDisplay ();
}