c# - 如何在 Xamarin Forms 中设置 UI？

Question

大家好，我正在使用这个插件并实现了单选按钮，但问题是我无法根据要求设置 UI。如何根据和设置背景更改填充或边距？另外我想设置当前为粉红色的项目选择颜色。我怎样才能做到这一点。我的代码是：

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

电流输出：

预期输出：

Answer 1

主要问题是您试图对齐两个不相关的事物。对齐它的最简单方法是创建自己的单选组控件，而不是跨越 5 列，实际上每列创建一个单选按钮。

这样每个标签及其对应的单选按钮将完美对齐。

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