Xamarin forms set image icon in Hexagon shapes

Question

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?

Answer 1

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">
<Grid.Clip>
<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"/>
</Grid.Clip>
<Image Source="{services:ImageResource MyProject.Resources.Images.avatar_image.jpeg}" Aspect="AspectFit" VerticalOptions="Center"/>
</Grid>

Answer 2

[https://devblogs.microsoft.com/xamarin/xamarin-forms-shapes-and-paths/]

Refer this may help you.

Answer 3

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.

<Image  
    HorizontalOptions="Center"  
    VerticalOptions="Center"  
    WidthRequest="150"  
    HeightRequest="150"  
    Aspect="AspectFill"  
              
    Source="image path">  
  
    <Image.Clip>  
        <PathGeometry x:Name="myPath">  
            <PathGeometry.Figures>  
                <PathFigureCollection>  
                    <PathFigure IsClosed="True"  
                                    StartPoint="70,50">  
                        <PathFigure.Segments>  
                            <PathSegmentCollection>  
                                <LineSegment Point="60,67.32" />  
                                <LineSegment Point="40,67.32" />  
                                <LineSegment Point="30,50" />  
                                <LineSegment Point="40,32.67" />  
                                <LineSegment Point="60,32.67" />  
                            </PathSegmentCollection>  
                        </PathFigure.Segments>  
                    </PathFigure>  
                </PathFigureCollection>  
            </PathGeometry.Figures>  
        </PathGeometry>  
    </Image.Clip>  
</Image>  

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

<Image.Clip>  
    <PathGeometry x:Name="myPath" />  
</Image.Clip>  

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.