fc2ブログ

DataTableを利用したDataGrid表示

 DataGridに表示するデータにDataTableを使用することもできます。
 この場合、DataTableの内容をそのまま表示すればよいだけなのでXAMLでのカラム定義は必要ありません。(カラムの自動実装機能を利用します)
 Modelで表示したテーブルを作成し、ViewModel経由でDataGridとデータバインディングすればOKです。
 試しに単純なDataTableを作成しDataGridとバインディングしてみます。
using Livet;
using System.Data;

namespace DataGridDemo.ViewModels
{
    public class MainWindowViewModel : ViewModel
    {
        public MainWindowViewModel()
        {
            Table = new DataTable();

            // カラム作成
            var colmun1 = new DataColumn()
            {
                ColumnName = "名前",
                ReadOnly = true,
                DataType = typeof(string)
            };
            Table.Columns.Add(colmun1);

            var column2 = new DataColumn()
            {
                ColumnName = "値",
                DataType = typeof(int)
            };
            Table.Columns.Add(column2);

            // データ挿入
            var row1 = Table.NewRow();
            row1["名前"] = "Name1";
            row1["値"] = 123;
            Table.Rows.Add(row1);

            var row2 = Table.NewRow();
            row2["名前"] = "Name2";
            row2["値"] = 345;
            Table.Rows.Add(row2);
        }

        public DataTable Table { get; private set; }

        public void AddNewData()
        {
            var row = Table.NewRow();
            row["名前"] = "新規";
            row["値"] = 100;
            Table.Rows.Add(row);
        }

        // Tableの値に+1000する
        public void ChangeValue()
        {
            foreach(DataRow row in Table.Rows)
            {
                // カラム定義でReadOnlyをtrueにしていると例外発生
                var value = row.Field<int>("値");
                row.SetField("値", value + 1000);
            }
        }
    }
}
 DataTable作成はModelでやるべきことですが、今回は簡単なサンプルなのでViewModelで作っています。
 DataTableを使用するにはSystem.DataとSystem.Data.DataSetExtensionsの参照を追加しておく必要があります。
 DataTableの作成方法ですが、DataTableインスタンスを作成した後にカラム定義(DataColumn)を追加します。
 この例では「名前」と「値」の2カラムを追加しています。
 DataColumnのColumnNameの値はDataGridのヘッダー名として使用されます。
 最低限、ColumnNameとDataTypeぐらいは指定しておきましょう。

 次に行(データ)を挿入していきます。
 データはDataTableのNewRowメソッドでインスタンスを作成し、インデクサを使用して値を設定します。
 後はDataTableのRowsプロパティに追加するだけです。

 DataTableのデータにアクセスする場合はField<T>メソッドとSetFieldメソッドを利用します。
 カラム定義でReadOnlyをtrueにしている場合はSetFieldメソッド実行時に例外が発生します。

 これでDataTableの用意はできました。後はXAMLでバインディングするだけです。
<Window x:Class="DataGridDemo.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
        xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
        xmlns:l="http://schemas.livet-mvvm.net/2011/wpf"
        xmlns:v="clr-namespace:DataGridDemo.Views"
        xmlns:vm="clr-namespace:DataGridDemo.ViewModels"
        Title="MainWindow" Height="350" Width="525">
    
    <Window.DataContext>
        <vm:MainWindowViewModel/>
    </Window.DataContext>
    
    <StackPanel>
        <DataGrid ItemsSource="{Binding Table}" AutoGenerateColumns="True"/>
        <Button Content="1行追加">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <l:LivetCallMethodAction MethodTarget="{Binding}" MethodName="AddNewData"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <Button Content="値変更">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <l:LivetCallMethodAction MethodTarget="{Binding}" MethodName="ChangeValue"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </StackPanel>
</Window>
 DataTableをDataGridのItemsSourceにバインディングし、AutoGenerateColumnsをTrueにするだけでOKです。
 このサンプルコードを実行すると以下の様になります。
DataTableを使ったDataGrid
 この画像は「1行追加」ボタンを押した後に「値変更」ボタンを押した画像です。
 DataTableの内容が変更された場合、DataGridも変更されていることが確認できます。

 DataTableを利用する方法は、データ量が少なく閲覧のみの場合には有用だと思います。
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

カレンダー
06 | 2015/07 | 08
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -
全記事表示リンク

全ての記事を表示する

カテゴリ
タグリスト

月別アーカイブ
04  10  11  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09 
最新記事
リンク
最新コメント
検索フォーム
Amazon