<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
xmlns:behavior="clr-namespace:Prism.Behaviors;assembly=Prism.Forms"
xmlns:local="clr-namespace:XFSkiaMVVM"
x:Class="XFSkiaMVVM.Views.MainPage"
Title="{Binding Title}">
<ContentPage.Resources>
<ResourceDictionary>
<local:SKPaintSurfaceEventArgsConverter x:Key="SKPaintSurfaceEventArgsConverter"/>
</ResourceDictionary>
</ContentPage.Resources>
<ScrollView
>
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<BoxView
Color="Black"
WidthRequest="200" HeightRequest="200"/>
<skia:SKCanvasView
BackgroundColor="Black"
IgnorePixelScaling="True"
WidthRequest="200" HeightRequest="200"
>
<skia:SKCanvasView.Behaviors>
<behavior:EventToCommandBehavior
EventName="PaintSurface"
Command="{Binding PaintSurfaceCommand}"
EventArgsConverter="{StaticResource SKPaintSurfaceEventArgsConverter}"
/>
</skia:SKCanvasView.Behaviors>
</skia:SKCanvasView>
<skia:SKCanvasView
BackgroundColor="Black"
IgnorePixelScaling="False"
WidthRequest="200" HeightRequest="200"
>
<skia:SKCanvasView.Behaviors>
<behavior:EventToCommandBehavior
EventName="PaintSurface"
Command="{Binding PaintSurfaceSelfScaleCommand}"
EventArgsConverter="{StaticResource SKPaintSurfaceEventArgsConverter}"
/>
</skia:SKCanvasView.Behaviors>
</skia:SKCanvasView>
</StackLayout>
</ScrollView>
</ContentPage>
using SkiaSharp.Views.Forms;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Text;
using Xamarin.Forms;
namespace XFSkiaMVVM
{
class SKPaintSurfaceEventArgsConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var skPaintSurfaceEventArgs = value as SKPaintSurfaceEventArgs;
if (skPaintSurfaceEventArgs == null)
{
throw new ArgumentException("Expected value to be of type SKPaintSurfaceEventArgs", nameof(value));
}
return skPaintSurfaceEventArgs;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using SkiaSharp;
using SkiaSharp.Views.Forms;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
namespace XFSkiaMVVM.ViewModels
{
public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
{
public event PropertyChangedEventHandler PropertyChanged;
public DelegateCommand<SKPaintSurfaceEventArgs> PaintSurfaceCommand { get; set; }
public DelegateCommand<SKPaintSurfaceEventArgs> PaintSurfaceSelfScaleCommand { get; set; }
private readonly INavigationService _navigationService;
public MainPageViewModel(INavigationService navigationService)
{
_navigationService = navigationService;
PaintSurfaceCommand = new DelegateCommand<SKPaintSurfaceEventArgs>(args =>
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
SKPaint fooCirclePaint = new SKPaint
{
Style = SKPaintStyle.Fill,
Color = SKColors.DeepSkyBlue,
StrokeWidth=1,
};
SKPaint fooLinePaint = new SKPaint
{
Style = SKPaintStyle.Stroke,
Color = SKColors.White,
StrokeWidth = 1,
};
canvas.DrawCircle(100, 100, 100, fooCirclePaint);
canvas.DrawLine(0, 0, 200, 140, fooLinePaint);
});
PaintSurfaceSelfScaleCommand = new DelegateCommand<SKPaintSurfaceEventArgs>(args =>
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
float fooScale = info.Width / 200.0f;
SKPaint fooCirclePaint = new SKPaint
{
Style = SKPaintStyle.Fill,
Color = SKColors.DeepSkyBlue,
StrokeWidth = 1,
};
SKPaint fooLinePaint = new SKPaint
{
Style = SKPaintStyle.Stroke,
Color = SKColors.White,
StrokeWidth = 1,
};
canvas.Scale(fooScale);
canvas.DrawCircle(100, 100, 100, fooCirclePaint);
canvas.DrawLine(0, 0, 200, 140, fooLinePaint);
});
}
public void OnNavigatedFrom(NavigationParameters parameters)
{
}
public void OnNavigatingTo(NavigationParameters parameters)
{
}
public void OnNavigatedTo(NavigationParameters parameters)
{
}
}
}
關於 Xamarin 在台灣的學習技術資源
在以往我們進行 Xamarin.Forms 專案開發的時候，我們需要使用 C# 來設計這個行動應用程式的商業邏輯運作行為，對於這個行動應用程式，我們將會透過 XAML 宣告標記語言來設計可用於跨平台的頁面之使用者介面內容。不過，要如何使用這項功能呢，您需要升級 VS4W Visual Studio 2017 for Windows 到 Visual Studio 2017 15.8 版本，並且升級到 Xamarin.Forms NuGet 套件到 3.0 以上的版本。