Question

I have this owner drawn element:

using System;
using Tracktion.Service.WCF.Entities;
using MonoTouch.Dialog;
using MonoTouch.UIKit;
using MonoTouch.CoreGraphics;
using System.Drawing;
using MonoTouch.Foundation;

namespace Tracktion.iOS
{
public class EventListingElement : OwnerDrawnElement
{

    public static UIFont EventTitleFont = UIFont.BoldSystemFontOfSize (18f);
    public static UIFont EventTypeFont = UIFont.SystemFontOfSize (14f);
    public static UIFont CountsFont = UIFont.ItalicSystemFontOfSize (14f);
    public static UIFont DatesFont = UIFont.SystemFontOfSize (14f);
    public static UIColor DefaultBackgroundColor = UIColor.White;

    public EventListingElement (EventListingItem item) : base(UITableViewCellStyle.Default, "EventListingElement")
    {
        ev = item;
    }

    public EventListingElement (EventListingItem item, Action<EventListingItem> tapped) : this(item)
    {
        whenTapped = tapped;
    }

    EventListingItem ev;
    Action<EventListingItem> whenTapped = null;

    public override void Draw (RectangleF bounds, CGContext context, UIView view)
    {
        //view.BackgroundColor = EventListingElement.DefaultBackgroundColor;
        //CGContext currentContext = UIGraphics.GetCurrentContext ();
        SizeF sizeF;
        float num = 0f;
        UIColor.FromRGB (36, 112, 216).SetColor ();
        string dateStr;
        if (ev.StartTime.HasValue)
        {
            TimeSpan t = DateTime.Now - ev.StartTime.Value;
            if (DateTime.Now.Day == ev.StartTime.Value.Day)
            {
                dateStr = ev.StartTime.Value.ToShortTimeString ();
            }
            else
            {
                if (t <= TimeSpan.FromHours (24.0))
                {
                    dateStr = "Yesterday"; //.GetText ();
                }
                else
                {
                    if (t < TimeSpan.FromDays (6.0))
                    {
                        dateStr = ev.StartTime.Value.ToString ("dddd");
                    }
                    else
                    {
                        dateStr = ev.StartTime.Value.ToShortDateString ();
                    }
                }
            }
        }
        else
        {
            dateStr = "Date TBA";
        }
        // Setup counts
        string counts = "Staff & Volunteers: {0} reg, {1} in, {2} out\n";
        counts += "Students & Visitors: {3} reg, {4} in, {5} out";
        counts = string.Format (counts, ev.CountOfStaffAndVolunteersRegistered, ev.CountOfStaffAndVolunteersCheckedIn, ev.CountOfStaffAndVolunteersCheckedOut, ev.CountOfStudentsAndVisitorsRegistered, ev.CountOfStudentsAndVisitorsCheckedIn, ev.CountOfStudentsAndVisitorsCheckedOut);

        float left = 13f;

        // Draw
        sizeF = view.StringSize (dateStr, EventListingElement.EventTitleFont);
        float num2 = sizeF.Width + 21f + 5f;
        RectangleF dateFrame = new RectangleF (view.Bounds.Width - num2, 6f, num2, 14f);
        /*if (ev.StartTime != null && ev.StartTime.Value.Date == DateTime.Today)
        {
            currentContext.SaveState ();
            currentContext.AddEllipseInRect (dateFrame);
            currentContext.Clip ();
            currentContext.DrawLinearGradient (EventListingElement.EventIsTodayGradient, new PointF (10f, 32f), new PointF (22f, 44f), CGGradientDrawingOptions.DrawsAfterEndLocation);
            currentContext.RestoreState ();
        }*/
        view.DrawString (dateStr, dateFrame, EventListingElement.DatesFont, UILineBreakMode.Clip, UITextAlignment.Left);
        float num3 = view.Bounds.Width - left;
        UIColor.Black.SetColor ();
        if (!string.IsNullOrWhiteSpace (ev.EventType))
        {
            view.DrawString (ev.EventType, new PointF (left, 2f), num3 - num2, EventListingElement.EventTypeFont, UILineBreakMode.TailTruncation);
        }
        view.DrawString (ev.Name, new PointF (left, 23f), num3 - left - num, EventListingElement.EventTitleFont, UILineBreakMode.TailTruncation);
        UIColor.Gray.SetColor ();
        view.DrawString (counts, new RectangleF (left, 40f, num3 - num, 34f), EventListingElement.CountsFont, UILineBreakMode.TailTruncation, UITextAlignment.Left);
        /*if (this.NewFlag)
        {
            currentContext.SaveState ();
            currentContext.AddEllipseInRect (new RectangleF (10f, 32f, 12f, 12f));
            currentContext.Clip ();
            currentContext.DrawLinearGradient (MessageSummaryView.gradient, new PointF (10f, 32f), new PointF (22f, 44f), CGGradientDrawingOptions.DrawsAfterEndLocation);
            currentContext.RestoreState ();
        }
        */

        UIColor.Clear.SetFill();
        UIColor.Black.SetColor ();
    }

    public override UITableViewCell GetCell (UITableView tv)
    {
        var cell = base.GetCell (tv);
        cell.BackgroundColor = UIColor.Clear;
        cell.BackgroundView = new UIView(RectangleF.Empty) { BackgroundColor = UIColor.Clear };
        cell.SetNeedsDisplay();
        return cell;
    }

    public override float Height (RectangleF bounds)
    {
        return 90f;
    }

    public override void Selected (DialogViewController dvc, UITableView tableView, NSIndexPath path)
    {
        base.Selected (dvc, tableView, path);
        if (whenTapped != null)
            whenTapped(this.ev);
    }

}
}

I haven’t finished laying everything out correctly, because I’m running into a major problem – it always initially renders the background as black, with no rounded corners. However, after selecting the cell, and after releasing the selection, the cell looks fine, rounded corners and all. Any suggestions on what I need to do? I started out using a UIView with 2 internal classes, one for the cell and one for the view, and had the same luck, and thought switching to an OwnerDrawnElement would have fixed this.

Answer 1

I removed the OwnerDrawnElement as the base class and simply extended Element. I found an old blog entry from Miguel that was very helpful in solving this problem.

Some important points are to extend Element and implement IElementSizing. The GetCell returns an instance of MyDataCell that has a custom UIView that overrides the draw method. Also very important that the custom UIView sets its BackgroundColor to clear.

public class EventListingElement2 : Element , IElementSizing
{
    EventListingItem _ev;

    public EventListingElement2 (EventListingItem item) : base ("")
    {
        _ev = item;
    }

    public override MonoTouch.UIKit.UITableViewCell GetCell (MonoTouch.UIKit.UITableView tv)
    {
        MyDataCell ret = tv.DequeueReusableCell ("xcx") as MyDataCell;
        if (ret == null) {
            ret = new MyDataCell (_ev, "xcx");
        }
        else {
             ret.UpdateCell (_ev);
        }

        return ret;
    }

    public override void Selected (DialogViewController dvc, UITableView tableView, MonoTouch.Foundation.NSIndexPath path)
    {
        base.Selected (dvc, tableView, path);
    }

    #region IElementSizing implementation
    public float GetHeight (UITableView tableView, MonoTouch.Foundation.NSIndexPath indexPath)
    {
        return 90;
    }
    #endregion
}


public class MyDataView : UIView
{
    public MyDataView (EventListingItem myData)
    {
        Update (myData);
        this.BackgroundColor = UIColor.Clear;
    }

    public void Update (EventListingItem myData)
    {
        this._ev = myData;
        SetNeedsDisplay ();
    }

    EventListingItem _ev = new EventListingItem ();

    public override void Draw (RectangleF rect)
    {
        SizeF sizeF;
        float num = 0f;
        UIColor.FromRGB (36, 112, 216).SetColor ();
        string dateStr;
        if (_ev.StartTime.HasValue) {
            TimeSpan t = DateTime.Now - _ev.StartTime.Value;
            if (DateTime.Now.Day == _ev.StartTime.Value.Day) {
                dateStr = _ev.StartTime.Value.ToShortTimeString ();
            } else {
                if (t <= TimeSpan.FromHours (24.0)) {
                    dateStr = "Yesterday"; //.GetText ();
                } else {
                    if (t < TimeSpan.FromDays (6.0)) {
                        dateStr = _ev.StartTime.Value.ToString ("dddd");
                    } else {
                        dateStr = _ev.StartTime.Value.ToShortDateString ();
                    }
                }
            }
        } else {
            dateStr = "Date TBA";
        }
        // Setup counts
        string counts = "Staff & Volunteers: {0} reg, {1} in, {2} out\n";
        counts += "Students & Visitors: {3} reg, {4} in, {5} out";
        counts = string.Format (
            counts,
            _ev.CountOfStaffAndVolunteersRegistered,
            _ev.CountOfStaffAndVolunteersCheckedIn,
            _ev.CountOfStaffAndVolunteersCheckedOut,
            _ev.CountOfStudentsAndVisitorsRegistered,
            _ev.CountOfStudentsAndVisitorsCheckedIn,
            _ev.CountOfStudentsAndVisitorsCheckedOut
        );

        float left = 13f;

        // Draw
        sizeF = this.StringSize (dateStr, EventListingElement.EventTitleFont);
        float num2 = sizeF.Width + 21f + 5f;
        RectangleF dateFrame = new RectangleF (
            this.Bounds.Width - num2,
            6f,
            num2,
            14f
        );

        this.DrawString (
            dateStr,
            dateFrame,
            EventListingElement.DatesFont,
            UILineBreakMode.Clip,
            UITextAlignment.Left
        );
        float num3 = this.Bounds.Width - left;
        UIColor.Black.SetColor ();
        if (!string.IsNullOrWhiteSpace (_ev.EventType)) {
            this.DrawString (
                _ev.EventType,
                new PointF (left, 2f),
                num3 - num2,
                EventListingElement.EventTypeFont,
                UILineBreakMode.TailTruncation
            );
        }
        this.DrawString (
            _ev.Name,
            new PointF (left, 23f),
            num3 - left - num,
            EventListingElement.EventTitleFont,
            UILineBreakMode.TailTruncation
        );
        UIColor.Gray.SetColor ();
        this.DrawString (
            counts,
            new RectangleF (left, 40f, num3 - num, 34f),
            EventListingElement.CountsFont,
            UILineBreakMode.TailTruncation,
            UITextAlignment.Left
        );
    }

}

public class MyDataCell : UITableViewCell
{
    MyDataView _myDataView;

    public MyDataCell (EventListingItem myData, string identKey) : base (UITableViewCellStyle.Default, identKey)
    {
        _myDataView = new MyDataView (myData);
        ContentView.Add (_myDataView);
    }

    public override void LayoutSubviews ()
    {
        base.LayoutSubviews ();
        _myDataView.Frame = ContentView.Bounds;
        _myDataView.SetNeedsDisplay ();
    }

    public void UpdateCell (EventListingItem myData)
    {
        _myDataView.Update (myData);
    }
}