Search code examples
iosxamarin.formstableview

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


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.

TableView

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>

Solution

  • 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:

    enter image description here