How to set UI in Xamarin Forms?

Question

Hello All I am using this Plugin and implemented Radio button but issue is I am not able to set UI as per requirement. How can I change padding or margin according and set background? Also I want to set Item selected color which is currently pink. How can I achieve this. My code is :

<ContentPage.Content>
    <StackLayout>
        <StackLayout>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20*"/>
                    <ColumnDefinition Width="12*"/>
                    <ColumnDefinition Width="12*"/>
                    <ColumnDefinition Width="12*"/>
                    <ColumnDefinition Width="12*"/>
                    <ColumnDefinition Width="12*"/>
                    <ColumnDefinition Width="20*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30*"/>
                    <RowDefinition Height="25"/>
                    <RowDefinition Height="20"/>
                </Grid.RowDefinitions>

                <Label Grid.ColumnSpan="7" Grid.Column="0" Grid.Row="0" Text="How do you rate the quality of food on offer?" VerticalTextAlignment="Center" FontFamily="SF-UI-Text-Regular" FontSize="24"/>
                <Label Grid.Column="0" Grid.Row="2" Text="Bad" VerticalTextAlignment="Center" HorizontalTextAlignment="End" FontFamily="SF-UI-Text-Regular" FontSize="15"/>
                <Label Grid.Column="1" Grid.Row="1" Text="1" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" FontFamily="SF-UI-Text-Regular" FontSize="15"/>
                <Label Grid.Column="2" Grid.Row="1" Text="2" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" FontFamily="SF-UI-Text-Regular" FontSize="15"/>
                <Label Grid.Column="3" Grid.Row="1" Text="3" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" FontFamily="SF-UI-Text-Regular" FontSize="15"/>
                <Label Grid.Column="4" Grid.Row="1" Text="4" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" FontFamily="SF-UI-Text-Regular" FontSize="15"/>
                <Label Grid.Column="5" Grid.Row="1" Text="5" VerticalTextAlignment="Center" HorizontalTextAlignment="Center" FontFamily="SF-UI-Text-Regular" FontSize="15"/>
                <BoxView BackgroundColor="#FAFAFA" Grid.ColumnSpan="5" Grid.Column="1" Grid.Row="2"/>
                <controls:BindableRadioGroup x:Name="ansPicker" Orientation="Horizontal"   Grid.ColumnSpan="5"                                                                 
                                 SelectedIndex="{Binding SelectedIndex}" Grid.Column="1" Grid.Row="2" MinimumHeightRequest="12" MinimumWidthRequest="12"
                                 TextColor="Black" BackgroundColor="#FAFAFA" HorizontalOptions="FillAndExpand"
                                 VerticalOptions="Start">

                </controls:BindableRadioGroup>
                <Label Grid.Column="6" Grid.Row="2" Text="Good" VerticalTextAlignment="Center" HorizontalTextAlignment="Start" FontFamily="SF-UI-Text-Regular" FontSize="15"/>
            </Grid>
            <Button x:Name="btn" Clicked="btn_click" Text="Click"></Button>
        </StackLayout>
    </StackLayout>
</ContentPage.Content>

Current Output:

Expected Output:

Answer 1

The main problem is that you are trying to align two unrelated things. The simplest way to align it is to create your own radio group control and instead of it spanning 5 columns, actually create a radio button per column.

This way each label and its corresponding radio button will be perfectly aligned.

-----
| n |
-----
| O |
-----