SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

UWPアプリ開発に必携のコンポーネントライブラリー「ComponentOne Studio」(AD)

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

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

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の特徴です。

次のページ
郵便番号バーコードを表示してみよう(WPF編)

関連リンク

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
UWPアプリ開発に必携のコンポーネントライブラリー「ComponentOne Studio」連載記事一覧
この記事の著者

biac(ばいあっく)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10975 2019/11/10 21:54

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング