locked
How to set data of a Path line segment with bindable objects. RRS feed

  • Question

  • User395880 posted

    Hey I have this path line <Path StrokeThickness="3" Stroke="PaleGoldenrod" StrokeLineCap="Round" Data="{Binding route}" /> the binding route is a string with the data "M90,220 C50,150 50,100 80,80". If I simply put this data as a string on the data it will work like normal and render the line but if I use it with the bindable context it fails. More over I can not do it manually via code since the path.data is a geometry and does not take a string. Is there any way I can use this data from my object to the Path or do I need to make a geometry inside my class and set the points manually? Thanks in advance.

    Wednesday, July 22, 2020 11:06 AM

Answers

  • User371688 posted

    When we checked into the source sode of the property Data of Path,we will find

    [RenderWith(typeof(_PathRenderer))]
    public class Path : Shape
    {
        public static readonly BindableProperty DataProperty;
        public static readonly BindableProperty RenderTransformProperty;
    
        public Path();
    
        [TypeConverter(typeof(PathGeometryConverter))]
        public Geometry Data { get; set; }
        public Transform RenderTransform { get; set; }
    }
    

    So, the type of the binded data of Path's Data is Geometry.

    the binding route is a string with the data "M90,220 C50,150 50,100 80,80". If I simply put this data as a string on the data it will work like normal and render the line but if I use it with the bindable context it fails.

    For example, when you bind the data as follows, the paramter of Data seems like a string, but in fact it is not a string , it's type is Geometry.

      <Path Stroke="Black"
                  Aspect="Uniform"
                  HorizontalOptions="Start"
                  HeightRequest="100"
                  WidthRequest="100"
                  Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z M0,16.207977L11.904009,16.207977 11.904009,29.900984 0,28.657984z M11.904036,2.0979624L11.904036,14.202982 2.7656555E-05,14.202982 2.7656555E-05,3.3409645z M32.000058,0L32.000058,14.203001 13.909059,14.203001 13.909059,1.8890382z" />
    

    For more detail about Shapes 's Path, you can check: https://docs.microsoft.com/en-in/xamarin/xamarin-forms/user-interface/shapes/path

    When we check Create a Path,we will find that there are two techniques for setting the Data property:

    1.You can set a string value for Data in XAML, using path markup syntax. With this approach, the Path.Data value is consuming a serialization format for graphics. Typically, you don't edit this string value by hand after it's created. Instead, you use design tools to manipulate the data, and export it as a string fragment that's consumable by the Data property. 2.You can set the Data property to a Geometry object. This can be a specific Geometry object, or a GeometryGroup which acts as a container that can combine multiple geometry objects into a single object.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Thursday, July 23, 2020 6:58 AM