[FIXED] How can i use table view and picker as user input?

Issue

I would like to create a page like this: [1]: https://imgur.com/YreKQi3. But picker comes with underline and i also am not being able to display table separator line.

I tried to use tableview inside a frame but it didnt work. because frame's width is larger than table and seperator becomes invisible.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="KiaiDay.Views.PosLogin.ComoTeSentesPage"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             Title="Como te sentes?">
    <ContentPage.Content>
        <StackLayout Padding="30">
            <StackLayout HorizontalOptions="Center">
                <Label Text="Como te sentes hoje?" FontAttributes="Bold" FontSize="Medium" TextColor="Black"/>
            </StackLayout>
            <Frame CornerRadius="10" BackgroundColor="#ECECEC" BorderColor="LightGray" Padding="10" HeightRequest="200">
                <TableView Intent="Form" HeightRequest="200">
                    <TableRoot>
                        <TableSection>
                        <ViewCell>
                                <StackLayout HeightRequest="40">
                                    <StackLayout Orientation="Horizontal">
                                        <Label Text="Energia" TextColor="White"  VerticalOptions="Center" HorizontalOptions="Center" WidthRequest="500" Opacity="1"/>
                                        <Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>

                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>
                                <ViewCell>
                                <StackLayout HeightRequest="40">
                        <StackLayout Orientation="Horizontal" BackgroundColor="Blue">
                    <Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>

                    <Label Text="Mindset" TextColor="White"  VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>
                            <ViewCell>
                                <StackLayout HeightRequest="40">
                                    <StackLayout Orientation="Horizontal" BackgroundColor="Blue">
                                        <Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>

                                        <Label Text="Estratégia" TextColor="White"  VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>
                            <ViewCell>
                                <StackLayout HeightRequest="40">
                                    <StackLayout Orientation="Horizontal" BackgroundColor="Blue">
                                        <Picker ItemsSource="{Binding Opcoes}" TextColor="White" BackgroundColor="White" WidthRequest="50"/>

                                        <Label Text="Acção" TextColor="White"  VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>
                            <ViewCell>
                                <StackLayout HeightRequest="40">
                                    <StackLayout Orientation="Horizontal" BackgroundColor="Blue">
                                        <Picker ItemsSource="{Binding Opcoes}" BackgroundColor="White" WidthRequest="50"/>

                                        <Label Text="Conexão" TextColor="White" VerticalOptions="Center" HorizontalOptions="StartAndExpand" FontAttributes="Bold"/>
                                    </StackLayout>
                                </StackLayout>
                            </ViewCell>


                        </TableSection>
                    </TableRoot>
                </TableView>
            </Frame>

        </StackLayout>


    </ContentPage.Content>
</ContentPage>
´´´

Solution

I write a simple demo to achieve the requirement of the image in your answer, I use Frame and Grid:

<StackLayout Padding="30">
    <StackLayout HorizontalOptions="Center">
        <Label Text="Como te sentes hoje?" FontAttributes="Bold" FontSize="Medium" TextColor="Black"/>
    </StackLayout>
    <Frame CornerRadius="7" BackgroundColor="Gray" BorderColor="LightGray" Padding="3" HeightRequest="180" HasShadow="False">

        <Grid ColumnSpacing="1" RowSpacing="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Label Text="CVC Code:" BackgroundColor="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="0" Grid.Column="0" WidthRequest="100" HeightRequest="60"/>
            <local:BorderlessPicker BackgroundColor="White"   Grid.Row="0" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                <Picker.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                        <x:String>1321</x:String>
                        <x:String>3299</x:String>
                    </x:Array>
                </Picker.ItemsSource>
            </local:BorderlessPicker>


        <Label Text="Card No:" BackgroundColor="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="1" Grid.Column="0" WidthRequest="100" HeightRequest="60"/>
            <local:BorderlessPicker BackgroundColor="White"   Grid.Row="1" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                <Picker.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                        <x:String>1900</x:String>
                        <x:String>1233</x:String>
                    </x:Array>
                </Picker.ItemsSource>
            </local:BorderlessPicker>



            <Label Text="Expiry:" BackgroundColor="LightGray" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Grid.Row="2" Grid.Column="0" WidthRequest="100" HeightRequest="60"/>
            <local:BorderlessPicker BackgroundColor="White"   Grid.Row="2" Grid.Column="1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">

                <Picker.ItemsSource>
                    <x:Array Type="{x:Type x:String}">
                        <x:String>12/4</x:String>
                        <x:String>11/8</x:String>
                    </x:Array>
                </Picker.ItemsSource>
            </local:BorderlessPicker>


        </Grid>

    </Frame>

</StackLayout>

In code behind, I removed the border of picker by using custom renderer: AndroDevil mentioned in the comment: xamarin-tip-borderless-picker :

public class BorderlessPicker : Picker
    {
    }

Here is the result:

Answered By - nevermore

Answer Checked By - Candace Johnson (PHPFixing Volunteer)