Xamarin Forms PathGeometry click event

Question

Hello, I have a problem with the Path element. I want to be able to click on a PathGeometry and scale it, unfortunately this is only possible with a Path element.
I also tried to convert it to its own Path element, but then the positions do not match and the graphics cannot both be scaled proportionally

Here's an example:

<Path  
        Aspect="Uniform"  
        Fill="#ff00933a"  
        Stroke="#ff00933a">  
        <Path.Data>  
            <GeometryGroup>  
                <PathGeometry Figures="F1 M 557.796,0.000 C 841.279,0.000 1071.087,229.808 1071.087,513.291 C 1071.087,796.774 841.279,1026.582 557.796,1026.582 C 274.313,1026.582 44.505,796.774 44.505,513.291 C 44.505,229.808 274.313,0.000 557.796,0.000 Z M 557.796,5.934 C 523.368,5.934 488.965,9.402 455.539,16.242 C 422.967,22.907 390.928,32.853 360.312,45.802 C 330.250,58.517 301.255,74.255 274.132,92.579 C 247.265,110.730 222.001,131.575 199.040,154.535 C 176.080,177.496 155.235,202.760 137.084,229.627 C 118.760,256.750 103.022,285.745 90.307,315.806 C 77.358,346.423 67.412,378.462 60.747,411.034 C 53.907,444.459 50.439,478.863 50.439,513.291 C 50.439,547.718 53.907,582.122 60.747,615.547 C 67.412,648.120 77.358,680.159 90.307,710.775 C 103.022,740.837 118.760,769.832 137.084,796.955 C 155.235,823.822 176.080,849.086 199.040,872.046 C 222.001,895.007 247.265,915.852 274.132,934.003 C 301.255,952.327 330.250,968.065 360.312,980.780 C 390.928,993.729 422.967,1003.675 455.539,1010.340 C 488.965,1017.180 523.368,1020.648 557.796,1020.648 C 592.223,1020.648 626.627,1017.180 660.052,1010.340 C 692.625,1003.675 724.664,993.729 755.280,980.780 C 785.342,968.065 814.337,952.327 841.460,934.003 C 868.327,915.852 893.591,895.007 916.551,872.046 C 939.512,849.086 960.357,823.822 978.508,796.955 C 996.832,769.832 1012.570,740.837 1025.284,710.775 C 1038.234,680.159 1048.180,648.120 1054.845,615.547 C 1061.685,582.122 1065.153,547.718 1065.153,513.291 C 1065.153,478.863 1061.685,444.459 1054.845,411.034 C 1048.180,378.462 1038.234,346.423 1025.284,315.806 C 1012.570,285.745 996.832,256.750 978.508,229.627 C 960.357,202.760 939.512,177.496 916.551,154.535 C 893.591,131.575 868.327,110.730 841.460,92.579 C 814.337,74.255 785.342,58.517 755.280,45.802 C 724.664,32.853 692.625,22.907 660.052,16.242 C 626.627,9.402 592.223,5.934 557.796,5.934" />  
  
                  <!--BUTTONS-->    
                <PathGeometry Figures="F1 M 743.741,694.993 L 885.979,837.231 C 967.545,754.139 1014.556,643.201 1017.524,526.803 L 816.064,526.803 C 813.225,589.799 787.511,649.598 743.741,694.993" />  
                <PathGeometry Figures="F1 M 296.563,526.803 L 95.104,526.803 C 98.071,643.201 145.082,754.140 226.649,837.231 L 368.887,694.993 C 325.118,649.597 299.405,589.798 296.566,526.803" />  
            </GeometryGroup>  
        </Path.Data>  
    </Path>  
  

Try this too:

<Grid>  
        <Path  
        Aspect="Uniform"  
        Fill="#ff00933a"  
        Stroke="#ff00933a" Data="F1 M 557.796,0.000 C 841.279,0.000 1071.087,229.808 1071.087,513.291 C 1071.087,796.774 841.279,1026.582 557.796,1026.582 C 274.313,1026.582 44.505,796.774 44.505,513.291 C 44.505,229.808 274.313,0.000 557.796,0.000 Z M 557.796,5.934 C 523.368,5.934 488.965,9.402 455.539,16.242 C 422.967,22.907 390.928,32.853 360.312,45.802 C 330.250,58.517 301.255,74.255 274.132,92.579 C 247.265,110.730 222.001,131.575 199.040,154.535 C 176.080,177.496 155.235,202.760 137.084,229.627 C 118.760,256.750 103.022,285.745 90.307,315.806 C 77.358,346.423 67.412,378.462 60.747,411.034 C 53.907,444.459 50.439,478.863 50.439,513.291 C 50.439,547.718 53.907,582.122 60.747,615.547 C 67.412,648.120 77.358,680.159 90.307,710.775 C 103.022,740.837 118.760,769.832 137.084,796.955 C 155.235,823.822 176.080,849.086 199.040,872.046 C 222.001,895.007 247.265,915.852 274.132,934.003 C 301.255,952.327 330.250,968.065 360.312,980.780 C 390.928,993.729 422.967,1003.675 455.539,1010.340 C 488.965,1017.180 523.368,1020.648 557.796,1020.648 C 592.223,1020.648 626.627,1017.180 660.052,1010.340 C 692.625,1003.675 724.664,993.729 755.280,980.780 C 785.342,968.065 814.337,952.327 841.460,934.003 C 868.327,915.852 893.591,895.007 916.551,872.046 C 939.512,849.086 960.357,823.822 978.508,796.955 C 996.832,769.832 1012.570,740.837 1025.284,710.775 C 1038.234,680.159 1048.180,648.120 1054.845,615.547 C 1061.685,582.122 1065.153,547.718 1065.153,513.291 C 1065.153,478.863 1061.685,444.459 1054.845,411.034 C 1048.180,378.462 1038.234,346.423 1025.284,315.806 C 1012.570,285.745 996.832,256.750 978.508,229.627 C 960.357,202.760 939.512,177.496 916.551,154.535 C 893.591,131.575 868.327,110.730 841.460,92.579 C 814.337,74.255 785.342,58.517 755.280,45.802 C 724.664,32.853 692.625,22.907 660.052,16.242 C 626.627,9.402 592.223,5.934 557.796,5.934" />  
  
        <Path  
        Aspect="Uniform"  
        Fill="#ff00933a"  
        Stroke="#ff00933a" Data="F1 M 743.741,694.993 L 885.979,837.231 C 967.545,754.139 1014.556,643.201 1017.524,526.803 L 816.064,526.803 C 813.225,589.799 787.511,649.598 743.741,694.993" />  
  
  
        <Path  
        Aspect="Uniform"  
        Fill="#ff00933a"  
        Stroke="#ff00933a" Data="F1 M 296.563,526.803 L 95.104,526.803 C 98.071,643.201 145.082,754.140 226.649,837.231 L 368.887,694.993 C 325.118,649.597 299.405,589.798 296.566,526.803" />  
  
    </Grid>  
  

Thank you
Sincerely yours
Max

Answer 1

Hello,

Welcome to Microsoft Q&A!

If I understand correctly , do you want to scale the shape by clicking on the PathGeometry ?

Since Path class inherits from View , so we could add TapGestureRecognizer on the path .

Xaml

   <Path  
            x:Name="path"  
            Aspect="Uniform"  
            Fill="#ff00933a"  
            Stroke="#ff00933a">  
           <Path.GestureRecognizers>  
               <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>  
           </Path.GestureRecognizers>  
           <Path.Data>  
               <GeometryGroup>  
                   <PathGeometry Figures="F1 M 557.796,0.000 C 841.279,0.000 1071.087,229.808 1071.087,513.291 C 1071.087,796.774 841.279,1026.582 557.796,1026.582 C 274.313,1026.582 44.505,796.774 44.505,513.291 C 44.505,229.808 274.313,0.000 557.796,0.000 Z M 557.796,5.934 C 523.368,5.934 488.965,9.402 455.539,16.242 C 422.967,22.907 390.928,32.853 360.312,45.802 C 330.250,58.517 301.255,74.255 274.132,92.579 C 247.265,110.730 222.001,131.575 199.040,154.535 C 176.080,177.496 155.235,202.760 137.084,229.627 C 118.760,256.750 103.022,285.745 90.307,315.806 C 77.358,346.423 67.412,378.462 60.747,411.034 C 53.907,444.459 50.439,478.863 50.439,513.291 C 50.439,547.718 53.907,582.122 60.747,615.547 C 67.412,648.120 77.358,680.159 90.307,710.775 C 103.022,740.837 118.760,769.832 137.084,796.955 C 155.235,823.822 176.080,849.086 199.040,872.046 C 222.001,895.007 247.265,915.852 274.132,934.003 C 301.255,952.327 330.250,968.065 360.312,980.780 C 390.928,993.729 422.967,1003.675 455.539,1010.340 C 488.965,1017.180 523.368,1020.648 557.796,1020.648 C 592.223,1020.648 626.627,1017.180 660.052,1010.340 C 692.625,1003.675 724.664,993.729 755.280,980.780 C 785.342,968.065 814.337,952.327 841.460,934.003 C 868.327,915.852 893.591,895.007 916.551,872.046 C 939.512,849.086 960.357,823.822 978.508,796.955 C 996.832,769.832 1012.570,740.837 1025.284,710.775 C 1038.234,680.159 1048.180,648.120 1054.845,615.547 C 1061.685,582.122 1065.153,547.718 1065.153,513.291 C 1065.153,478.863 1061.685,444.459 1054.845,411.034 C 1048.180,378.462 1038.234,346.423 1025.284,315.806 C 1012.570,285.745 996.832,256.750 978.508,229.627 C 960.357,202.760 939.512,177.496 916.551,154.535 C 893.591,131.575 868.327,110.730 841.460,92.579 C 814.337,74.255 785.342,58.517 755.280,45.802 C 724.664,32.853 692.625,22.907 660.052,16.242 C 626.627,9.402 592.223,5.934 557.796,5.934" />  

                   <!--BUTTONS-->  
                   <PathGeometry Figures="F1 M 743.741,694.993 L 885.979,837.231 C 967.545,754.139 1014.556,643.201 1017.524,526.803 L 816.064,526.803 C 813.225,589.799 787.511,649.598 743.741,694.993" />  
                   <PathGeometry Figures="F1 M 296.563,526.803 L 95.104,526.803 C 98.071,643.201 145.082,754.140 226.649,837.231 L 368.887,694.993 C 325.118,649.597 299.405,589.798 296.566,526.803" />  
               </GeometryGroup>  
           </Path.Data>  
       </Path>  

Code behind

   private void TapGestureRecognizer_Tapped(object sender, EventArgs e)  
           {  
               path.RenderTransform = new ScaleTransform() { ScaleX = 0.5, ScaleY = 0.5 };  
           }  

Thank you.

---

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.

Answer 2

Thank you for your prompt reply
Not quite. I just want to be able to click on one object and only animate that one, but that's only possible.

<Grid>
        <Path
            Aspect="Uniform"
            Data="F1 M 557.796,0.000 C 841.279,0.000 1071.087,229.808 1071.087,513.291 C 1071.087,796.774 841.279,1026.582 557.796,1026.582 C 274.313,1026.582 44.505,796.774 44.505,513.291 C 44.505,229.808 274.313,0.000 557.796,0.000 Z M 557.796,5.934 C 523.368,5.934 488.965,9.402 455.539,16.242 C 422.967,22.907 390.928,32.853 360.312,45.802 C 330.250,58.517 301.255,74.255 274.132,92.579 C 247.265,110.730 222.001,131.575 199.040,154.535 C 176.080,177.496 155.235,202.760 137.084,229.627 C 118.760,256.750 103.022,285.745 90.307,315.806 C 77.358,346.423 67.412,378.462 60.747,411.034 C 53.907,444.459 50.439,478.863 50.439,513.291 C 50.439,547.718 53.907,582.122 60.747,615.547 C 67.412,648.120 77.358,680.159 90.307,710.775 C 103.022,740.837 118.760,769.832 137.084,796.955 C 155.235,823.822 176.080,849.086 199.040,872.046 C 222.001,895.007 247.265,915.852 274.132,934.003 C 301.255,952.327 330.250,968.065 360.312,980.780 C 390.928,993.729 422.967,1003.675 455.539,1010.340 C 488.965,1017.180 523.368,1020.648 557.796,1020.648 C 592.223,1020.648 626.627,1017.180 660.052,1010.340 C 692.625,1003.675 724.664,993.729 755.280,980.780 C 785.342,968.065 814.337,952.327 841.460,934.003 C 868.327,915.852 893.591,895.007 916.551,872.046 C 939.512,849.086 960.357,823.822 978.508,796.955 C 996.832,769.832 1012.570,740.837 1025.284,710.775 C 1038.234,680.159 1048.180,648.120 1054.845,615.547 C 1061.685,582.122 1065.153,547.718 1065.153,513.291 C 1065.153,478.863 1061.685,444.459 1054.845,411.034 C 1048.180,378.462 1038.234,346.423 1025.284,315.806 C 1012.570,285.745 996.832,256.750 978.508,229.627 C 960.357,202.760 939.512,177.496 916.551,154.535 C 893.591,131.575 868.327,110.730 841.460,92.579 C 814.337,74.255 785.342,58.517 755.280,45.802 C 724.664,32.853 692.625,22.907 660.052,16.242 C 626.627,9.402 592.223,5.934 557.796,5.934"
            Fill="#ff00933a"
            Stroke="#ff00933a" />

        <Path
            x:Name="path"
            Aspect="Uniform"
Data="F1 M 743.741,694.993 L 885.979,837.231 C 967.545,754.139 1014.556,643.201 1017.524,526.803 L 816.064,526.803 C 813.225,589.799 787.511,649.598 743.741,694.993"
            Fill="#ff00933a"
            HorizontalOptions="End"
            Scale="0.5"
            Stroke="#ff00933a"
            VerticalOptions="End">
            <Path.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
            </Path.GestureRecognizers>
        </Path>


        <Path
            Aspect="Uniform"
Data="F1 M 296.563,526.803 L 95.104,526.803 C 98.071,643.201 145.082,754.140 226.649,837.231 L 368.887,694.993 C 325.118,649.597 299.405,589.798 296.566,526.803"
            Fill="#ff00933a"
            HorizontalOptions="Start"
            Scale="0.5"
            Stroke="#ff00933a"
            VerticalOptions="Start" >
            <Path.GestureRecognizers>
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
            </Path.GestureRecognizers>
        </Path>

    </Grid>

But then I have the problem with the alignment and have to move them all into the correct position and assign "HeightRequest" & "WidthRequest" which then no longer makes sense with the vector graphics.

If I can even align that and set VerticalOptions = "Fill" & HorizontalOptions = "Fill" to Fill then I have the problem that one button covers the other and cannot be clicked.
I really don't know how to solve this.

Answer 3

Use TranslationX and TranslationY to adjust position , use Scale to adjust its size .

Answer 4

Hello,

if I use (TranslationX, TranslationY, Scale) then the positions fit with another display size no longer see gif

 <Grid>  
        <Path  
            Aspect="Uniform"  
            Data=""  
            Fill="#ff00933a"  
            Stroke="#ff00933a" />  
  
        <Path  
            x:Name="path"  
            Aspect="Uniform"  
            BackgroundColor="Transparent"  
            Data=""  
            Fill="#ff00933a"  
            Scale="0.3"  
            Stroke="#ff00933a"  
            TranslationX="50"  
            TranslationY="0">  
            <Path.GestureRecognizers>  
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />  
            </Path.GestureRecognizers>  
        </Path>  
  
  
        <Path  
            Aspect="Uniform"  
            BackgroundColor="Transparent"  
            Data=""  
            Fill="#ff00933a"  
            Scale="0.3"  
            Stroke="#ff00933a"  
            TranslationX="-50"  
            TranslationY="0">  
            <Path.GestureRecognizers>  
                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />  
            </Path.GestureRecognizers>  
        </Path>  
    </Grid>