How can I create a custom styled EntryElement with MonoTouch.dialog? - c#

I am trying to create a custom entry element using monotouch.dialog. I understand how to subclass a StringElement to style my own string elements - see example below:
public class CustomStyledStringElementPlain : MonoTouch.Dialog.StyledStringElement
{
public CustomStyledStringElementPlain (string _caption, UIColor _backgroundcolour, UITextAlignment _alignment) : base(string.Empty,string.Empty)
{
TextColor = UIColor.White;
Font = UIFont.FromName ("Helvetica-Bold", 14f);
Caption = _caption;
Alignment = _alignment;
BackgroundColor = _backgroundcolour;
}
}
However, when subclassing EntryElement, I am not able to access properties for the BackgroundColor for example (which is the main thing I want to change!) Here is what I have so far... Any pointers or advice on how I could change the background color or otherwise style entry elements would be much appreciated!
public class CustomStyledEntryElementPlain : MonoTouch.Dialog.EntryElement
{
public CustomStyledEntryElementPlain (string _caption, UIColor _colour, UITextAlignment _alignment) : base(string.Empty,string.Empty)
{
ReturnKeyType = UIReturnKeyType.Done;
Caption = _caption;
}
}

To customize a MonoTouch.Dialog Element, you can override the GetCell method and set the appearance you want on the cell object. Something like this:
public override UITableViewCell GetCell(UITableView tableView) {
var cell = base.GetCell(tableView);
cell.BackgroundColor = _colour;
return cell;
}

Related

Adding custom cells in Xamarin

I have a UITableView which contains a prototype cell, with components added onto it in the storyboard, and referenced in my CustomCell.h & .m files, with the CustomCell.cs looking like this:
public partial class CustomCell : UITableViewCell
{
public CustomCell(IntPtr handle) : base(handle)
{
}
public UILabel Sender
{
get
{
return senderLabel;
}
set
{
senderLabel = value;
}
}
public UILabel Subject
{
get
{
return subjectLabel;
}
set
{
subjectLabel = value;
}
}
public UILabel Date
{
get
{
return timeLabel;
}
set
{
timeLabel = value;
}
}
public UILabel Preview
{
get
{
return previewLabel;
}
set
{
previewLabel = value;
}
}
public UILabel Initials
{
get
{
return initialsLabel;
}
set
{
initialsLabel = value;
}
}
}
This custom cell is then used in my table's source file, and its GetCell method, to try and add data to the table:
CustomCell cell = tableView.DequeueReusableCell("MailCell") as CustomCell;
cell.Sender.Text = TableItems[indexPath.Row].Sender;
cell.Subject.Text = TableItems[indexPath.Row].Subject;
cell.Preview.Text = TableItems[indexPath.Row].Preview;
cell.Date.Text = TableItems[indexPath.Row].Time;
cell.Initials.Text = "";
When you run the program and try and add the data to the table, it breaks on the second line of the GetCell method with a NullReferenceException, which implies that their is either no label in the cell, or that there is no cell to edit. My prototype's cell has an identifier of "MailCell", and I have tried making a full constructor in the class, which didn't work. I had previously programmatically added in the components into the table's cell's, and that worked perfectly and therefore I can be sure that my code to add the data to the source works as intended, and is not the problem. What else is there possible to test?
It breaks because it can not find an instance of you custom cell for the very first row.
DequeueReusableCell is looking for an instance if it can not find one it returns null
Change your code to:
CustomCell cell = tableView.DequeueReusableCell("MailCell") as CustomCell ?? new CustomCell();

C# TabControl, How create custom TabPages collection editor?

I have customized a TabPage, but found that there are problems as follows:
First, I Create two custom TabPage, It worked.
But there was a problem when I closed the document and then I reopened the document:
enter image description here
Look, TabPage becomes four, but I found the problem in the "designer.cs" document.
//
// blK_TabControl1
//
this.blK_TabControl1.Controls.Add(this.blK_TabPage6);
this.blK_TabControl1.Controls.Add(this.blK_TabPage7);
this.blK_TabControl1.Location = new System.Drawing.Point(4, 12);
this.blK_TabControl1.Name = "blK_TabControl1";
this.blK_TabControl1.SelectedIndex = 0;
this.blK_TabControl1.Size = new System.Drawing.Size(604, 196);
this.blK_TabControl1.TabIndex = 14;
this.blK_TabControl1.TabPages.AddRange(new System.Windows.Forms.TabPage[] {
this.blK_TabPage6,
this.blK_TabPage7});
After the normal TabControl add TabPage, there is no "TabPages.AddRange()" this code, how can I fix it?
Here is my code:
public class BLK_TabPageCollectionEditor : CollectionEditor
{
public BLK_TabPageCollectionEditor(Type type)
: base(type)
{
}
protected override bool CanSelectMultipleInstances()
{
return false;
}
protected override Type CreateCollectionItemType()
{
return typeof(BLK_TabPage);
}
protected override object CreateInstance(Type itemType)
{
BLK_TabPage tabPage = (BLK_TabPage)itemType.Assembly.CreateInstance(itemType.FullName);
IDesignerHost host = (IDesignerHost)this.GetService(typeof(IDesignerHost));
host.Container.Add(tabPage);
//this.Context.Container.Add(tabPage);
tabPage.Text = tabPage.Name;
return tabPage;
}
}
public class BLK_TabControl : TabControl
{
[EditorAttribute(typeof(BLK_TabPageCollectionEditor), typeof(UITypeEditor))]
[MergableProperty(false)]
public new TabControl.TabPageCollection TabPages
{
get
{
return base.TabPages;
}
}
}
Thanks in advance.
I have tried your code. Looks like everything is fine. But based on designer-generated code and your image description the only thing I can suggest is to hide serialization of TabPages property:
[DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
[EditorAttribute(typeof(BLK_TabPageCollectionEditor), typeof(UITypeEditor))]
[MergableProperty(false)]
public new TabControl.TabPageCollection TabPages
{
get
{
return base.TabPages;
}
}

Xamarin Forms - How to create custom render to give TableSection the default iOS Footer?

I want to add the default iOS footer to the tablesection in the tableview in Xamarin Forms. How can I go about doing this? I assume a customer renderer but I'm only reading that this can be done for Tableview?
To show an example, the following image is from Xcode storyboards when I enter the footer text on a static cell.
A Custom renderer is right, but you will have to use a custom renderer for the entire TableView. From there, you will need to override the TableViewModelRenderer and then the GetViewForFooter method in that ModelRenderer. Here's something that might help get you started:
public class FooterTableViewRenderer : TableViewRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<TableView> e)
{
base.OnElementChanged(e);
if (Control == null)
return;
var tableView = Control as UITableView;
var formsTableView = Element as TableView;
tableView.WeakDelegate = new CustomFooterTableViewModelRenderer (formsTableView);
}
private class CustomFooterTableViewModelRenderer : TableViewModelRenderer
{
public CustomFooterTableViewModelRenderer(TableView model) : base(model)
{
}
public override UIView GetViewForFooter(UITableView tableView, nint section)
{
return new UILabel()
{
Text = TitleForFooter(tableView, section), // or use some other text here
TextAlignment = UITextAlignment.Center
};
}
}
}
As mentioned in my comments below, you can alternatively override other methods in your TableViewModelRenderer:
public override nfloat GetHeightForFooter(UITableView tableView, nint section)
{
return 10;
}
public override string TitleForFooter(UITableView tableView, nint section)
{
return "This is the title for this given section";
}

Change the dropdown menu list item square

I coulnd find a proper name and phrase for this to explain, so here's a picture:
I'd like to change the white area's as shown above in the red circle to a desired color. I used the code below to change the other colors:
In the form itself:
menuStrip1.Renderer = new ToolStripProfessionalRenderer(new MenuStripColorTable());
The class:
class MenuStripColorTable : ProfessionalColorTable
{
private Color backColor = (Color) new ColorConverter().ConvertFromString("#333333");
//menu item background en border
public override Color MenuItemBorder
{
get{ return Color.White; }
}
public override Color MenuStripGradientBegin
{
get { return backColor; }
}
....
Any idea what I should override, or change?
By adding the folowing code I succesfully made teh white squares transparant:
Render class for menustrip:
public override Color ImageMarginGradientBegin
{
get { return Color.Transparent; }
}
public override Color ImageMarginGradientMiddle
{
get { return Color.Transparent; }
}
public override Color ImageMarginGradientEnd
{
get { return Color.Transparent; }
}
Altho the text isn't aligned to the left. But that's not that much of a problem. Credit to Franck aswell!

Monotouch dialog multiline element height not growing

I have a simple custom multiline element whose linebreak mode i've set to wordwrap, and lines property i set to 7. My text seems to wrap just fine, but the cell height stays the same, so the text extends the bounds of the cell. I've tried increasing the frame of the cell and overriding GetHeight, but it doesn't seem to work in either case. Also, it doesn't seem my GetHeight is even been called.
Any one face something similar? Or any ideas on what the issue might be?
public class DisclaimerMultilineElement : MultilineElement
{
public DisclaimerMultilineElement (string caption) : base(caption)
{
}
public DisclaimerMultilineElement (string caption, string value) : base(caption, value)
{
}
public DisclaimerMultilineElement (string caption, NSAction tapped) : base(caption, tapped)
{
}
public override float GetHeight (UITableView tableView, NSIndexPath indexPath)
{
var ht = base.GetHeight (tableView, indexPath);
//return base.GetHeight (tableView, indexPath);
return 400.0f;
}
public override UITableViewCell GetCell (MonoTouch.UIKit.UITableView tv)
{
UITableViewCell cell = base.GetCell (tv);
var frame = cell.Frame;
frame.Height = 300f;
//cell.Frame = new System.Drawing.RectangleF(frame.X, frame.Y, frame.Width, frame.Height);
cell.BackgroundColor = UIColor.Clear;
cell.TextLabel.Font = UIFont.BoldSystemFontOfSize (12);
cell.TextLabel.LineBreakMode = UILineBreakMode.WordWrap;
cell.TextLabel.Lines = 7;
cell.TextLabel.TextAlignment = UITextAlignment.Left;
cell.TextLabel.Text = Value;
return cell;
}
}
Make sure that UnevenRows is set to true in your Root element.
You need to override GetHeightForRow in your UITableViewSource and return the appropriate height.

Categories

Resources