WPFでQRコードを生成して表示する方法

こんにちは、働くC#プログラマーのさんさめです。

今回は、WPFでQRコードを表示したくなって
突貫で動くところまで作ったので
その紹介となります。

といっても、
C#ではQRコードを生成できるライブラリ
「ZXing.Net」がNuGetに公開されているので
本記事はほぼその使用方法といっても良いでしょう。

ちなみに、ZXing.Netはオープンソースで、
githubに公開されています。

GitHub - zxing/zxing: ZXing ("Zebra Crossing") barcode scanning library for Java, Android

ZXing ("Zebra Crossing") barcode scanning library for Java, Android - zxing/zxing

ただし、注意点があります。
普通にこのライブラリを使うと、
WinForms用の画像クラスが渡されてしまうため、
WPFで扱うためにはWPF用に変換する必要があります。

ZXing.Netを使用する
サンプルコード
挙動の確認
まとめ

ZXing.Netを使用する

まずはNuGetでZXing.Netをインストールします。

「Nugetパッケージの管理」でパッケージマネージャーを開き、
ZXing.Netをインストールしましょう。

サンプルコード

それでは、
テキスト領域に何か入力してからボタンを押すと
そのQRコードが表示されるという
シンプルなアプリケーションを作ってみます。

サンプルコードは以下です。
まずはxamlから。

<Window
    x:Class="QrCodeSample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow"
    Width="400"
    Height="300">
    <DockPanel>
        <TextBox
            x:Name="QrTextBox"
            Margin="4"
            DockPanel.Dock="Top" />
        <Button
            Margin="4"
            Click="Button_Click"
            Content="QRコード生成"
            DockPanel.Dock="Top" />
        <Image
            x:Name="QrImage"
            Width="200"
            Height="200" />
    </DockPanel>
</Window>

次に、コードビハインドです。

public partial class MainWindow : Window
    {
        private BarcodeWriter barcodeWriter;

        public MainWindow()
        {
            InitializeComponent();

            barcodeWriter = new BarcodeWriter
            {
                Format = BarcodeFormat.QR_CODE,
                Options = new QrCodeEncodingOptions
                {
                    CharacterSet = "UTF-8",
                    Height = 200,
                    Width = 200,
                }
            };
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var text = QrTextBox.Text;
            if (string.IsNullOrEmpty(text))
            {
                QrImage.Source = null;
                return;
            }

            using (var bmp = barcodeWriter.Write(text))
            using (var ms = new MemoryStream())
            {
                bmp.Save(ms, ImageFormat.Bmp);
                // BarcodeWriter.Writeで得られる画像クラスは
                // そのままではWPFでは表示できないので、
                // WPFで扱えるImageSourceに変換する必要がある
                var source = BitmapFrame.Create(ms, BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
                QrImage.Source = source;
            }
        }
    }

BarcodeWriterクラスが、
ZXing.Netで提供されるQRコードの生成クラスです。

var barcodeWriter = new BarcodeWriter
{
    Format = BarcodeFormat.QR_CODE,
    Options = new QrCodeEncodingOptions
    {
        CharacterSet = "UTF-8",
        Height = 200,
        Width = 200,
    }
};

BarcodeWriterでは、
BarcodeFormatを指定することで
QRコード以外にも
様々なバーコードを表示できるようです。
（本記事では扱いません）

Writeメソッドに
変換したい文字列を渡すことで、
QRコードが生成されて
System.Drawing.Bitmapクラスのインスタンスとして
返されます。

using (var bmp = barcodeWriter.Write(text))

ちなみに、ここでビルドエラーになると思います。
dllが足りていないからです。

そんなときは、「Ctrl+.（ピリオド）」か、
電球アイコンをクリックして
参照に含めてしまいましょう。

.Net Coreだとnugetインストールも
推奨動作に含まれていて
なかなか気が利いています。

そして、その後に続く部分が冒頭で紹介した
WinForms用になっているものを
WPF用に変換…
つまり、
System.Drawing.Bitmapを
System.Windows.Media.ImageSource
に変換している部分となります。

using (var ms = new MemoryStream())
{
    bmp.Save(ms, ImageFormat.Bmp);
    // BarcodeWriter.Writeで得られる画像クラスは
    // そのままではWPFでは表示できないので、
    // WPFで扱えるImageSourceに変換する必要がある
    var source = BitmapFrame.Create(ms, BitmapCreateOptions.None, BitmapCacheOption.OnLoad);
    QrImage.Source = source;
}

一度メモリ領域にbmp形式で書き出してから、
改めて読み直すというコードです。