iOS/maccatalyst Cell Accessories

[ethanl21]

Apple's Human Interface Guidelines for iOS/iPadOS describe using a UITableViewCellAccessory on the right side of a UITableViewCell to describe its content. It looks like this is possible using Xamarin.iOS, but I was unable to find a way to add a disclosure indicator to a .NET MAUI Cell.

I would like to at least add a disclosure indicator chevron to a Cell to indicate that tapping it will navigate away from the current page. I think adding a method to Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific similar to how Cell.SetDefaultBackgroundColor is already implemented seems like the most intuitive way to do so.

Related:
https://developer.apple.com/design/human-interface-guidelines/components/layout-and-organization/lists-and-tables
https://developer.apple.com/documentation/uikit/uitableviewcell/accessorytype/disclosureindicator
https://learn.microsoft.com/en-us/dotnet/maui/ios/platform-specifics/cell-background-color?view=net-maui-7.0
https://learn.microsoft.com/en-us/xamarin/ios/user-interface/controls/tables/customizing-table-appearance

[ethanl21]

I was able to add a disclosure indicator to Cell controls by adding the following to my project:

// MauiProgram.cs

#if IOS || MACCATALYST
using UIKit;
#endif

// ...

 #if IOS || MACCATALYST
        CellRenderer.Mapper.AppendToMapping("AddDisclosureFlag",(mapper, view) =>
        {
            if (view.StyleId == "disclosure")
            {
                mapper.PlatformView.Accessory = UITableViewCellAccessory.DisclosureIndicator;
            }
        });
#endif

/...

<TableView Intent="Menu">
            <TableSection Title="Disclosure Cell Test">
                <TextCell Text="Cell With Disclosure Chevron" StyleId="disclosure" />
            </TableSection>
        </TableView>

🎉

...though I'm fairly certain this isn't the ideal way to do so. It would be really convenient if there were a way to have this set automatically when a Cell binds to a Command, but I've been unable to figure out how to do that so far. I also haven't yet tried to set a UITableViewCell's Accessory to a Checkmark, DetailButton, or DetailDisclosureButton.

[FunThom]

Hi @ethanl21,
your described solution worked for me.
Even in the current version of .NET MAUI I were not able to add a disclosure indicator to a TextCell in another way.
Did you find another solution in the meantime?

Best regards,
Tom

[steven-pearson]

Yeah, that's the way I've done it. Moved my custom renderer code to AppDelegate

        Microsoft.Maui.Controls.Handlers.Compatibility.CellRenderer.Mapper.AppendToMapping("RenderAccessory",
        (renderer, cell) =>
        {
            UITableViewCell c = renderer.PlatformView;
            switch (cell.StyleId)
            {
                case "checkmark":
                    c.Accessory = UITableViewCellAccessory.Checkmark;
                    break;
                case "detail-button":
                    c.Accessory = UITableViewCellAccessory.DetailButton;
                    break;
                case "detail-disclosure-button":
                    c.Accessory = UITableViewCellAccessory.DetailDisclosureButton;
                    break;
                case "disclosure":
                    c.Accessory = UITableViewCellAccessory.DisclosureIndicator;
                    break;
                default:
                    c.Accessory = UITableViewCellAccessory.None;
                    break;
            }
        });