3

I have created a view using MonoTouch.Dialog with a couple of sections. The sections require an image to be added before the other sections, however I am struggling to add the UIImage to the area before the first Section.

How would I go about this? I have highlighted where in the RootElement I would like the Image to go.

public void HomeScreen ()
    {
        var root = CreateRoot_HomeScreen ();

        var dv = new DialogViewController (root, true);
        navigation.PushViewController (dv, true);
    }

    RootElement CreateRoot_HomeScreen()
    {
        // Set up the ImageView with the Logo in it
        var logo = UIImage.FromFile("Images/logo.png");

        var imageView = new UIImageView(logo);

        return new RootElement("iEngage"){
            // The Image should go here
            new Section(){

            },
            new Section("")
            {
                new StyledStringElement ("Search", delegate{ Console.Write("Clicked"); })
            }
        };
    }
Darbio
  • 11,286
  • 12
  • 60
  • 100

1 Answers1

6

This sounds like the Headers and Footers from MonoTouch's Sample. Basically each Section you add has HeaderView property that you can set.

Your UIImageView could be assigned to this property which would insert your logo in the section.

E.g. (copy/pasted from DemoHeaderFooters.cs)

        var section = new Section () { 
            HeaderView = new UIImageView (UIImage.FromFile ("caltemplate.png")),
        };

Then you use this section in your code:

   return new RootElement("iEngage"){
        section,
        new Section("")
        {
            new StyledStringElement ("Search", delegate{ Console.Write("Clicked"); })
        }
    };
poupou
  • 43,413
  • 6
  • 77
  • 174
  • Thanks poupou. I tried this and I get a distorted image which is stretched/distorted to fit into the width and height of a Section. Can I specify these width and heights somewhere else? – Darbio Dec 08 '11 at 01:47
  • poupou, I worked out how to change the height by setting the frame property of the UIImageView - thanks. – Darbio Dec 08 '11 at 03:04
  • Glad you got it, don't hesitate to edit my answer and add this if you think it will help people! – poupou Dec 08 '11 at 12:51
  • Macropus - how did you get rid of the stretch in the UIImageView? This doesn't work for me... name.FooterView = new UIImageView(image) { Frame = new RectangleF(0, 0, 100, 100) }; I still get an image stretched across the whole table's width (although the height gets adjusted to what I specified). – Omri Gazitt May 26 '12 at 01:47
  • @OmriGazitt Check out this [Image Resizer for MonoTouch](http://dantes-andreea.blogspot.com/2011/08/monotouch-class-for-resize-maintaining.html) – Chuck Savage Jun 06 '12 at 14:57
  • @ChuckSavage thanks! I ended up fixing this myself by wrapping the UIImageView in a UIView, which is a trick that seems to work when the various iOS view subclasses (e.g. UIImageView, UIButton, etc) are getting sized by their parents. – Omri Gazitt Jun 07 '12 at 00:27