CODEWITHSUNDEEP
xamarinxamarin.formsskiasharp
LCJ
LCJ

Reputation: 22652

SkiaSharp Canvas button doesn't work

I have a Xamrin Form with Grid layout as shown below. There is a SkiaSharp canvas with gradient color. I need to add a button inside the canvas to get gradient background. But when I add button inside the canvas it doesn't render anything (Button x:Name="ClickMe2"). What is the correct way to get a button rendered with gradient background?

XAML

<Grid x:Name="controlGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="200" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <views:SKCanvasView PaintSurface="OnSecondPainting" EnableTouchEvents="True" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" >
        <Button x:Name="ClickMe2" Text="ClickMe 2" HeightRequest="50"  VerticalOptions="Start" />
    </views:SKCanvasView>
    <Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
    <Button x:Name="ClickMe1" Text="ClickMe 1" Grid.Row="1" Grid.Column="1" HeightRequest="50"  VerticalOptions="Start" />
</Grid>

C#

    private void OnSecondPainting(object sender, SKPaintSurfaceEventArgs e)
    {

        var surface = e.Surface;
        var canvas = surface.Canvas;
        canvas.Clear(SKColors.White);

        ///GRADIENT--------------------------------------------------------------------
        var colors = new SKColor[] { new SKColor(6, 107, 249), new SKColor(27, 162, 210), new SKColor(36, 182, 197) };
        var shader = SKShader.CreateLinearGradient(new SKPoint(300, 0), new SKPoint(300, 600), colors, null, SKShaderTileMode.Clamp);
        var paint = new SKPaint() { Shader = shader };
        canvas.DrawPaint(paint);


    }

Upvotes: 2

Views: 1875

Answers (1)

Matthew
Matthew

Reputation: 5212

This is because the canvas view is not actually a layout - it is a View. This means that it does not support children.

If this is really an issue, then feel free to open an issue on GitHub: https://github.com/mono/skiasharp/issues We can discus this there, as well as get input from the community (such as a change or a new view)

If you want to place views on top of a canvas, you can do this by using a Grid, RelativeLayout or AbsoluteLayout:

<Grid>
    <views:SKCanvasView />
    <Button />
</Grid>

As long as the canvas is the first child, all the other children will appear above it.

Upvotes: 2

Related Questions