SHOEISHA iD

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

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

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

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

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

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コントロールを配置した例

次のページ
画像ファイルに保存してみよう

関連リンク

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

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

biac(ばいあっく)

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

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング