在 ListView Xamarin Forms 中创建虚线

Question

如何创建虚线以用作列表视图的分隔符？

例子：

Answer 1

您可以通过如下所示的渲染器实现，

// PCL
public class BoxViewExt : BoxView
{

}

// Android
public class BoxViewExtRenderer : BoxRenderer
{
    public BoxViewExtRenderer(Context context) : base(context)
    {
    }

    protected override void OnDraw(Canvas canvas)
    {
        base.OnDraw(canvas);

        var paint = new Paint { StrokeWidth = 2, AntiAlias = true };
        paint.SetStyle(Paint.Style.Stroke);
        paint.SetPathEffect(new DashPathEffect(new[] { 6 * this.Context.Resources.DisplayMetrics.Density, 2 * this.Context.Resources.DisplayMetrics.Density }, 0));

        var p = new Path();
        p.LineTo(canvas.Width, 0);
        canvas.DrawPath(p, paint);
    }
}

Answer 2

您可以在列表视图的自定义渲染器中执行此操作。

MyListViewRenderer.cs：

public class MyListViewRenderer : ListViewRenderer
{
    Context ctx;
    public MyListViewRenderer(Context context) : base(context)
    {
        ctx = context;
    }
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)
    {
        base.OnElementChanged(e);
        if (Control != null)
        {
            //var listView = Control as Android.Widget.ListView;
            Drawable drawable = Resources.GetDrawable(Resource.Drawable.DashedLines);               

            Control.DividerHeight = 20;
            Control.Divider = drawable;
            Control.SetLayerType(LayerType.Software,null);
        }
    }
}

Xml：

<ContentPage.Content>
    <local:MyListView SeparatorVisibility="None">
        <local:MyListView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>mono</x:String>
                <x:String>monodroid</x:String>
                <x:String>monotouch</x:String>
                <x:String>monorail</x:String>
                <x:String>monodevelop</x:String>
                <x:String>monotone</x:String>
               <x:String>monopoly</x:String>
                <x:String>monomodal</x:String>
                <x:String>mononucleosis</x:String>
            </x:Array>
        </local:MyListView.ItemsSource>
    </local:MyListView>

结果：

我已经将项目上传到了 GitHub，您可以从 ListViewDashedLinesDemo 文件夹下载以供参考。 https://github.com/WendyZang/Test.git

Answer 3

您可以使用 SaskiSharp 和一个小的自定义视图来完成。 此解决方案不需要自定义渲染器。

1. 将以下 nuget 包安装到 Xamarin Forms 项目

   SkiaSharp SkiaSharp.Views.Forms

2. 创建一个内容视图

   public class DashedLineView : ContentView { public Color LineColor { get; set; } = Color.Black; public float DashSize { get; set; } = 20; public float WhiteSize { get; set; } = 20; public float Phase { get; set; } = 0; public DashedLineView() { Content = new SKCanvasView(); ((SKCanvasView)Content).PaintSurface += Canvas_PaintSurface; } private void Canvas_PaintSurface(object sender, SKPaintSurfaceEventArgs args) { SKImageInfo info = args.Info; SKSurface surface = args.Surface; SKCanvas canvas = surface.Canvas; canvas.Clear(); SKPaint paint = new SKPaint { Style = SKPaintStyle.Stroke, Color = LineColor.ToSKColor(), StrokeWidth = HeightRequest > 0 ? (float)HeightRequest : (float)WidthRequest, StrokeCap = SKStrokeCap.Butt, PathEffect = SKPathEffect.CreateDash(new float[] { DashSize, WhiteSize }, Phase) }; SKPath path = new SKPath(); if (HeightRequest > 0) { // Horizontal path.MoveTo(0, 0); path.LineTo(info.Width, 0); } else { // Vertikal path.MoveTo(0, 0); path.LineTo(0, info.Height); } canvas.DrawPath(path, paint); } }

3. 在 XAML 中使用它

   <views:DashedLineView VerticalOptions="Center" HorizontalOptions="Fill" LineColor="#f60" HeightRequest="10" DashSize="30" WhiteSize="50" />

Answer 4

Xamarin.Forms.Forms.SetFlags(new string[] { "Brush_Experimental", "Shapes_Experimental" });
                     

<Line Grid.Row="0"
      Grid.ColumnSpan="2"
      X2="10"
      Stroke="Red"
      StrokeThickness="0.8" 
      StrokeDashArray="1,8"
      Aspect="UniformToFill"
      HorizontalOptions="FillAndExpand"
      VerticalOptions="End"/>