Is there an easy way to make column cell values be vertically aligned to the top? Basically, I have one column where the values wrap, so a row could end up being very tall...off the screen tall. That means the other values on that row would be in the middle vertically, so the user has to scroll way down to see them. I would like to set all my columns to vertically align values to the top, but don't see that on IGGridViewColumnDefinition, just "textAlignment", which is horizontal alignment. Thanks!
Hi Michael,
In iOS a UILabel doesn't have a vertical textAlignment property. It always align text in the middle of the UILabel. The way you control positioning on the vertical axis, is by positioning the label and having it fit to the container.
You should be able to do this still with minimal code changes though. You would basically just create a custom cell:
public partial class CustomCell : IGGridViewCell { public override void SetupSize (SizeF size) { base.SetupSize (size); this.TextLabel.SizeToFit (); } }
Then all you need to do is tell the grid to use your cell by default:
grid.RegisterClassForCellReuse (new MonoTouch.ObjCRuntime.Class ("CustomCell"), "Cell");
Hope this helps,
-SteveZ
Steve,
This seemed to work, but if you flick around to scroll up/down fast, some cell text actually start to disappear (seemingly random), so I had to revert the SizeToFit for now. Any idea what could be going on with that? Thanks!
I tried that, but got the same result. I'll paste in our whole custom cell class, in case we're just doing it wrong.
public class CustomCell : IGGridViewCell { UIView _rightColumnSeparator; /// <summary> /// Gets a value indicating whether the right column separator is shown. /// </summary> public bool ShowRightColumnSeparator { get; private set; } /// <summary> /// Initializes a new instance of the <see cref="CustomCell"/> class. /// </summary> /// <param name="handle">The handle.</param> public CustomCell(IntPtr handle) : base(handle) { ShowRightColumnSeparator = true; CreateCellControls(); } /// <summary> /// Creates the cell controls. /// </summary> private void CreateCellControls() { _rightColumnSeparator = new UIView(); this.AddSubview(_rightColumnSeparator); } /// <summary> /// When the cell is going to get used/reused. /// </summary> public override void CellAttached() { base.CellAttached(); // Don't show separator if this is the right most column ShowRightColumnSeparator = !GridHelper.IsCellInRightMostColumn(this); if (ShowRightColumnSeparator) { _rightColumnSeparator.Hidden = false; _rightColumnSeparator.BackgroundColor = this.GridView.Theme.RowSeparatorColor; } else { _rightColumnSeparator.Hidden = true; } // This will cause text to vertically align to the top. Note: this has to go in both CellAttached and SetupSize. this.TextLabel.SizeToFit(); } /// <summary> /// Setups the size of the cell. /// </summary> /// <param name="size">Cell size.</param> public override void SetupSize(SizeF size) { float borderWidth = this.GridView.Theme.RowSeparatorHeight; float newWidth = size.Width - borderWidth; base.SetupSize(new SizeF(newWidth, size.Height)); // This will cause text to vertically align to the top. Note: this has to go in both CellAttached and SetupSize. this.TextLabel.SizeToFit(); if (ShowRightColumnSeparator) { _rightColumnSeparator.Frame = new RectangleF(newWidth, 0.0f, borderWidth, size.Height); } } }
Actually, yea i have an idea.
SetupSize() actually only gets called when a cell's size changes. Since cells are reused, a cell's content could change, while its size might not, so the setupSize wouldn't get called.
This is simply an error on my part :)
You should also call SizeToFit on the override for CellAttached.