Search code examples
xamarin.formsframe

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


I am using xamarin. forms, I need the create a circle as following, As the colours are generic I am unable to use the image. Is there any way to get a circle as follows.

enter image description here

I tried:

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

Got output as: enter image description here


Solution

  • You can use the frame, but you must use the ClipToBounds property, with a Grid inside.

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

    Which results in:

    enter image description here