Monotouch Dialog: Styling Elements

Question

I'm using Dialog and would like to style all my cells. I have a background image, and in the samples I can see how you can use a StyledStringElement to use that image.

However, in real use some sections use other elements. For example the last element in one section is a RootElement - but it has no BackgroundUri property to set. The same would go for boolean elements.

I found this question - What's the best way to customise all monotouch.dialog TableViewCells to the same style (Background, etc..)? which is a similar question a year and a half back. The UIAppearance styling mentioned does exist for tablecells but does not work with MTDialog. krtrego's answer to this In monotouch.dialog can RootElement be easily styled? question purports to do the job, but no styling occurred when I implemented it.

Is there now any improved way to do this? Implementing my own 'styled' versions of these other control types would be a big effort and looking at the styledstringelement this is beyond my current skill level.

Here's an example of what I'd like to achieve (the shadow below the 'tags' cell, but the element is actually a RootElement with a set of radio options beneath it). Removing the default grey lines etc is easy enough, but putting a subtle shadow on the bottom cell of each section is what I cannot work out.

Many thanks!

PS. With a normal MTDialog screen with cell backgrounds and borders removed, there is a subtle white shadow/line beneath each section as it is. If I could just recolour that I'd be a long way to where I want to be...

enter image description here

In my experience with mt.dialog, I had to pretty much subclass everything I needed customized. — Candide, Jan 14 '13 at 08:04

score 2 · Answer 1 · answered Aug 13 '13 at 14:00

Subclassing the element will let you style it via overriding the GetCell method, but that gets pretty tedious. The best solution I have come across is to to make a custom DialogViewController by subclassing it, and overriding the CreateSizingSource method with your own SizingSource and GetCell() methods using the images you want for each scenario of a cell (top, middle, bottom, alone). Its a bit of code and my example wont handle uneven rows, but it is the only solution I have seen that does not modify the MT.D source code.

Here is what you would override in your DialogViewController subclass:

public override Source CreateSizingSource(bool unevenRows)
{
     return new CustomSource(unevenRows);
}

Then you would make a custom source class:

public class CustomSource : Source
{
    public CustomSource(DialogViewController parent) : base (parent)
    {

    }

    public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
    {
        var theCell = base.GetCell(tableView, indexPath);

        if (RowsInSection(tableView, indexPath.Section) == 1) //use one with top and bottom rounded
        {
            theCell.BackgroundView = new UIImageView(Theme.CellBackgroundFull);
            theCell.SelectedBackgroundView = new UIImageView(Theme.CellBackgroundFullActive); 

        } else if (indexPath.Row == 0) //top only
        {
            theCell.BackgroundView = new UIImageView(Theme.CellBackgroundTop);
            theCell.SelectedBackgroundView = new UIImageView(Theme.CellBackgroundTopActive); 

        } else if (indexPath.Row+1 == RowsInSection(tableView, indexPath.Section)) // bottom only
        {
            theCell.BackgroundView = new UIImageView(Theme.CellBackgroundBottom);
            theCell.SelectedBackgroundView = new UIImageView(Theme.CellBackgroundBottomActive); 
        } else //anything in the middle
        {
            theCell.BackgroundView = new UIImageView(Theme.CellBackgroundMiddle);
            theCell.SelectedBackgroundView = new UIImageView(Theme.CellBackgroundMiddleActive); 
        }
        return theCell;
    }
}

Theme is just a static class that returns UIImages, similar to the example Field Service app from Xamarin. So here I have made 8 images total. 4 to represent the top, middle, bottom and alone for an element. Each has different rounded corners to appear correct. And then a "highlighted" version of each for when its touched.

The big drawback here is you have to do this for every different styled controller you would need. If you are ok with modifying the MT.D source code, you can get a different solution that will allow you to control it at the Section level here: http://fastchicken.co.nz/2012/05/20/earnest-debrief-visual-styles-in-ios-apps-uiappearence-custom-sections-in-monotouch-dialog/

Which has the same effect, but you only need to subclass Section for each different style, which makes including multiple styles in one Root easier. A pull request was made for this change, but Miguel favored the first solution instead, seen here: https://github.com/migueldeicaza/MonoTouch.Dialog/pull/180

Monotouch Dialog: Styling Elements

1 Answers1