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の先頭に名前空間の定義を追加します(次のコード)。
<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 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などを表示させて、スマホの適当なアプリで認識させてみてください。
なお、BarCodeコントロールのサイズは、既定では固定になっています。サイズを変えるには、上のコードのように、AutoSize
プロパティをfalse
にし、BarHeight
にもHeight
プロパティと同じ値をセットします(前述したWindows Formsの解説もご覧ください)。
サンプルコードには、表示領域のサイズに合わせてBarCodeコントロールのサイズを調整するコードを含めてありますので、参考にしてください(MainPage.xaml.csファイルのSizeChangedイベントハンドラー)。そのほか、BarCodeコントロールの詳細については、BarCode for UWPの製品ヘルプを参照してください。なお、上の画像に見える[画像を保存]ボタンについては、後ほど解説します。
ここまでで、QRコードの表示をWindows FormsとUWPでやってみました。基本的な使い方は同じになっていることをお分かりいただけたかと思います(フォームエディタとXAMLの違いはあります)。「プラットフォームが違っても、コントロールの基本的な使い方は同じ」、これもComponentOneの特徴です。