SHOEISHA iD

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

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

現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(SPREAD)(AD)

SPREAD for WPFでMVVMパターンのアプリケーションを作成する

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

 WPFの最大の特長といえば、UIとコマンドロジックを分離できるMVVM(Model-View-ViewModel)パターンでのアプリケーション開発が可能であることです。MVVMは、WPFだけではなくモバイルアプリやUWPでも適用でき、MVVMの発表から10年以上経つ現在も注目されています。SPREAD for WPFでももちろんMVVMの利用をサポートしています。本記事では、SPREAD for WPFを用いて、MVVMパターンを使用したアプリケーションを作成する方法を紹介します。

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

SPREAD for WPFとは

 累計販売ライセンス140,000本を超え、グレープシティを代表する製品の一つ「SPREAD」シリーズのWPF向けコンポーネントです。SPREADの最大の特長であるExcelライクな外観や操作性のほか、1レコード複数行表示やグループ集計など、独自機能も備えます。詳しい機能は、製品情報サイトで紹介しておりますので、是非ご一読ください。また、ClickOnceデモも公開しています。

対象読者

  • Visual Basic、C#を使ってプログラムを作ったことのある方
  • 業務アプリケーションにグリッドを使用している方
  • MVVMを使用したWPFアプリケーション開発に興味のある方

準備

 本記事で紹介するサンプルを実行するには、Visual Studio 2010/2012/2013/2015およびSPREAD for WPF 1.0Jの製品版またはトライアル版のインストールが必要です。トライアル版はこちらからダウンロードしていただけます。インストール方法や、Visual Studioのツールボックスにコントロールを追加する方法については、過去記事「いよいよ登場! WPFをブレイクスルーする魅惑のコンポーネント「SPREAD for WPF 1.0J」で詳しく解説されていますので、そちらをご覧ください。

サンプルアプリケーションの概要

 コード、製品名、価格というフィールドを持った製品データ一覧をSPREADに表示し、SPREADのボタン型セルを使用してコマンドを実行するという簡単なWPFアプリケーションを、MVVMパターンで作成します。

データをSPREADに表示する(1)

 まずは、製品データを単純にSPREADに表示するだけのアプリケーションを作成しましょう。SpreadWPF_MVVMという名前で新規プロジェクトを作成します。

モデルを作成

 ここでは、単純にデータをモデル化したものをモデルとして定義します。ProductModelという名称のクラスを作成し、製品(コード、名称、価格)データのコレクションを生成、そのコレクションを返すメソッドを用意します。

VB(ProductModel.vb)
Imports System.Collections.ObjectModel

Public Class Product
    Public Property Code As String
    Public Property Name As String
    Public Property Price As Integer
End Class

Public Class ProductModel
    Private _items As ObservableCollection(Of Product)

    Public Sub New()
        _items = New ObservableCollection(Of Product) From
        {
            New Product() With {.Code = "0000001", .Name = "アーモンド", .Price = 200},
            New Product() With {.Code = "0000002", .Name = "グレープシード", .Price = 200},
            New Product() With {.Code = "0000003", .Name = "オリーブ", .Price = 320},
            New Product() With {.Code = "0000004", .Name = "ゴマ油", .Price = 300},
            New Product() With {.Code = "0000005", .Name = "ひまわり", .Price = 200},
            New Product() With {.Code = "0000006", .Name = "えごま", .Price = 300},
            New Product() With {.Code = "0000007", .Name = "アルガン", .Price = 800},
            New Product() With {.Code = "0000008", .Name = "ココナッツ", .Price = 720},
            New Product() With {.Code = "0000009", .Name = "ウォールナッツ", .Price = 400},
            New Product() With {.Code = "0000010", .Name = "亜麻仁油", .Price = 700}
        }
    End Sub

    ' データコレクションを返します。
    Public Function GetProducts() As ObservableCollection(Of Product)
        Return _items
    End Function
End Class
C#(ProductModel.cs)
// 次の名前空間宣言を追加しています
// using System.Collections.ObjectModel;

public class Product
{
    public string Code { get; set; }
    public string Name { get; set; }
    public int Price { get; set; }
    public int Number { get; set; }
}

public class ProductModel
{
    private ObservableCollection<Product> _items;
    public ProductModel()
    {
        _items = new ObservableCollection<Product>
        {
            new Product() { Code = "0000001", Name = "アーモンド", Price = 200 },
            new Product() { Code = "0000002", Name = "グレープシード", Price = 200 },
            new Product() { Code = "0000003", Name = "オリーブ", Price = 320 },
            new Product() { Code = "0000004", Name = "ゴマ油", Price = 300 },
            new Product() { Code = "0000005", Name = "ひまわり", Price = 200 },
            new Product() { Code = "0000006", Name = "えごま", Price = 300 },
            new Product() { Code = "0000007", Name = "アルガン", Price = 800 },
            new Product() { Code = "0000008", Name = "ココナッツ", Price = 720 },
            new Product() { Code = "0000009", Name = "ウォールナッツ", Price = 400 },
            new Product() { Code = "0000010", Name = "亜麻仁油", Price = 700 }
        };
    }

    public ObservableCollection<Product> GetProducts()
    {
        return _items;
    }
}

次のページ
データをSPREADに表示する(2)

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

  • このエントリーをはてなブックマークに追加
現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(SPREAD)連載記事一覧

もっと読む

この記事の著者

グレープシティ株式会社 SPREADチーム(グレープシティカブシキガイシャ スプレッドチーム)

 宮城県仙台市に本社を構えるグレープシティでは、日本の業務に適したシステムをより早く開発するためのソフトウェアを提供しています。エンドユーザーの利用しやすさ、幅広いユーザー環境への対応、そして何よりプログラマの作業を軽減することを一番に目指しています。 SPREADは、ExcelライクなUIを実現するグリッドコンポーネントの定番として、日本のみならず全世界で数多くの開発者に利用されている製品。同チームはWindows Forms、ASP.NET、WPFといった.NET向け製品のほか、HTML...

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

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

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

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10195 2017/05/30 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング