Xamarin forms set image icon in Hexagon shapes

Chirag Pokiya 96 Reputation points

I want to sent user profile image icon shapes in hexagon shapes in Xamarin forms.
Please guide us how to do that for your reference please find the attached screenshot for your refrance?

A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
4,824 questions
No comments
{count} votes

Accepted answer
  1. Chirag Pokiya 96 Reputation points

    Finally, I got a solution!.
    This is a XAML demo that implements drawing a hexagon.

    <Grid BackgroundColor="Transparent" HeightRequest="31.25" WidthRequest="36" VerticalOptions="Center" HorizontalOptions="Center" Margin="15,0">
    <PathGeometry Figures="m0.32332,15.45189l7.64286,-15.33333l20.38096,0l7.64286,15.33333l-7.64286,15.33333l-20.38096,0l-7.64286,-15.33333z"/>
    <Image Source="{services:ImageResource MyProject.Resources.Images.avatar_image.jpeg}" Aspect="AspectFit" VerticalOptions="Center"/>

2 additional answers

Sort by: Most helpful
  1. Pilli 1 Reputation point


    Refer this may help you.

    No comments

  2. Kyle Wang 5,511 Reputation points

    Hi ChiragPokiya-7649,

    Welcome to our Microsoft Q&A platform!

    From Xamarin 5.0, you can use brand new "Shapes API" to set the "Clip" for Image. And to draw a hexagon, you can use linesegment which creates a line between two points.

    This is a XAML demo that implements drawing a fixed-size hexagon.

        Source="image path">  
            <PathGeometry x:Name="myPath">  
                        <PathFigure IsClosed="True"  
                                    <LineSegment Point="60,67.32" />  
                                    <LineSegment Point="40,67.32" />  
                                    <LineSegment Point="30,50" />  
                                    <LineSegment Point="40,32.67" />  
                                    <LineSegment Point="60,32.67" />  

    If you want to create a hexagon dynamically, you can set the "Clip" as follows and set a name for it.

        <PathGeometry x:Name="myPath" />  

    Now, modify ".xmal.cs" file.

    First, we need to use Math class to get all points' location.

    // center: (a,b)   
    // radius: r  
    int a = 50;  
    int b = 50;  
    int r = 40;  
    // save coordinates of all vertices  
    List<Point> points = new List<Point>();  
    for (int i = 0; i < 6; i++)  
        points.Add(new Point(((a + r * Math.Cos(2 * Math.PI * i / 6))), ((b + r * Math.Sin(2 * Math.PI * i / 6)))));  

    Then create "Figures" for "myPath",

    PathFigure f1 = new PathFigure  
        IsClosed = true,  
        StartPoint = points[0],  
        Segments = new PathSegmentCollection() { new LineSegment(points[1]),  
                                                 new LineSegment(points[2]),  
                                                 new LineSegment(points[3]),  
                                                 new LineSegment(points[4]),  
                                                 new LineSegment(points[5])}  
    myPath.Figures = new PathFigureCollection() { f1 };  

    Best Regards,
    Kyle Wang

    If the response is helpful, please click "Accept Answer" and upvote it.

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.