使用SkiaSharp的Carouselview

Question

我正在尝试设置一个包含SkiaSharp的轮播视图的模板。我不能在skia:SKCanvasView上设置源，所以我创建了一个模板视图，但是现在当我将carousel视图绑定到ImageResults时什么也没有显示，但是我不知道如何将模板添加到列表中？

public List<Resultlist> ImageResults = new List<Resultlist>();
      public  class Resultlist
        {
            public string Desc { get; set; }
    
            public string Value { get; set; }
    
            public  SKBitmap foto { get; set; }
        }

<CarouselView Margin="0,0,0,0" HorizontalScrollBarVisibility="Never"  Style="{StaticResource ImageResultCarousel}" 
                ItemsSource="{Binding ImageResults, Mode=TwoWay}" 
                 BackgroundColor="{DynamicResource PictureBackground}"
                                   >
                            <CarouselView.ItemTemplate >
                                <DataTemplate>
                                    <resultlist:template></resultlist:template>
                                </DataTemplate>
                            </CarouselView.ItemTemplate>
</CarouselView>

模板

<yummy:PancakeView  CornerRadius="80">
            <skia:SKCanvasView  x:Name="canvasView" HeightRequest="400"  WidthRequest="200"
        PaintSurface="OnCanvasViewPaintSurface" />
     </yummy:PancakeView >

我的模板背面

SKBitmap bitmap =
    BitmapExtensions.LoadBitmapResource(typeof(template),
                                        "Resultlist.Screenshot.png");

    private void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        SKImageInfo info = args.Info;
        SKSurface surface = args.Surface;
        SKCanvas canvas = surface.Canvas;

        canvas.Clear();

        SKRect dest = new SKRect(0, 0, info.Width, info.Height);

        BitmapStretch stretch = (BitmapStretch)BitmapStretch.AspectFill;
        BitmapAlignment horizontal = (BitmapAlignment)BitmapAlignment.Center;
        BitmapAlignment vertical = (BitmapAlignment)BitmapAlignment.Center;

        canvas.DrawBitmap(bitmap, dest, stretch, horizontal, vertical);
    }

Answer 1

我们可以在DataTemplate中创建内联的“视图”。

<CarouselView Margin="0,0,0,0" HorizontalScrollBarVisibility="Never"  Style="{StaticResource ImageResultCarousel}" 
                ItemsSource="{Binding ImageResults, Mode=TwoWay}" 
                 BackgroundColor="{DynamicResource PictureBackground}"
                                   >
                            <CarouselView.ItemTemplate >
                                <DataTemplate>
                                    <yummy:PancakeView  CornerRadius="80">
            <skia:SKCanvasView  x:Name="canvasView" HeightRequest="400"  WidthRequest="200"
        PaintSurface="OnCanvasViewPaintSurface" />
     </yummy:PancakeView >
                                </DataTemplate>
                            </CarouselView.ItemTemplate>
</CarouselView>

在后台代码中

private void OnCanvasViewPaintSurface(object sender, SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs e)
        {
            var canvasView = sender as SKCanvasView;
            var resultList = canvasView.BindingContext as Resultlist;
            //Now we can use resultList.foto to draw canvas.
        }