Xamarin Forms PathGeometry click event

Max 1 Reputation point
2020-11-23T15:13:22.15+00:00

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:
41953-image.png

<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:
41932-image.png

<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

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

4 answers

Sort by: Most helpful
  1. Cole Xia (Shanghai Wicresoft Co,.Ltd.) 6,751 Reputation points
    2020-11-25T11:11:18.55+00:00

    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 };  
               }  
    

    42457-111221.gif

    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.

    0 comments No comments

  2. Max 1 Reputation point
    2020-11-25T15:14:32.567+00:00

    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.

    0 comments No comments

  3. Cole Xia (Shanghai Wicresoft Co,.Ltd.) 6,751 Reputation points
    2020-11-26T03:40:26.143+00:00

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

    42903-capture.png

    0 comments No comments

  4. Max 1 Reputation point
    2020-11-26T17:00:44.907+00:00

    Hello,

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

    43094-scale-kopie.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>