Skip to end of metadata
Go to start of metadata

In addition to cell customization, Crosslight also adds support for section header and footer customization in a table view. All you have to do is providing a custom XIB and specify it in the table view, Crosslight takes care the rest – including calculating the height for you and doing the other low-level operations behind the scene.

This sample demonstrates how you can easily customize the group header samples to match the app's branding. It is expected that you have successfully displayed a list of data and create custom cell template for iOS UITableView before continuing.

On this page:

Create a Custom Header Template from Item Template

Customizing item styles in iOS and Android require fairly large number of code and involve a number of steps such as updating the view’s elements from different entry points and synchronize model and view manually. Crosslight provides dozens of item templates to help you quickly create commonly used Crosslight project items. The Crosslight item templates are readily available from Visual Studio IDE. For more information, see Using Crosslight Item Templates.

To add a custom header template, simply add a new project item from Visual Studio. In the dialog box, choose Crosslight iOS View for iPhone.

The following shows the class created by the item template.

Create View for Custom Group Header

Next, create a view (also known as interface definition typically with .xib extension). Double click the CustomGroupHeader.xib file in Xamarin Studio and it will open up Xcode. In this sample, two Label controls will be added.

Set the outlet of left Label control to CategoryName and the outlet of right Label control to CountLabel.

The custom group header view should derive from UITableViewHeaderFooterView., so simply change the CustomGroupHeader class to UITableViewHeaderFooterView such as shown below.

Override SectionHeaderTemplate

Once you have the custom group header template ready (both the class and the view), the final step is overriding SectionHeaderTemplate in UITableViewController that consumes the custom group header. Crosslight provides a class called UIViewTemplate Class which you can instantiate and pass in the UINib instance that represents the custom cell template.

Configure Binding in Binding Provider

After creating our own custom group header template in the view level, then bind those Label controls using the BindingProvider Class that contains the definition for the view bindings.

The following example shows how to configure the binding for the above custom group header templates.

After saving all the changes, you should see the result similar to the following image.

Samples

The sample code for this article can be downloaded from our Git server: http://git.intersoftpt.com/projects/CROS-SUPP/repos/ios-custom-group-header/browse/.