Add shapes in Listview - xamarin form-CodePudding

I am using Xamarin.Form having android and ios project, I want to create add shapes in listview.

I search for same, we can use path class but dont know how to use it.

Please send me your solutions

Thanks

CodePudding user response：

There is path class you can use it. Path class have a data property. for example

<Path Data="M 10,100 L 100,100 100,50Z"
  Stroke="Black"
  Aspect="Uniform"
  HorizontalOptions="Start" />

The Data string begins with the move command, indicated by M, which establishes an absolute start point for the path. L is the line command, which creates a straight line from the start point to the specified end point. Z is the close command, which creates a line that connects the current point to the starting point.

Please review link given below, path is added in listview: https://xamarinuidesigns.blogspot.com/2021/12/listview-ui-design-2.html

CodePudding user response：

<Path Data="M 10,100 L 100,100 100,50Z"
  Stroke="Black"
  Aspect="Uniform"
  HorizontalOptions="Start" />

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/shapes/path

please review this link and you have any question then you can ask me?

CodePudding user response：

You could use the Composite geometries.

 <Path StrokeThickness="2" Fill="Orange">
                                <Path.Data>
                                    <GeometryGroup FillRule="Nonzero">
                                        <RectangleGeometry Rect="0,0,50,50" />
                                        <EllipseGeometry RadiusX="25"
                         RadiusY="25"
                         Center="50,25" />
                                    </GeometryGroup>
                                </Path.Data>
                            </Path>

Usage in Listview:

   <ListView ItemsSource="{Binding list}" RowHeight="60">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <Path StrokeThickness="2" Fill="Orange">
                                <Path.Data>
                                    <GeometryGroup FillRule="Nonzero">
                                        <RectangleGeometry Rect="0,0,50,50" />
                                        <EllipseGeometry RadiusX="25"
                         RadiusY="25"
                         Center="50,25" />
                                    </GeometryGroup>
                                </Path.Data>
                            </Path>
                            <Label Text="{Binding Name}"></Label>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

For more details of the Composite geometries, please check the link below. https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/shapes/geometries#composite-geometries