【C# .NET8.0】XAMLにQRコードをSVGで表示【ZXing.NET】 (original) (raw)

XAMLを使用して帳票を作成する際に、QRコードを表示したいが
ZXingだとImageの変換が必要となるらしいので、この際ZXingで新しく実装された
SVG出力の機能でQRコードを表示してみました。解像度的にもSVGの方が良い為。

1次元バーコードの表示も併用可能です。

ソースコード

NuGetパッケージマネージャー より ZXing.NET (Ver.0.16.6以上)をインストールしてください。
今回は Ver.0.16.9 を使用しています。

デザイン (UserControl1.xaml)

        <Path Margin="4.1cm, 1.7cm, 0, 0" Width="1.5cm" Height="1.5cm" xName="QRCodeImage" Data="" Fill="Black" Stretch="Uniform" />
        
        <StackPanel Margin="0.6cm, 3.1cm, 0, 0">
            <Path Width="3cm" Height="0.4cm" xName="Code128Image" Data="" Fill="Black" Stretch="Uniform" />
            <TextBlock Height="0.25cm" xName="Code128Text" FontSize="0.15cm" TextAlignment="Center" Text="" />
        </StackPanel>

データバインディング (UserControl1.xaml.cs)

    private string? _QRCode;
    private string? _Code128;

    public string QRCode
    {
        get => this._QRCode ?? "";
        set
        {
            this._QRCode = value;
            CreateBarcode(QRCodeImage, this._QRCode, BarcodeFormat.QR_CODE);
        }
    }
    public string Code128
    {
        get => this._Code128 ?? "";
        set {
            this._Code128 = value;
            CreateBarcode(Code128Image, this._Code128, BarcodeFormat.CODE_128);
        }
    }

    private void CreateBarcode(Path path, string text, BarcodeFormat barcodeFormat)
    {
        string data = "F1 ";
        foreach (
            XElement el in XElement.Parse(
                new BarcodeWriter<SvgRenderer.SvgImage>
                {
                    Format = barcodeFormat,
                    Options = new QrCodeEncodingOptions
                    {
                        ErrorCorrection = ErrorCorrectionLevel.M,
                        CharacterSet = "UTF-8",
                        NoPadding = true,
                    },
                    Renderer = new SvgRenderer(),
                }.Write(text).Content
            ).Elements())
        {
            if (el.Name.LocalName == "rect") {
                string x = el.Attribute("x").Value;
                string y = el.Attribute("y").Value;
                string width = el.Attribute("width").Value;
                string height = el.Attribute("height").Value;
                
                data += $"M{x},{y} h{width} v{height} h-{width} Z";
                path.Data = (Geometry?)new GeometryConverter().ConvertFromInvariantString(data);
            }
            else if (el.Name.LocalName == "text")
            {
                if (path == Code128Image) Code128Text.Text = el.Value;
            }
        }
    }

解説

デザイン (UserControl1.xaml)

    private string? _QRCode;
    public string QRCode
    {
        get => this._QRCode ?? "";
        set
        {
            this._QRCode = value;
            CreateBarcode(QRCodeImage, this._QRCode, BarcodeFormat.QR_CODE);
        }
    }

    private void CreateBarcode(Path path, string text, BarcodeFormat barcodeFormat)
    {
        string data = "F1 ";
        foreach (
            XElement el in XElement.Parse(
                new BarcodeWriter<SvgRenderer.SvgImage>
                {
                    Format = barcodeFormat,
                    Options = new QrCodeEncodingOptions
                    {
                        ErrorCorrection = ErrorCorrectionLevel.M,
                        CharacterSet = "UTF-8",
                        NoPadding = true,
                    },
                    Renderer = new SvgRenderer(),
                }.Write(text).Content
            ).Elements())
        {
            if (el.Name.LocalName == "rect") {
                string x = el.Attribute("x").Value;
                string y = el.Attribute("y").Value;
                string width = el.Attribute("width").Value;
                string height = el.Attribute("height").Value;
                
                data += $"M{x},{y} h{width} v{height} h-{width} Z";
                path.Data = (Geometry?)new GeometryConverter().ConvertFromInvariantString(data);
            }
            else if (el.Name.LocalName == "text")
            {
                if (path == Code128Image) Code128Text.Text = el.Value;
            }
        }
    }