The first step to implement the resizable text cell is to add a custom table view cell to your iOS project. In the Add New Item dialog on Visual Studio or Xamarin Studio Mac, choose Crosslight iOS Table Cell template. For more information about available Crosslight project items, see Using Crosslight Item Templates. Make sure your table view controller has been configured to use the provided custom cell template. For step-by-step instructions, see Create Custom Cell Template for iOS UITableView.
Consider that you have added a new custom table view cell named EditableCell, your project should now have these files: EditableCell.cs, EditableCell.designer.cs, and EditableCell.xib files.
The next step is to add a text view to the EditableCell's interface definition which can be easily done via Xcode. Simply create an outlet named EditText for the text view in the Xcode designer such as shown below.
Finally, double click the EditableCell.cs file and change the derived class to UIResizableTextViewCell, and assign the actual text view control appropriately through the TextView override. See the following code.
With the above simple steps, you now have an intuitive, Reminder-style editable table view for your iOS apps. The following illustration shows the results of the code example above.
Binding Data to Edit Text
In the previous section, you have learnt how to create an editable text cell with automatic resizing capability. However, you will notice that the changes are not reflected to the model. To setup data binding between a model and the target edit text in the template, simply add a binding definition through ItemBindingDescription in the binding provider. See the following example.
As seen in the code above, the binding between the Name property of the model and the EditText control in the template is done through the AddBinding method of the item binding description. Notice that the binding is defined with a two-way direction on the text property which allows the changes in the user interface to be updated to the bound model automatically. To learn more about data binding capabilities in Crosslight, see Crosslight Data Binding Features.
Showing Detail Button on Editing
By default, the editable cell shows only a plain text view when user tapped on the cell for editing. However, it is also a common scenario in iOS to let user reveal more details about the edited item. The UIResizableTextViewCell component lets you easily achieve this scenario by showing a specific accessory on the editing cell similar to the user experience in Apple's Reminder app. Simply override the ResponderAccessory property of the custom cell class and return the UITableViewCellAccessory enumeration that you desire to show.
The following code shows how to show a detail button dynamically on the editing cell.