question

ChiragPokiya-7649 avatar image
0 Votes"
ChiragPokiya-7649 asked ChiragPokiya-7649 edited

Xamarin forms set image icon in Hexagon shapes

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


dotnet-xamarinforms
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

ChiragPokiya-7649 avatar image
0 Votes"
ChiragPokiya-7649 answered ChiragPokiya-7649 edited

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>

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Please find the Attached Image.


138188-138108-screenshot-2021-10-06-at-62521-pm.png


0 Votes 0 ·
Pilli-1546 avatar image
0 Votes"
Pilli-1546 answered Pilli-1546 edited
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

KyleWang-MSFT avatar image
0 Votes"
KyleWang-MSFT answered ChiragPokiya-7649 commented

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.

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi Kyle Wange!,

I try your both code it is working fine but the size of the hexagon can't fit the Image even I try the Image Aspect property change but the image not showing properly.138130-screenshot-2021-10-06-at-55656-pm.png


0 Votes 0 ·