Placing a button in a Xamarin Forms TableSection
One of the most frustrating parts of learning to build code on the Xamarin platform is that there is no real central repository for finding answers to obscure questions. So, I thought I'd capture my journey here.
I found that firing an event from an entry cell in iOS isn't as intuitive as you'd think. After spending hours Googling for "Capturing the numeric keyboard dismiss event" or "Adding a Done button to an iOS numeric keyboard", I found a solution that worked for the Bellator app.
**I am not claiming this is the best or most elegant solution...just chronicling my journey into the mobile world**
My first pass attempt worked great on Android (Since it has the equivalent of the Done key on the numeric keyboard). My table section looked like this:
<TableSection Title="XP to ACP Converter"> <SwitchCell Text="Round Up?" On="true" OnChanged="Handle_RoundUpOnChanged"/> <SwitchCell Text="Slow Progression?" On="false" OnChanged="Handle_SlowProgressionOnChanged"/> <EntryCell Label="Current XP" Keyboard="Numeric" x:Name="EntryCurrentXP"
Completed="Handle_XPCompleted"/> </TableSection>
The problem with this approach is that the Completed even in the EntryCell is only fired when the Done button is pressed on the keyboard. The numeric keyboard on iOS has no such button and pressing the return key on my Macbook controlling the emulator simulates the Done key....So I released to the App store with a conversion tool that was unusable!
The approach I settled on was just adding a button to one of the cells in the TableSection. It turns out that one of the options for cells is a ViewCell element that lets us build custom controls within the TableSection.
Using this I modified my XAML to look like this:
<TableSection Title="XP to ACP Converter"> <SwitchCell Text="Round Up?" On="true" OnChanged="Handle_RoundUpOnChanged"/> <SwitchCell Text="Slow Progression?" On="false" OnChanged="Handle_SlowProgressionOnChanged"/> <EntryCell Label="Current XP" Keyboard="Numeric" x:Name="EntryCurrentXP"/>
<ViewCell>
<ViewCell.View>
<StackLayout>
<Button Text="Convert" Clicked="Handle_XPCompleted">
<Button.IsVisible>
<OnPlatform x:TypeArguments="x:Boolean"
Android="false"
iOS="true"/>
</Button.IsVisible>
</Button>
</StackLayout>
</ViewCell.View>
</ViewCell> </TableSection>
Taking a look at the individual elements:
We removed the Completed Event from the EntryCell
We added a button that fires the Handle_XPCompleted event when it is pressed.
Since the Android Keyboard has a Done key, we only show the button on iOS.
And voila! Problem solved, even if it is somewhat inelegant. In a perfect world I'll figure out how to fire the Handle_XPCompleted when the keyboard is dismissed or better yet, actually get adding a Done button to the iOS keyboard to work!
Here is what the XAML translates to (Before and After):
