Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

WindowsアプリでバーコードやQRコードを簡単出力! BarCodeコントロールをWindows Forms/WPF/UWPで使ってみる

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/08/03 14:00

目次

QRコードを表示してみよう(UWP編)

 UWPでもQRコードを表示するアプリを作ってみましょう(WPFでBarCodeコントロールを使う方法は後ほど)。

ライセンスの取得

 UWPでは、Windows Forms/WPFと異なり、トライアル版の利用にもプロジェクトごとのライセンスキーの取得が必要です。UWPのプロジェクトを作成したら、「ComponentOne for UWPライセンス」の説明に従ってライセンスキーを取得し(ものすごく長い文字列です)、AppクラスのコンストラクターでC1.UWP.LicenseManager.Keyプロパティに設定します(サンプルコードのLicenseクラスのライセンスキーはダミーで、そのままでは動作しません)。

参照の追加

 UWPのプロジェクトの参照に、必要なコンポーネントを追加します。BarCodeコントロールを使うには、[参照マネージャー]ダイアログの[Universal Windows]-[拡張]セクションで、[C1.UWP]と[C1.UWP.BarCode]の2つを追加します。

Visual Studio 2017 15.7の不具合対応

 以上でBarCodeコントロールを使ったXAMLの記述を始められるはずですが、Visual Studio 2017 15.7の場合には追加の作業が必要です。

 詳しくは公式ブログ記事「Visual Studio 2017(バージョン15.7.1)で発生するビルドエラー【回避方法を追記 2018/6/7】」をご覧になっていただきたいのですが、プロジェクトファイルの<PropertyGroup>要素の最後に次のように1行追加します。

プロジェクトファイルに追記
<PropertyGroup>
  ……省略……
  <DisableEmbeddedXbf>false</DisableEmbeddedXbf>
</PropertyGroup>

BarCodeコントロールの設定

 まず、XAMLの先頭に名前空間の定義を追加します(次のコード)。

XAMLの先頭に名前空間の定義を追加
<Page
  ……省略……
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:c1XamlBarCode="using:C1.Xaml.BarCode"
  x:Class="QrUwp.MainPage"
  ……省略……
  >

 次にコントロールを記述していきます。ここでは、TextBoxコントロールに入力した文字列がBarCodeコントロールに反映されるようにしましょう(次のコード)。XAMLコードの全体は、GitHubでご覧ください。

TextBoxに入力した文字列をBarCodeコントロールにデータバインド
<TextBox x:Name="InputTextBox" ……省略…… />

<c1XamlBarCode:C1BarCode x:Name="BarCode1"  
                          Text="{x:Bind InputTextBox.Text, Mode=OneWay}"
                          CodeType="QRCode" AutoSize="False" 
                          Width="500" Height="500" BarHeight="500"
                          ……省略…… />

 BarCodeコントロールは、最小限、次の2つのプロパティを設定するだけでQRコードを表示できます。

  • CodeType:QRCode
  • Text:バーコードに表示したい任意の文字列

 これだけで、UWPのページ上にQRコードが表示されます。試しにURLなどを表示させて、スマホの適当なアプリで認識させてみてください。

QRコードの表示例(UWP)
UWPアプリでQRコードを表示

 なお、BarCodeコントロールのサイズは、既定では固定になっています。サイズを変えるには、上のコードのように、AutoSizeプロパティをfalseにし、BarHeightにもHeightプロパティと同じ値をセットします(前述したWindows Formsの解説もご覧ください)。

 サンプルコードには、表示領域のサイズに合わせてBarCodeコントロールのサイズを調整するコードを含めてありますので、参考にしてください(MainPage.xaml.csファイルのSizeChangedイベントハンドラー)。そのほか、BarCodeコントロールの詳細については、BarCode for UWPの製品ヘルプを参照してください。なお、上の画像に見える[画像を保存]ボタンについては、後ほど解説します。

 ここまでで、QRコードの表示をWindows FormsとUWPでやってみました。基本的な使い方は同じになっていることをお分かりいただけたかと思います(フォームエディタとXAMLの違いはあります)。「プラットフォームが違っても、コントロールの基本的な使い方は同じ」、これもComponentOneの特徴です。


関連リンク

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • biac(ばいあっく)

    HONDA R&Dで自動車の設計をやっていた機械屋さんが、技術の進化スピードに魅かれてプログラマーに。以来20年ほど、より良いコードをどうやったら作れるか、模索の人生。わんくま同盟の勉強会(名古屋)で、よく喋ってたりする。 Microsoft MVP (Windows Development)...

バックナンバー

連載:UWPアプリ開発に必携のコンポーネントライブラリー「ComponentOne Studio」
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5