Xamarin forms set image icon in Hexagon shapes

Chirag Pokiya 96 Reputation points
2021-05-24T05:37:34.427+00:00

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?
98957-screenshot-2021-05-24-at-103441-am.png

Xamarin
Xamarin
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
    2021-10-06T12:53:50.877+00:00

    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>


2 additional answers

Sort by: Most helpful
  1. Pilli 1 Reputation point
    2021-05-24T22:43:51.693+00:00

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

    Refer this may help you.

    No comments

  2. Kyle Wang 5,511 Reputation points
    2021-05-25T03:29:03.663+00:00

    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.