SkiaSharpの始め方：WinUI 3の場合

導入

プロジェクトを作成するときに注意すべき設定があります。

• ターゲットフレームワーク： .NET 9.0
• ターゲットOS： Windows
• ターゲットOSバージョン： 10.0.19041.0以上
• サポートされているOSバージョン： 10.0.19041.0以上

nugetから以下のパッケージをインストールしてください。その他の必要なパッケージは自動的にインストールされます。

• SkiaSharp.Views.WinUI

パッケージマネージャの警告NU1701が表示される場合があります。無視しても問題ありませんが、.csprojファイルを編集して、PrivateAssets="all"を追加することで警告を抑制できます。

csproj

  <ItemGroup>
        : 中略
    <PackageReference Include="SkiaSharp.Views.WinUI" Version="3.119.1" PrivateAssets="all" />
    <PackageReference Include="SkiaSharp.NativeAssets.WinUI" Version="3.119.1" PrivateAssets="all" />
  </ItemGroup>

追加されるコントロール

• SKXamlCanvas：CPUレンダリングによるSkiaの描画コントロール
• SKSwapChainPanel：高速なGPUレンダリングによるSkiaの描画コントロール

配置してみる

まず、XAMLを開いて、SkiaSharpの名前空間の宣言を追加します。(xmlns:skiaの部分)

MainWindow.xaml

<Window
    x:Class="Skia_Tips_WinUI3.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Skia_Tips_WinUI3"
    xmlns:skia="using:SkiaSharp.Views.Windows"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="Skia Tips-WinUI3">

自由に描画できるコントロール、SKXamlCanvasを配置します。

MainWindow.xaml

<skia:SKXamlCanvas x:Name="SkiaCanvas"
    PaintSurface="SkiaCanvas_PaintSurface" 
    HorizontalAlignment="Stretch"
    VerticalAlignment="Stretch" />

そして、コードビハインドで描画処理を実装します。

MainWindow.xaml.cs

private void SkiaCanvas_PaintSurface( object sender, SKPaintSurfaceEventArgs e ) {
    var canvas = e.Surface.Canvas;
    // 灰色で塗りつぶす
    canvas.Clear( SKColors.DarkGray );
}

ビルドして実行してみましょう。一面灰色のウィンドウが表示されるはずです。

SKXamlCanvasの代わりにSKSwapChainPanelを使用することもできます。SKSwapChainPanelはOpenGLを使用して描画するため、より高性能な描画が可能です。

---

総合目次