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

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

2017/05/30 14:00

ポスト

データをSPREADに表示する（2）

ビューモデルを作成

　次に、ビューモデルに該当するクラスをProductViewModelという名称で、新規に作成します。ビューモデルクラスは値が変更された場合に、ビューに変更を通知するため、INotifyPropertyChangedインタフェースを実装します。まずは、データをSPREADに表示するだけですので、モデルからデータを取得します。ビューモデルにプロパティとして定義されるデータコレクションにデータが取得されると、ビューに通知が行くという仕組みです。

VB（ProductViewModel.vb）

Imports System.Collections.ObjectModel
Imports System.ComponentModel

Public Class ProductViewModel
    Implements INotifyPropertyChanged

    Private _products As ObservableCollection(Of Product)
    Private _model As ProductModel

    Public Sub New()
        ' モデルからデータを取得します。
        _model = New ProductModel()
        _products = _model.GetProducts()
    End Sub

    ' データのコレクション
    Public Property Products As ObservableCollection(Of Product)
        Get
            Return _products
        End Get
        Set(value As ObservableCollection(Of Product))
            If _products.Equals(value) Then
                _products = value
                ' ビューに値の変更を通知します。
                OnPropertyChanged("Products")
            End If
        End Set
    End Property

    Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged

    ' 値が変更されるとビューに変更を通知します。
    Protected Overridable Sub OnPropertyChanged(propname As String)
        RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propname))
    End Sub
End Class

C#（ProductViewModel.cs）

// 次の名前空間宣言を追加しています。
// using System.Collections.ObjectModel;
// using System.ComponentModel;

public class ProductViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Product> _products;
    private ProductModel _model;

    public ProductViewModel()
    {
        // モデルからデータを取得します。
        _model = new ProductModel();
        _products = _model.GetProducts();
    }

    // データのコレクション
    public ObservableCollection<Product> Products
    {
        get { return _products; }
        set
        {
            if (_products != value)
            {
                _products = value;
                // Viewに値の変更を通知します。
                OnPropertyChanged("Products");
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    // 値が変更されるとビューに変更を通知します。
    protected virtual void OnPropertyChanged(string propName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }
}

ビューを作成

　最後にビューに該当するUIを作成します。データを表示するUIには、SPREAD for WPFを使用します。MainWindow.xamlをVisual Studioのデザイン画面で開き、ツールボックスからSPREAD（gcSpreadGrid1）を配置します。

　WindowのDataContextプロパティにビューモデルを設定し、GcSpreadGridクラスのItemSourceプロパティに、ProductViewModelクラスで定義したデータコレクションにバインドします。

備考

　XAMLコードでは、次のような名前空間を宣言しています。

xmlns:local="clr-namespace:SpreadWPF_MVVM"

XAML（MainWindow.xaml）

<Window.DataContext>
    <local:ProductViewModel/>
</Window.DataContext>
<StackPanel>
    <sg:GcSpreadGrid x:Name="gcSpreadGrid1" ItemsSource="{Binding Products}" >
    </sg:GcSpreadGrid>
</StackPanel>

　コードビハインドでも実装できます。

VB.NET（MainWindow.xaml.vb）

Class MainWindow
    Sub New()
        ' この呼び出しはデザイナーで必要です。
        InitializeComponent()

        Dim viewModel As New ProductViewModel()
        Me.DataContext = viewModel

        ' SPREADとビューモデルのデータコレクションをバインドします。
        Dim binding1 As New Binding("Products")
        GcSpreadGrid1.SetBinding(GcSpreadGrid.ItemsSourceProperty, binding1)
    End Sub
End Class

C#（MainWindow.xaml.cs）

public MainWindow()
{
    InitializeComponent();

    ProductViewModel viewModel = new ProductViewModel();
    this.DataContext = viewModel;

    // SPREADとビューモデルのデータコレクションをバインドします。
    Binding binding1 = new Binding("Products");
    gcSpreadGrid1.SetBinding(GcSpreadGrid.ItemsSourceProperty, binding1);
}

　ビューでの設定は以上です。モデルで定義されたデータがビューモデルを介してビューに表示されるようになります。上記のコードを実行すると次のような画面となります。

　SPREADには連結するデータのデータフィールドを自動的に列として生成する機能があります。既定では列の自動生成が有効になっているため、上記のように連結したデータはすべてSPREADに表示されます。特定のデータ列のみ表示したい場合は、列の自動生成機能を無効にし、列のDataFieldプロパティを使用してデータソースのフィールドに関連付けます。列の自動生成機能は、GcSpreadGridクラスのAutoGenerateColumnsプロパティをfalseに設定すると無効となります。次のコードでは、「Price」列のみ非表示にします。

XAML（MainWindow.xaml）

<Window.DataContext>
    <local:ProductViewModel/>
</Window.DataContext>
<StackPanel>
    <sg:GcSpreadGrid x:Name="gcSpreadGrid1" ItemsSource="{Binding Products}" AutoGenerateColumns="False">
        <sg:GcSpreadGrid.Columns>
            <sg:Column>
                <sg:Column.DataField>
                    <sg:PropertyDataField Property="Code" />
                </sg:Column.DataField>
            </sg:Column>
            <sg:Column>
                <sg:Column.DataField>
                    <sg:PropertyDataField Property="Name" />
                </sg:Column.DataField>
            </sg:Column>
        </sg:GcSpreadGrid.Columns>
    </sg:GcSpreadGrid>
</StackPanel>

　コードビハインドでの同じ設定は、以下のようなコードで可能です。

VB.NET（MainWindow.xaml.vb）

‘ 次の名前空間宣言を追加しています。
‘ Imports GrapeCity.Windows.SpreadGrid

Sub New()
    ' この呼び出しはデザイナーで必要です。
    InitializeComponent()

    ' InitializeComponent() 呼び出しの後で初期化を追加します。
    Dim viewModel As New ProductViewModel()
    Me.DataContext = viewModel

    ' 列の自動生成を無効にします。
    GcSpreadGrid1.AutoGenerateColumns = False

    ' Code、Name列のみ表示します。
    GcSpreadGrid1.Columns(0).DataField = New PropertyDataField() With {.Property = "Code"}
    GcSpreadGrid1.Columns(1).DataField = New PropertyDataField() With {.Property = "Name"}

    ' SPREADとビューモデルのデータコレクションをバインドします。
    Dim spreadBinding As New Binding("Products")
    GcSpreadGrid1.SetBinding(GcSpreadGrid.ItemsSourceProperty, spreadBinding)
End Sub

C#（MainWindows.xaml.cs）

// 次の名前空間宣言を追加しています。
// using GrapeCity.Windows.SpreadGrid;

public MainWindow()
{
    InitializeComponent();

    ProductViewModel viewModel = new ProductViewModel();
    this.DataContext = viewModel;

    // 列の自動生成を無効にします。
    gcSpreadGrid1.AutoGenerateColumns = false;

    // Code、Name列のみ表示します。
    gcSpreadGrid1.Columns[0].DataField = new PropertyDataField() { Property = "Code" };
    gcSpreadGrid1.Columns[1].DataField = new PropertyDataField() { Property = "Name" };

    // SPREADとビューモデルのデータコレクションをバインドします。
    Binding spreadBinding = new Binding("Products");
    gcSpreadGrid1.SetBinding(GcSpreadGrid.ItemsSourceProperty, spreadBinding);

}

備考

　ここでは特に表示列数の指定はしていないため、既定の10列が表示されます。

次のページ
コマンドを作成する

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

印刷用を表示

ポスト

現役エンジニア直伝！「現場」で使えるコンポーネント活用術（SPREAD）連載記事一覧: 2022年版実践WPF業務アプリケーションのアーキテクチャ【設計編／後編】～ドメイン駆動...

2022年版実践WPF業務アプリケーションのアーキテクチャ【設計編／中編】～ドメイン駆動...

2022年版実践WPF業務アプリケーションのアーキテクチャ【設計編／前編】～ドメイン駆動...

もっと読む

この記事の著者: グレープシティ株式会社 SPREADチーム（グレープシティカブシキガイシャスプレッドチーム）

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

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

この著者の最近の執筆記事