Is my TableView in Xamarin.Forms supposed to be gray? - ios

Question

Quick question:
Is the TableView in Xamarin.Forms supposed to be all grey like below picture? I was expecting a layout similar to what I'm getting, but with white backgrounds for individual TableSections.
Is this because of iOS 14, something I'm doing wrong or maybe the simulator? I'm also experiencing lack of DatePicker and TimePicker support - works on android but not on iPhone simulator, and I was told this issue was the simulator.
I haven't been able to test it on a real device.
I'm posting my code for the Tableview XAML below.
XAML code
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage
Title="{Binding FullName}"
xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ContactBook.ContactsDetailPage">
<TableView Intent="Form">
<TableRoot>
<TableSection Title="Personal Info">
<EntryCell Label="First Name" Text="{Binding FirstName}" Keyboard="Text" />
<EntryCell Label ="Last Name" Text="{Binding LastName}" Keyboard="Text"/>
</TableSection>
<TableSection Title="Contact Info">
<EntryCell Label="Phone" Text="{Binding Phone}" Keyboard="Telephone"/>
<EntryCell Label="Email" Text="{Binding Email}" Keyboard="Email" />
</TableSection>
<TableSection Title="Other">
<SwitchCell Text="Blocked" On="{Binding IsBlocked}" />
</TableSection>
<TableSection>
<ViewCell>
<Button Text="Save" HorizontalOptions="FillAndExpand" Clicked="Button_Clicked"/>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
</ContentPage>

Answer 1

You could use ViewCell and StackLayout to achieve that, becuause xxxCell not contain a BackgroundColor pproperty.
For example, code as follows:
<TableSection Title="Contact Info">
<ViewCell>
<StackLayout Orientation="Horizontal" BackgroundColor="White">
<Label Margin="10,0,0,0" Text="Phone" VerticalOptions="Center"/>
<Entry Text="Binding Phone" HorizontalOptions="FillAndExpand" Keyboard="Telephone"/>
</StackLayout>
</ViewCell>
<ViewCell>
<StackLayout Orientation="Horizontal" BackgroundColor="White">
<Label Margin="10,0,0,0" Text="Email" VerticalOptions="Center" />
<Entry Text="Binding Email" HorizontalOptions="FillAndExpand" Keyboard="Email" />
</StackLayout>
</ViewCell>
</TableSection>
<TableSection Title="Other" >
<ViewCell>
<StackLayout Orientation="Horizontal" BackgroundColor="White">
<Label Margin="15,0,0,0" Text="Blocked" VerticalOptions="Center"/>
<Switch Margin="280,0,0,0" />
</StackLayout>
</ViewCell>
</TableSection>
<TableSection>
<ViewCell>
<StackLayout BackgroundColor="White">
<Button Text="Save"
HorizontalOptions="FillAndExpand"
/>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
The effect:

Answer 2

TableView has a BackgroundColor property that lets you set the background color you want. So if you want it to match the rest of your page, you can do
<TableView Intent="Form" BackgroundColor="White">