SkiaSharp.Components

Producing rendering code for SkiaSharp can be extremely verbose and repetitive. SkiaSharp.Components are higher level views that make declarations more concise.

Quickstart

varresult=newGrid();this.Title=newLabel{TextSize=30,Text="Title of the view",VerticalAlignment=Alignment.Center,};this.Description=newLabel{TextSize=16,Spans=new[]{newSpan{Text="Nam ut imperdiet nibh. Ut sollicitudin varius nibh,"},newSpan{ForegroundBrush=newColorBrush(newSKColor(0xFFF44336)),Decorations=TextDecoration.Bold,Text="id ornare tortor convallis sed"},newSpan{Text=". Morbi volutpat, lacus efficitur volutpat lacinia, nibh velit ultricies neque, vel faucibus tellus neque at nibh. Nullam vitae tincidunt metus. Vestibulum nec nisl quis lorem tincidunt maximus eu vel lectus. Proin posuere augue molestie imperdiet scelerisque. Phasellus quis suscipit neque."},},};vargradient=newGradientBrush(newSKPoint(0,0),newSKPoint(0,1),new[]{newTuple<float,SKColor>(0,newSKColor(255,255,255,255)),newTuple<float,SKColor>(1,newSKColor(238,238,238,255)),});varshadow=newShadow(){Blur=newSKPoint(10,10),Color=SKColors.Black.WithAlpha(80),};this.Image=newImage(){Source="https://source.unsplash.com/random",Fill=newColorBrush(SKColors.LightGray),CornerRadius=5.0f,Shadow=shadow,};this.Box=newBox(){Fill=gradient,CornerRadius=5.0f,Shadow=shadow,};variconGradient=newGradientBrush(newSKPoint(0,0),newSKPoint(1,1),new[]{newTuple<float,SKColor>(0,newSKColor(0xFFF44336)),newTuple<float,SKColor>(1,newSKColor(0xFF3F51B5)),});this.Icon=newPath{Source=IconPath.Aperture,ViewBox=SKRect.Create(0,0,24,24),Stroke=newStroke(){Size=5,Brush=iconGradient,},};// Setting grid column and rowsresult.ColumnDefinitions=new[]{Grid.Definition.Points(100),Grid.Definition.Stars(1),};result.RowDefinitions=new[]{Grid.Definition.Points(100),Grid.Definition.Points(200),Grid.Definition.Stars(1),};// Setting child positionsresult.AddView(this.Icon,0,0);result.AddView(this.Title,1,0);result.AddView(this.Box,0,1,2);result.AddView(this.Description,0,1,2);result.Layout(SKRect.Create(0,0,500,500));result.Render(canvas);

Advanced usage

Invalidation

Each time a property of a view changes, the Invalidated event of a view is raised. This is useful to know when to re-render a view.

Interactions

Basic interactions are available through the Tap control which raises events when the user touches its frame. It is a view like any other components.

this.Button=newTap(){BackgroundBrush=newColorBrush(SKColors.DeepPink),CornerRadius=5,};this.Button.Tapped+=(s,e)=>Debug.WriteLine("Tapped");this.Button.Pressed+=(s,e)=>((Tap)s).BackgroundBrush=newColorBrush(SKColors.LightPink);this.Button.Released+=(s,e)=>((Tap)s).BackgroundBrush=newColorBrush(SKColors.DeepPink);

If you use provided Renderer, touches will be wired up automatically.

Contributions

Contributions are welcome! If you find a bug please report it and if you want a feature please report it.

If you want to contribute code please file an issue and create a branch off of the current dev branch and file a pull request.

License

MIT © Aloïs Deniel