Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

目次

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の先頭に名前空間の定義を追加します(次のコード)。

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でご覧ください。

FlexGridとその中に配置したBarCode
<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ファイル)。

書籍データを取得してFlexGridに表示する
protected override void OnNavigatedTo(NavigationEventArgs e)
{
  base.OnNavigatedTo(e);

  this.flexgrid1.ItemsSource = Books.GetData();
}

 これで、次の画像のようにグリッドの中にバーコードが表示されます。FlexGridコントロールの特徴として、ヘッダーをクリックするとソートされます(画像は書名順にソートしたところ)。また、CellEditingTemplateが定義してあると、セルのダブルクリックで編集モードに切り替わります。なお、画像に見える[Excel出力]ボタン/[PDF出力]ボタンについては、後ほど解説します。

FlexGridコントロールの列にBarCodeコントロールを配置した例
FlexGridコントロールの列にBarCodeコントロールを配置した例

関連リンク

  • 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