CODEWITHSUNDEEP
xamlwindows-runtimewindows-phone-8.1winrt-xaml
Santhosh Kumar
Santhosh Kumar

Reputation: 199

How to fill an ellipse with different colors in Windows Phone 8.1 XAML?

am developing a WP8.1 app using xaml and C#. i want to have a button or ellipse filled with multi colors like the below picture. How can i achieve this except using pie chart control? I just need it in max height of 80 and width of 80 Can someone please help me out? Thanks in advanceenter image description here

Upvotes: 0

Views: 191

Answers (2)

asitis
asitis

Reputation: 3031

You use Arc shaped control to create this shape.

xmlns:es="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing"

           <Grid>
                 <es:Arc ArcThickness="1" ArcThicknessUnit="Percent" EndAngle="360" Fill="#FF82ECDD" HorizontalAlignment="Left" Height="293" Margin="0,0,0,-100" Stretch="None" StartAngle="61" UseLayoutRounding="False" VerticalAlignment="Top" Width="294"/>
                 <es:Arc ArcThickness="1" ArcThicknessUnit="Percent" EndAngle="360" Fill="#FF38B5E4" HorizontalAlignment="Left" Height="293" Margin="0,0,0,-100" Stretch="None" StartAngle="298" UseLayoutRounding="False" VerticalAlignment="Top" Width="294" RenderTransformOrigin="0.5,0.5">
                                    <es:Arc.RenderTransform>
                                        <CompositeTransform Rotation="61.609"/>
                 </es:Arc.RenderTransform>
                 </es:Arc>
                 <es:Arc ArcThickness="1" ArcThicknessUnit="Percent" EndAngle="360" Fill="#FF349AD4" HorizontalAlignment="Left" Height="293" Margin="0,0,0,-100" Stretch="None" StartAngle="179" UseLayoutRounding="False" VerticalAlignment="Top" Width="294" RenderTransformOrigin="0.5,0.5">
                 <es:Arc.RenderTransform>
                                        <CompositeTransform Rotation="-119.36"/>
                 </es:Arc.RenderTransform>
                 </es:Arc>
             </Grid>

enter image description here

Upvotes: 1

Chirag Shah
Chirag Shah

Reputation: 981

You can convert a single ellipse into path and then remove one point in the path to make it a semicircle. Have three semicircle rotated at proper angle to achieve something similar to the image above.

Upvotes: 0

Related Questions