如何使用 xamarin.js 创建具有两种颜色的圆圈表单控件

Question

我正在使用 xamarin。形式，我需要创建一个圆圈，如下所示，由于颜色是通用的，我无法使用图像。有什么方法可以得到如下的圆

我试过：

 <Grid ColumnSpacing="-10" HorizontalOptions="EndAndExpand">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="25"/>
                                                <ColumnDefinition Width="25"/>
                                            </Grid.ColumnDefinitions>
                                            <Frame CornerRadius="16" HeightRequest="25" WidthRequest="25" BackgroundColor="Red" Padding="0" Grid.Column="0" HasShadow="False"/>
                                            <Frame CornerRadius="16" HeightRequest="25" WidthRequest="25" BackgroundColor="Green" Padding="0" Grid.Column="1" HasShadow="False"/>
                                        </Grid>

得到的输出为：

Answer 1

你可以使用框架，但你必须使用 ClipToBounds 属性，里面有一个 Grid。

  <Frame HorizontalOptions="Center" VerticalOptions="Center"
                   HeightRequest="100" WidthRequest="100" CornerRadius="50" IsClippedToBounds="True" Padding="0">
                <Grid ColumnSpacing="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>

                    </Grid.ColumnDefinitions>

                      <BoxView BackgroundColor="Yellow"/>

                    <BoxView Grid.Column="1" BackgroundColor="Red"/>
                </Grid>
            </Frame>

这导致：

Answer 2

将圆角半径设为 width/height 请求的一半。假设 widthrequest = 26 那么 heightrequest 应该是相同的，Cornerradius 应该是 13(26/2)；

如何使用 xamarin.js 创建具有两种颜色的圆圈表单控件

How to create a circle with two colours using xamarin. forms controls

frame

xamarin.forms