はじめに
バーコードは、以前から業務アプリでは求められてきました。商品の一覧表にはJANコードなど、宛名印刷には郵便番号バーコードといったように。加えてこの頃はQRコードが普及してきて、QRコードで印刷されたWebサイトのURLを広告や名刺などに見かけることも多くなりました。
QRコードは「2次元バーコード」の一種です。例えばこの記事のURLをQRコードで表すと、次の画像になります。対して、従来のバーコードは「1次元バーコード」と呼びます。
ComponentOneのBarCodeコントロールは、1次元バーコード／2次元バーコードのほとんどをサポートしていて、しかも簡単に使えます。UIフレームワーク（プラットフォーム）も、Windows Forms／WPF／UWPをサポートしています。
本稿では、WindowsアプリでComponentOneのBarCodeコントロールを使う方法を解説していきます。UWPをメインにしますが、Windows FormsとWPFも扱います。画面に表示する方法だけでなく、画像ファイルへの保存や、PDFやExcelへの出力も説明します。
対象読者
- Windows用のアプリを作っている開発者
必要な環境
Windows Forms用／WPF用のBarCodeコントロールは、Windows 7以降＋.NET Framework 4.5.2以降で動作します。UWP用のものは、Windows 10で動作します。
サンプルコード（GitHub）をそのまま試すには以下の環境が必要です。
- Windows 10 1803以降
- Visual Studio 2017 Version 15.7以降（無償のCommunity Editionで可）
- 最新のUWP用Windows 10 SDK
どんなコントロールなのか？
ComponentOneのBarCodeコントロールは、プロパティを設定するだけでさまざまなバーコードをひとつのコントロールで表示できます。
例えば、CodeTypeプロパティにQRCodeと指定すれば、Textプロパティに設定した文字列をQRコードにして表示してくれます（次の画像、UWPとWindows Formsの例）。
そのほかのバーコードでも同様です。例えば、次の画像はCodeTypeプロパティにJapanesePostalを指定して日本の郵便番号バーコードを表示しています（WPFの例）。海外でも販売している製品で日本の郵便番号バーコードをサポートしているのはグレープシティならではでしょう。
BarCodeコントロールは、ほかのコンテナコントロールの中にも表示できます。次の画像は、FlexGridコントロールの中にJANコード（ここではISBNコード）を表示した例です（UWP）。
また、BarCodeコントロールは、表示しているバーコードを画像ファイルに保存できます。冒頭に示したQRコード（この記事のURL）は、そのようにして作成したものです。
さらには、ComponentOneのほかのコンポーネントと組み合わせることで、ExcelファイルやPDFファイルにバーコードを出力することもできます（次の2つの画像）。
ComponentOneを導入しよう
こうしたバーコードの表示や出力が簡単にできるBarCodeコントロールは、「ComponentOne」に含まれています。無償のトライアル版が提供されているので、さっそくインストールして試してみましょう。Windows Forms／WPFで使うには、Windows 7でもOKです。
ComponentOne 2018J v1の動作環境
・ Windows Forms／WPF：Windows 7以降＋Visual Studio 2012以降
・ UWP：Windows 10＋Visual Studio 2015以降
ComponentOneのトライアル版のページでComponentOne Enterpriseの［ダウンロード］ボタンをクリックします。すると、メールアドレスの送信ダイアログが出てくるので、メールアドレスを入力して送信しましょう。ダウンロードの案内メールが送られてくるので、それに従ってトライアル版をダウンロードします。
トライアル版はEnterpriseエディションなので、対応している全てのプラットフォーム用のComponentOneが含まれています。ダウンロードしたパッケージの「Enterprise」フォルダ内にあるインストーラーを起動して、必要なプラットフォーム用のものをインストールします（次の画像）。なお、右側でプラットフォームごとにインストールした場合にはEnterprise版の付加機能はインストールされません。Enterprise版の付加機能も試してみたいときは左側の「Enterprise」をインストールします。
Xamarin用のComponentOne
ダウンロードしたパッケージには「Xamarin」フォルダもあります。こちらのインストーラーでは、Xamarin用のComponentOneである「ComponentOne for Xamarin」がインストールされます。
ComponentOne for Xamarinは新しい製品なので、他のプラットフォームのものに比べるとコンポーネントの種類がまだ多くありません。コントロール一覧を見ていただくと分かりますが、残念なことにBarCodeコンポーネントもまだないのです。近い将来に追加されることを期待しましょう。
BarCodeコントロールの特徴
インストールしている間に、BarCodeコントロールの特徴を見ておきましょう。
- 多くのバーコードをサポート
1次元バーコードだけでなく、QRコードなどの2次元バーコードも。また、日本独自の郵便番号バーコードもサポートしています。 - チェックディジットを自動的に追加
必要なチェックディジットや制御シンボルは、BarCodeコントロールが自動的に計算してくれます。 - エラー時の詳細取得
誤ったデータを与えたときは、そのエラー内容がBarCodeコントロールに表示されます。また、そのエラー内容は、コードからも取得できます。
詳しくは、以下のWebページをご覧ください。
QRコードを表示してみよう（Windows Forms編）
インストールが終わったら、さっそくQRコードを表示するアプリを作ってみましょう。ここでは、Windows Formsを紹介していきます（WPFとUWPでBarCodeコントロールを使う方法は後ほど）。
Windows Formsプロジェクトの設定
インストール直後に1回だけ、Windows Formsのプロジェクトを作成してから、ツールボックスにComponentOneのコントロールを追加する必要があります。ツールボックスに新しいタブ「C1 WinForms 4.0」を作り、そこにComponentOne for Windowsのコントロールを追加します。詳しい手順は、「Windows フォームにコンポーネントを追加する」をご覧ください。追加するときに、他のプラットフォーム（WPF／UWP）用のコントロールを誤って選択しないよう注意してください。
また、ツールボックスからフォームにコントロールを貼り付けても、プロジェクトの参照設定が追加されないことがあります。そのときは、手動でプロジェクトの参照を追加してください。BarCodeコントロールを使うには、参照を追加するダイアログの［アセンブリ］－［拡張］で、［C1.Win］と［C1.Win.BarCode］を追加します。
BarCodeコントロールの設定
ツールバーからフォームにBarCodeコントロールを貼り付け、次の通りプロパティを設定します。
- CodeType：
QRCode - Text：バーコードに表示したい任意の文字列
これだけで、フォーム上にQRコードが表示されます。試しにURLなどを表示させて、スマホの適当なアプリで認識させてみてください。
QRコードは、その規格の上では最大7366文字まで表現できます（半角換算）。表示する文字が多くなると、BarCodeコントロールが自動的にグリッドを細かくしてくれます（次の画像）。しかし、画像の右側の画面のようにグリッドがあまり細かくなると、細部がつぶれてしまってQRコードとして読み取れなくなってしまいます。そのため、表示する文字列長に応じて、BarCodeコントロールの大きさを変える必要が出てきます。
BarCodeコントロールのサイズは、既定ではバーコードの種類ごとに固定になっています。次のプロパティを設定することで、任意のサイズに変更できます。
- AutoSize：
false（既定値はtrue） - Size：希望のサイズ、ただし縦横は同じにする
- BarHeight：SizeのHeightと同じにする
サンプルコードには、表示領域のサイズに合わせてBarCodeコントロールのサイズを調整するコードを含めてあるので、参考にしてください（Form1.csファイルのAdjustBarCodeメソッド）。そのほか、BarCodeコントロールの詳細については、BarCode for WinFormsの製品ヘルプを参照してください。なお、上の画像に見える［画像を保存］ボタンについては、後ほど解説します。
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の特徴です。
郵便番号バーコードを表示してみよう（WPF編）
WPFでもBarCodeコントロールを使ってみましょう。今度は日本の郵便番号バーコードを表示してみます。
このバーコードは日本郵便が使用しているバーコードのひとつで、正確には「カスタマバーコード」といいます。ダイレクトメールなどの宛名の下によく印字されているので、多くの方は見かけたことがあると思います。
参照の追加
WPFのプロジェクトの参照に、必要なコンポーネントを追加します。BarCodeコントロールを使うには、［参照マネージャー］ダイアログの［アセンブリ］－［拡張］セクションで、［C1.WPF］と［C1.WPF.BarCode］の2つを追加します（「C1.Win」で始まるものはWindows Forms用ですので注意してください）。
なお、ツールボックスからBarCodeコントロールを画面に貼り付けると、上記の参照設定は自動的に追加されます。
BarCodeコントロールの設定
まず、XAMLの先頭に名前空間の定義を追加します（次のコード）。これは、コントロールをツールボックスからXAMLに挿入すれば、自動的に追加されます。
<Window x:Class="PostalWpf.MainWindow"
……省略……
xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml"
mc:Ignorable="d"
Title="MainWindow" Height="240" Width="480">
次にコントロールを記述していきます。ここでは、TextBoxコントロールに入力した文字列がBarCodeコントロールに反映されるようにしましょう（次のコード）。XAMLコードの全体は、GitHubでご覧ください。
<TextBox x:Name="InputTextBox" ……省略…… />
<c1:C1BarCode x:Name="BarCode1" CodeType="JapanesePostal" ……省略……
Text="{Binding Path=Text, ElementName=InputTextBox}"
CaptionPosition="Below" />
BarCodeコントロールは、最小限、次の2つのプロパティを設定するだけで郵便番号コードを表示できます。
- CodeType：
JapanesePostal - Text：バーコードに表示したいカスタマコード文字列（数字／ハイフン／英大文字）
これだけで、WPFのウインドウ上に郵便番号コードが表示されます。
参考までに上の画像のカスタマコードは、郵便番号「550-0013」／町域名以降の住所「1-4-26」（1丁目4番26）／ビルの「8」階という意味になります。
郵便番号バーコードのサイズは、印刷に使うなら既定のままでよいはずです。変更したいときは、Windows FormsやUWPと同様に、AutoSizeプロパティをfalseにし、BarHeightにもHeightプロパティと同じ値をセットします（前述したWindows Formsの解説もご覧ください）。
そのほか、BarCodeコントロールの詳細については、BarCode for WPFの製品ヘルプを参照してください。なお、上の画像に見える［画像を保存］ボタンについては、後ほど解説します。
入力したテキストが正しくないときは？
ここで、正しくないデータを与えたときにどうなるかを見ておきましょう。
郵便番号バーコードは、表示可能な桁数と文字種が決まっています。まず、長すぎる文字列を与えると、バーコードの画像に代わって「データ長が正しくありません」というエラーメッセージが表示されます（次の画像）。
規定外の文字を与えた場合は、バーコードの画像に代わって「無効なバーコードデータです」というエラーメッセージが表示されます（次の画像）。郵便番号のカスタマコードは、アルファベットの大文字はOKですが、小文字は許されていません。
このように分かりやすいエラー表示がされるのも、BarCodeコントロールの特徴です。なお、エラーが出ているときは、BarCodeコントロールのEncodingExceptionプロパティでそのエラーを取得できます。
ISBNバーコードをFlexGridに表示してみよう (UWP編)
ISBNコードは書籍に付ける13桁のJANコードです。JANコードは、世界的にはEANコードと呼ばれています。13桁のISBNコードは、バーコードのタイプとしてはEAN-13ということになります。
BarCodeコントロールも、ほかの一般的なコントロールと同様に、コンテナコントロールの中に配置できます。グリッドの列にバーコードを表示してみましょう。ここではグリッドとして、ComponentOneのFlexGridコントロールを使います（もちろん、標準のGridViewコントロールなどでも表示できます）。
ここではUWPで紹介していきますが、Windows Forms／WPFでもFlexGridコントロールの基本的な使い方は同じです。
ライセンスと参照の設定
プロジェクトを作成したら、「QRコードを表示してみよう（UWP編）」と同様にして、ライセンスキーの取得と設定、および、参照の追加を行います。今度はFlexGridコントロールも使うので、参照には［C1.UWP］と［C1.UWP.BarCode］のほかに、［C1.UWP.FlexGrid］も追加します。
XAMLの記述
まず、XAMLの先頭に名前空間の定義を追加します（次のコード）。
<Page
……省略……
xmlns:c1BarCode="using:C1.Xaml.BarCode"
xmlns:c1FlexGrid="using:C1.Xaml.FlexGrid"
x:Class="IsbnUwp.MainPage"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
次にコントロールを記述していきます。次のコードに、FlexGridコントロールと、その中に配置したBarCodeコントロールの部分だけを掲載します。表示のときはBarCodeコントロールを使い、そのセルをダブルクリックして編集モードにしたときはTexBoxコントロールに切り替えるようにしています。XAMLコードの全体は、GitHubでご覧ください。
<c1FlexGrid:C1FlexGrid x:Name="flexgrid1" AutoGenerateColumns="False"
……省略…… >
<c1FlexGrid:C1FlexGrid.Columns>
……省略……
<c1FlexGrid:Column Header="ISBN" ……省略……
Binding="{Binding Isbn,Mode=TwoWay}" >
<!-- 表示時のテンプレート -->
<c1FlexGrid:Column.CellTemplate>
<DataTemplate>
<Grid VerticalAlignment="Center">
<c1BarCode:C1BarCode
Text="{Binding IsbnWithoutCheckDigit, Mode=OneWay}"
CaptionPosition="Above" CaptionGrouping="True"
CodeType="EAN_13" />
</Grid>
</DataTemplate>
</c1FlexGrid:Column.CellTemplate>
<!-- 編集時のテンプレート -->
<c1FlexGrid:Column.CellEditingTemplate>
<DataTemplate>
<Grid VerticalAlignment="Center">
<TextBox Text="{Binding Isbn, Mode=TwoWay}" />
</Grid>
</DataTemplate>
</c1FlexGrid:Column.CellEditingTemplate>
</c1FlexGrid:Column>
……省略……
</c1FlexGrid:C1FlexGrid>
バインドする書籍データ
上のFlexGridコントロールにバインドしたいデータは、次のコードのような書籍のデータです（Books.csファイル）。BarCodeコントロールはチェックディジットを自動的に計算してくれるので、チェックディジット抜きのISBNを返すIsbnWithoutCheckDigitプロパティも作ってあります（上のXAMLでBarCodeコントロールにバインドしています）。
// 書籍
public class Book
{
public string Title { get; set; } // 書籍のタイトル
public string Isbn { get; set; } // ISBNコード（13桁、ハイフン無し）
public string Price { get; set; } // 価格
// ISBNコードから末尾のチェックディジットを抜いたもの
public string IsbnWithoutCheckDigit
=> (Isbn?.Length > 12) ? Isbn.Substring(0, 12) : Isbn;
public Book(string title, string isbn, string price)
{
this.Title = title; this.Isbn = isbn; this.Price = price;
}
}
// 書籍のデータストア
public class Books
{
private static List<Book> _books;
public static IList<Book> GetData()
{
if (_books == null)
// ……省略……
return _books;
}
}
実際に使うときは、上のコードのBooks.GetDataメソッドを呼び出してIList<Book>コレクションを取得し、それをFlexGridコントロールに与えます。
なお、これはサンプルということで上のコードの省略した部分でデータをハードコーディングしていますが、実際のアプリではWebサービスなどからデータを取得してくることになるでしょう。
データを表示する
上のデータを、次のコードのようにして画面が表示されるときにFlexGridコントロールのItemsSourceプロパティにセットします（MainPage.xaml.csファイル）。
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
this.flexgrid1.ItemsSource = Books.GetData();
}
これで、次の画像のようにグリッドの中にバーコードが表示されます。FlexGridコントロールの特徴として、ヘッダーをクリックするとソートされます（画像は書名順にソートしたところ）。また、CellEditingTemplateが定義してあると、セルのダブルクリックで編集モードに切り替わります。なお、画像に見える［Excel出力］ボタン／［PDF出力］ボタンについては、後ほど解説します。
画像ファイルに保存してみよう
バーコードは画面に表示するだけでなく、いろいろと出力もしたいですね。まずは、画像ファイルとして出力してみましょう。
画像データの扱いはプラットフォームごとに異なり、画像ファイルに保存する方法もプラットフォームごとにさまざまです。BarCodeコントロールでも、残念ながらプラットフォーム共通のコードとはいきません。
Windows Forms
Windows FormsのImageクラス（System.Drawing名前空間）は、その画像をファイルに保存するためのSaveメソッドを持っています。そして、BarCodeコントロールは、表示しているバーコードの画像を返すImageプロパティを持っています。ですから、［画像を保存］ボタンのイベントハンドラーで、BarCodeコントロールのImageプロパティのSaveメソッドを呼び出せばいいです。
ファイル保存ダイアログを出してユーザーに保存先を指定してもらい、そこに画像データを書き出すコードは次の通りです（Form1.csファイル）。
private void SaveButton_Click(object sender, EventArgs e)
{
// ファイル保存ダイアログを出す
var saveFileDialog = new SaveFileDialog();
saveFileDialog.Filter = "PNG Image|*.png";
saveFileDialog.Title = "Save an Image File";
saveFileDialog.DefaultExt = ".png";
saveFileDialog.FileName = "BarCodeControlSample.png";
saveFileDialog.InitialDirectory
= Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);
saveFileDialog.ShowDialog();
if (!string.IsNullOrEmpty(saveFileDialog.FileName))
{
// 画像をファイルに保存する
this.BarCode1.Image.Save(saveFileDialog.FileName, ImageFormat.Png);
}
}
WPF
WPF用のBarCodeコントロールは、画像データをストリームに保存するSaveメソッドを持っています。
ファイル保存ダイアログを出してユーザーに保存先を指定してもらい、そこに画像データを書き出すコードは次の通りです（MainWindow.xaml.csファイル）。
private void SaveButton_Click(object sender, RoutedEventArgs e)
{
// ファイル保存ダイアログを出す
var saveFileDialog = new SaveFileDialog();
// ……省略（Windows Formsと同じ）……
if (saveFileDialog.ShowDialog() ?? false)
{
// 画像をファイルに保存する
using (var st = saveFileDialog.OpenFile())
{
this.BarCode1.Save(st, C1.WPF.BarCode.ImageFormat.Png);
}
}
}
UWP
UWP用のBarCodeコントロールは、画像データをストリームに保存するSaveAsyncメソッドを持っています。
ファイル保存ダイアログを出してユーザーに保存先を指定してもらい、そこに画像データを書き出すコードは次の通りです（MainPage.xaml.csファイル）。SaveAsyncメソッドは非同期メソッドなので、非同期処理の完了後に再開するためのawaitキーワードが呼び出し部分に、asyncキーワードがメソッドのシグネチャに必要です。
private async void SaveButton_Click(object sender, RoutedEventArgs e)
{
// ファイル保存ダイアログを出す
var savePicker = new FileSavePicker();
savePicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
savePicker.FileTypeChoices.Add("PNG ファイル", new List() { ".png" });
var file = await savePicker.PickSaveFileAsync();
if (file != null)
{
// 画像をファイルに保存する
using (var st = await file.OpenStreamForWriteAsync())
await this.BarCode1.SaveAsync(st, C1.Xaml.BarCode.ImageFormat.Png);
}
}
ExcelファイルやPDFファイルに出力してみよう（UWP編）
CompnentOneのほかのコンポーネントと組み合わせることで、バーコードを印刷したり、他の形式で保存したりできます。ここでは、ExcelファイルとPDFファイルへの出力を紹介します。
UWPで紹介していきますが、Windows Forms／WPFでもExcelコンポーネントやFlexReportコントロールなどの基本的な使い方は同じです。
Excelファイルを直接書き出す
Excelコンポーネントを使うと、Excelがインストールされていなくても、Excelファイルを書き出すことができます。前述した「ISBNバーコードをFlexGridに表示してみよう (UWP編)」のアプリに、Excelファイルへの書き出し機能を追加してみます。
ExcelファイルにはBarCodeコントロールを含められないので、バーコードは画像データとしてExcelファイルに貼り付けることになります。グリッドの中に自動生成されたBarCodeコントロールへアクセスするのはとても面倒なので、グリッドとは別にBarCodeコントロールを見えないところに配置しておきます（MainPage.xamlファイルの20行目付近）。
FlexGridに表示されているデータをExcelファイルに書き出すコードの概略は、次のようになります（コードの全体はMainPage.xaml.csファイルをご覧ください）。
private async void ExcelButton_Click(object sender, RoutedEventArgs e)
{
// FlexGrid に表示されているデータ
var currentData = this.flexgrid1.Rows.Select(r => r.DataItem).Cast<Book>();
// 新しい Excel ワークブックを作成
var xlBook = new C1XLBook();
// デフォルトで作成されたシートを取得
XLSheet sheet = xlBook.Sheets[0];
// シートの中身を書き込みます
int rowIndex = 0;
// ……省略……
foreach (var book in currentData)
{
rowIndex++;
// 見えないところに配置したBarCodeコントロールを使って、バーコードの画像を作る
this.HiddenBarCode.Text = book.IsbnWithoutCheckDigit;
C1Bitmap bitmap = new C1Bitmap();
using (var ms = new InMemoryRandomAccessStream().AsStream())
{
await this.HiddenBarCode.SaveAsync(ms, ImageFormat.Png);
bitmap.Load(ms);
}
// ……省略……
// 1行分のデータとバーコード画像をセット
sheet[rowIndex, 0].Value = book.Title;
sheet[rowIndex, 1].Value = book.Isbn;
sheet[rowIndex, 2].Value = bitmap; // 上で作成したバーコードの画像
sheet[rowIndex, 3].Value = book.Price;
}
// Excel ファイルへの書き出し
var picker = new FileSavePicker()
// ……省略……
var file = await picker.PickSaveFileAsync();
if (file != null)
{
var fileFormat = Path.GetExtension(file.Path).Equals(".xls")
? FileFormat.OpenXmlTemplate : FileFormat.OpenXml;
await xlBook.SaveAsync(file, fileFormat);
}
}
これで保存されたExcelファイルをExcelで開くと、次の画像のようになっています。
なお、次に説明するFlexReportコンポーネントを使っているときは、その出力先をPDFからExcelに変更するだけでExcelファイルに書き出せます。その場合は、バーコードの画像をいちいち作る必要はありません。FlexReportコンポーネントがやってくれます。
PDFファイルに書き出す
PDFファイルに書き出すには、PDFコンポーネントやFlexReportコンポーネントなどが使えます。PDFコンポーネントは、自前のコードで全てを描画しなければならないので、自由度は高いのですが少々面倒です。FlexReportコンポーネントは、デザイナで簡単に帳票などの定義が作れますし、PDFだけでなくExcel／Word／各種画像ファイルなどにも出力でき、また、直接印刷することも可能です。ここでは、前述した「ISBNバーコードをFlexGridに表示してみよう (UWP編)」のアプリに、FlexReportを使ってPDFファイルへの書き出し機能を追加する概要を紹介します。
まず、FlexReportデザイナで帳票を定義して、「.flxr」ファイルに書き出し、プロジェクトのAssetsフォルダに保存しておきます（プロパティペインのビルドアクションを［コンテンツ］に変えておいてください）。FlexReportデザイナは、Windows Forms用のComponentOneをインストールすると一緒に導入されます。
FlexReportは、内部的にBarCodeコントロールを利用できるようになっています。FlexReportデザイナで「バーコードフィールド」を定義すると、実行時に各プラットフォームのBarCodeコントロールに変換されます。FlexReportデザイナの使い方は割愛するので、詳しくはFlexReport for WinFormsの製品ヘルプを参照してください。
FlexReportの定義ファイルが準備できたら、あとは次のようなコードを書くだけです（MainPage.xaml.csファイル）。
private async void PdfButton_Click(object sender, RoutedEventArgs e)
{
// 現在、FlexGridに表示されているデータ
var currentData = this.flexgrid1.Rows.Select(r => r.DataItem).Cast<Book>();
// FlexReportの定義を読み込む
var rpt = new C1FlexReport();
using (var stream = File.OpenRead("Assets/BooksReport.flxr"))
rpt.Load(stream, "BooksReport");
// データを連結
rpt.DataSource.Recordset = currentData.ToList(); // IEnumerable<T>は不可
// レポートを生成
await rpt.RenderAsync();
// 印刷する場合
//await rpt.ShowPrintUIAsync();
// PDFファイルに直接保存する場合
var picker = new FileSavePicker()
// ……省略……
var file = await picker.PickSaveFileAsync();
if (file != null)
{
// 出力先となるPdfFilterオブジェクトを作成
var filter = new PdfFilter();
filter.StorageFile = file;
// Windows Formsなどでは、filter.FileName = file.Path;とする
// ファイルへ出力
await rpt.RenderToFilterAsync(filter);
}
}
これで保存されたPDFファイルをEdgeで開くと、次の画像のようになっています。
FlexReportデザイナに接続するデータ
UWPの場合、FlexReportコンポーネントに接続するデータはIList<T>コレクションでいいのですが、それではFlexReportデザイナに接続できません。FlexReportデザイナで読み込めるコレクションにするには、IC1FlexReportRecordsetインターフェイスとIC1FlexReportExternalRecordsetインターフェイスを実装する必要があります。
詳しくは公式ブログ記事「動的に生成されるサンプルデータを利用した帳票デザイン」の中の「カスタムデータソース」の項をご覧ください。
まとめ
ComponentOneのBarCodeコントロールの使い方を駆け足で見てきましたが、いかがだったでしょうか。
BarCodeコントロールは、簡単に各種バーコードを表示でき、画像ファイルに保存も可能です。プラットフォームが変わっても基本的な使い方は同じですし、また、誤ったコードを与えると分かりやすいエラーメッセージを表示してくれるなど、使い勝手もよいです。さらに、ComponentOneのほかのコンポーネントと組み合わせることで、ExcelファイルやPDFファイルなどに出力したり、印刷したりもできます。
バーコードを扱うWindowsアプリを作ろうと思ったら、ぜひデモアプリケーションやトライアル版を試してみてください。
