SKBitmapをbindingさせるならSkiaImageViewを使おう

WPFで作成(読込み)したBitmap形式のデータをViewとbindingしてUIに表示しよう😁 さて、System.Drawing.Commonを使って、、おや？

learn.microsoft.com

推奨アクション これらの API をクロスプラットフォーム アプリで使用するには、次のいずれかのライブラリに移行してください。 SkiaSharp Microsoft.Maui.Graphics

なるほど。。 クロスプラットフォームアプリを開発するわけじゃないけど、SkiaSharpが気になるので触ってみよう。

View

色々省略
<Image x:Name="hogebitmap" Source="{Binding HogeBitmap}" Stretch="UniformToFill" />

ViewModel

色々省略
public SKBitmap HogeBitmap { get; set; }

うーん。View側にSKBitmapの画像が表示されないぞ。🤔 SKBitmapから別の型に変換しないといけないのかな？🤔🤔

と思っていたら、SkiaImageViewというライブラリがありました！ SkiaImageViewを使えばSKBitmap型のプロパティをbindingすればUIに表示されるとのこと。

github.com

今回はWindows10 Visual Studio 2022 + WPFで開発していたので、SkiaImageView.WPFをNuGetからインストールしました。

Viewのxamlファイルにxmlns:siv="https://github.com/kekyo/SkiaImageView"を追加して、siv:SKImageViewタグを使うとbindingできました！

<UserControl
    (色々省略)
    xmlns:siv="https://github.com/kekyo/SkiaImageView">
    <Grid>
        <siv:SKImageView Source="{Binding HogeBitmap}" Stretch="Uniform" />
    </Grid>
</UserControl>

今回は真っ黒なBitmapイメージを生成していたので、↓の画像が表示されました。

bindingした画像

ピクセルでBitmapを生成する場合は、下記の記事が参考になります。 他にもSkiaSharpを使用した記事がサイドメニューから参照できます。

learn.microsoft.com