SkiaSharp.Components下載SkiaSharp.Components源代碼下載

SkiaSharp.Components

三方組件

1.0.0

下載

skiasharp.com

為Skiasharp製作渲染代碼可能是極端的冗長和重複性的。 skiasharp.com是更高級別的觀點，使聲明更加簡潔。

Quickstart

 var result = new Grid ( ) ;

this . Title = new Label
{
    TextSize = 30 ,
    Text = "Title of the view" ,
    VerticalAlignment = Alignment . Center ,
} ;

this . Description = new Label
{
    TextSize = 16 ,
    Spans = new [ ]
    {
        new Span
        {
            Text = "Nam ut imperdiet nibh. Ut sollicitudin varius nibh,"
        } ,
        new Span
        {
            ForegroundBrush = new ColorBrush ( new SKColor ( 0xFFF44336 ) ) ,
            Decorations = TextDecoration . Bold ,
            Text = "id ornare tortor convallis sed"
        } ,
        new Span
        {
            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."
        } ,
    } ,
} ;

var gradient = new GradientBrush ( new SKPoint ( 0 , 0 ) , new SKPoint ( 0 , 1 ) , new [ ]
{
    new Tuple < float , SKColor > ( 0 , new SKColor ( 255 , 255 , 255 , 255 ) ) ,
    new Tuple < float , SKColor > ( 1 , new SKColor ( 238 , 238 , 238 , 255 ) ) ,
} ) ;

var shadow = new Shadow ( )
{
    Blur = new SKPoint ( 10 , 10 ) ,
    Color = SKColors . Black . WithAlpha ( 80 ) ,
} ;

this . Image = new Image ( )
{
    Source = "https://source.unsplash.com/random" ,
    Fill = new ColorBrush ( SKColors . LightGray ) ,
    CornerRadius = 5.0f ,
    Shadow = shadow ,
} ;

this . Box = new Box ( )
{
    Fill = gradient ,
    CornerRadius = 5.0f ,
    Shadow = shadow ,
} ;

var iconGradient = new GradientBrush ( new SKPoint ( 0 , 0 ) , new SKPoint ( 1 , 1 ) , new [ ]
{
    new Tuple < float , SKColor > ( 0 , new SKColor ( 0xFFF44336 ) ) ,
    new Tuple < float , SKColor > ( 1 , new SKColor ( 0xFF3F51B5 ) ) ,
} ) ;

this . Icon = new Path
{
    Source = IconPath . Aperture ,
    ViewBox = SKRect . Create ( 0 , 0 , 24 , 24 ) ,
    Stroke = new Stroke ( )
    {
        Size = 5 ,
        Brush = iconGradient ,
    } ,
} ;

// Setting grid column and rows
result . 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 positions
result . 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 ) ;

高級用法

無效

每次視圖的屬性變化時，都會提出視圖的Invalidated事件。這很有用，可以知道何時重新渲染視圖。

互動

可以通過Tap控件獲得基本交互，該控制將在用戶觸摸其框架時提高事件。它像其他任何組件一樣是一種視圖。

 this . Button = new Tap ( )
{
    BackgroundBrush = new ColorBrush ( SKColors . DeepPink ) ,
    CornerRadius = 5 ,
} ;

this . Button . Tapped += ( s , e ) => Debug . WriteLine ( "Tapped" ) ;
this . Button . Pressed += ( s , e ) => ( ( Tap ) s ) . BackgroundBrush = new ColorBrush ( SKColors . LightPink ) ;
this . Button . Released += ( s , e ) => ( ( Tap ) s ) . BackgroundBrush = new ColorBrush ( SKColors . DeepPink ) ;