sahithi
sahithi

Reputation: 1089

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

Upvotes: 0

Views: 374

Answers (2)

kalyan
kalyan

Reputation: 91

Make Corner radius half of width/height request. Suppose widthrequest = 26 then heightrequest should be the same and Cornerradius should be 13(26/2);

Upvotes: 0

Bruno Caceiro
Bruno Caceiro

Reputation: 7199

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

Upvotes: 4

Related Questions