Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Possibility to make a path fill clickable

SteveRussellSteveRussell Member ✭✭✭
edited October 22 in Xamarin.Forms

I have an image, and have drawn paths over the image as there are different sections of the image that need to be clickable. I thought path was the best idea and managed to draw the paths on top of the image well, but now realised I cannot make them clickable. When I try to add a gesture recognizer, it makes the whole image clickable and not only inside that specific path. Is there an alternative solution or is there something I can do with my code?

Here is an image of the app (added colours to make the paths distinguishable. There is an image of a truck underneath):

Here is my XAML code:

<Grid HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="288.29001" HeightRequest="175.85268">
            <Image Source="Trailer.png"/>
            <Path Data="m 200.99554 0 c 44.73054 3.923731 44.73054 4.708478 44.73054 4.708478 l 0.78475 51.008509 -44.73054 -2.746613 z" StrokeThickness="0.265"
                  Stroke="Transparent" StrokeLineJoin="Miter" Fill="Red"/>
            <Path Data="m 246.51083 55.403743 41.59154 1.961867 0.78476 -48.654272 -42.76867 -4.316104 z" StrokeThickness="0.265"
                  Stroke="Transparent" StrokeLineJoin="Miter" Fill="CadetBlue"/>
            <Path Data="m 201.78029 52.65713 c 44.73054 2.746613 44.73054 2.746613 44.73054 2.746613 v 55.716987 l -44.33817 1.17712 z" StrokeThickness="0.265"
                  Stroke="Transparent" StrokeLineJoin="Miter" Fill="AliceBlue"/>
            <Path Data="m 246.51083 55.403743 41.59154 1.961867 1.12543 53.98883 -42.71697 -0.23371 v 0" StrokeThickness="0.265"
                  Stroke="Transparent" StrokeLineJoin="Miter" Fill="Honeydew"/>
            <Path Data="M 133.489494 16.586019 200.75519 0.349472 201.08654 75.03541 132.49542 85.307511 Z" StrokeThickness="0.265"
                  Stroke="Transparent" StrokeLineJoin="Miter" Fill="Pink"/>
            <Path Data="m 201.78029 52.65713 v 0 l 0.39237 59.64072 -69.345884 3.03288 -0.662718 -52.023219 -53.348651 8.94667 0.662716 -42.745196 52.685938 -12.591608 -3e-6 46.390134" StrokeThickness="0.265"
                  Stroke="Transparent" StrokeLineJoin="Miter" Fill="LightGray"/>
            <Path Data="m 78.815407 72.254179 0.662715 45.396061 53.348651 -2.31951 -0.662718 -52.023219" StrokeThickness="0.265"
                  Stroke="Transparent" StrokeLineJoin="Miter" Fill="Lime"/>
            <Path Data="m 79.478122 29.508986 -44.070627 9.940742 0.662715 39.762972 42.745197 -6.958521 v 0" StrokeThickness="0.265"
                  Stroke="Transparent" StrokeLineJoin="Miter" Fill="LemonChiffon"/>
            <Path Data="m 37.92979 79.2127 -0.331356 41.0884 43.739268 -2.65086 -0.662715 -45.396061 z" StrokeThickness="0.265"
                  Stroke="Transparent" StrokeLineJoin="Miter" Fill="Olive"/>
            <Path Data="m 36.592505 39.449728 -34.461242 7.952594 0.662716 38.106188 34.461241 -6.29581 -0.662715 -39.762972" StrokeThickness="0.265"
                  Stroke="Transparent" StrokeLineJoin="Miter" Fill="Orange"/>
            <Path Data="m 2.391031 85.50851 v 36.44938 l 34.129885 -1.65679 0.331356 -41.0884 z" StrokeThickness="0.265"
                  Stroke="Transparent" StrokeLineJoin="Miter" Fill="Black"/>
            <Path Data="m 132.826776 122.62061 -52.35458 2.65087 0.662718 31.14766 49.372355 -1.32544 z" StrokeThickness="0.265"
                  Stroke="Transparent" StrokeLineJoin="Miter" Fill="Blue"/>
            <Path Data="m 154.033696,117.54677 -19.550128,0.87842 -2.319507,56.21864 24.189142,-0.43921 -0.415971,-10.16078 z" StrokeThickness="0.265"
                  Stroke="Transparent" StrokeLineJoin="Miter" Fill="Green"/>
            <Path Data="m 177.56012 113.34258 -22.53235 0.99408 2.319507 45.72742 16.899263 -0.33136 z" StrokeThickness="0.265"/>
        </Grid>

Answers

  • LeonLuLeonLu Member, Xamarin Team Xamurai

    I met the same issue, due to the Path is preview version, Add GestureRecognizers to Path. it not worked as normal. You can open an issue in github.

    https://github.com/xamarin/Xamarin.Forms/issues

  • SteveRussellSteveRussell Member ✭✭✭
    Thank you for your reply. Do you know any alternative solutions for now for what I’m after?
  • LeonLuLeonLu Member, Xamarin Team Xamurai

    I test it with skiasharp's Path, I write two lines to make a test. It worked with `GestureRecognizers. However, you have to rewirte your layout by skiasharp

    Here is running gif.

    Here is related code.

    using System;
    
    using Xamarin.Forms;
    
    using SkiaSharp;
    using SkiaSharp.Views.Forms;
    
    namespace SkiaSharpFormsDemos.Paths
    {
        public class TwoTriangleContoursPage : ContentPage
        {
            public TwoTriangleContoursPage()
            {
                Title = "Two Triangle Contours";
                SKCanvasView canvasView2 = new SKCanvasView();
                canvasView2.PaintSurface += CanvasView2_PaintSurface; ;
    
                var tapGestureRecognizer2 = new TapGestureRecognizer();
                tapGestureRecognizer2.Tapped += async (s, e) =>
                {
                    await DisplayAlert("inof", "click blue", "Ok");
                };
                canvasView2.VerticalOptions = LayoutOptions.Center;
                canvasView2.HorizontalOptions = LayoutOptions.Center;
                canvasView2.GestureRecognizers.Add(tapGestureRecognizer2);
    
                //MyPath1.GestureRecognizers.Add(tapGestureRecognizer);
    
                SKCanvasView canvasView = new SKCanvasView();
                canvasView.PaintSurface += OnCanvasViewPaintSurface;
    
                var tapGestureRecognizer = new TapGestureRecognizer();
                tapGestureRecognizer.Tapped += async (s, e) =>
                {
                    await DisplayAlert("inof", "click Red", "Ok");
                };
    
                canvasView.GestureRecognizers.Add(tapGestureRecognizer);
    
                canvasView.VerticalOptions= LayoutOptions.Center;
                canvasView.HorizontalOptions = LayoutOptions.Center;
                StackLayout stackLayout = new StackLayout();
    
                stackLayout.Children.Add(canvasView);
                stackLayout.Children.Add(canvasView2);
                Content = stackLayout;
            }
    
            private void CanvasView2_PaintSurface(object sender, SKPaintSurfaceEventArgs args)
            {
                //throw new NotImplementedException();
    
                SKImageInfo info = args.Info;
                SKSurface surface = args.Surface;
                SKCanvas canvas = surface.Canvas;
    
                canvas.Clear();
    
                // Create the path
                SKPath path = new SKPath();
    
                // Define the first contour
                path.MoveTo(0.5f * info.Width, 0.6f * info.Height);
                path.LineTo(0.2f * info.Width, 0.9f * info.Height);
                path.LineTo(0.8f * info.Width, 0.9f * info.Height);
                path.Close();
    
    
    
                // Create two SKPaint objects
                SKPaint strokePaint = new SKPaint
                {
                    Style = SKPaintStyle.Stroke,
                    Color = SKColors.Blue,
                    StrokeWidth = 50
                };
    
    
    
                // Fill and stroke the path
               // canvas.DrawPath(path, fillPaint);
                canvas.DrawPath(path, strokePaint);
            }
    
            void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
            {
                SKImageInfo info = args.Info;
                SKSurface surface = args.Surface;
                SKCanvas canvas = surface.Canvas;
    
                canvas.Clear();
    
                // Create the path
                SKPath path = new SKPath();
    
                // Define the first contour
                path.MoveTo(0.5f * info.Width, 0.6f * info.Height);
                path.LineTo(0.2f * info.Width, 0.9f * info.Height);
                path.LineTo(0.8f * info.Width, 0.9f * info.Height);
                path.Close();
    
    
    
                // Create two SKPaint objects
                SKPaint strokePaint = new SKPaint
                {
                    Style = SKPaintStyle.Stroke,
                    Color = SKColors.Red,
                    StrokeWidth = 50
                };
    
                SKPaint fillPaint = new SKPaint
                {
                    Style = SKPaintStyle.Fill,
                    Color = SKColors.Red
                };
    
                // Fill and stroke the path
                canvas.DrawPath(path, fillPaint);
                canvas.DrawPath(path, strokePaint);
            }
        }
    }
    
    
  • SteveRussellSteveRussell Member ✭✭✭
    Thanks will try it out :smile:

    Is it still clickable outside of the triangles? If not then this is what I’m after :smiley:
  • LeonLuLeonLu Member, Xamarin Team Xamurai

    Is it still clickable outside of the triangles? If not then this is what I’m after

    Oh, I did not test this needs. Due to the SKCanvasView will draw an square canvas, when we draw the triangles, here a part of place of canvas is clickable.

Sign In or Register to comment.