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


WPFでDataGridを使ってみる

WPFでDataGridを使ってみる記事となります。
実際にDataGridを使うための操作とC#のサンプルコードを以下に記します。
プロジェクトの作成手順など不要でサンプルコードを見たい方は サンプルコード をクリックしてください。

動作確認環境

  • Windows 11 ver.22H2
  • Visual Studio 2022
  • .NET 6.0

参考サイト

DataGridのサンプルを作ってみる

以下、プロジェクトの作成、DataGridサンプルコード作成および実行までの手順を記します。

プロジェクトの作成

以下の手順でDataGridを使ったプロジェクトを作成します。

  1. Visual Studio 2022を起動します。(Visual Studio 2019でも同様の操作になると思います。)
     
  2. 「新しいプロジェクトの作成」をクリックします。
     
    01.png
     
  3. 「WPF アプリケーション」を選択し「次へ」ボタンをクリックします。
    C#, Windows, デスクトップ でフィルタしました。
     
    02.png
     
  4. プロジェクト名に DataGridSample と入力し「次へ」ボタンをクリックしました。
     
    03.png
     
  5. フレームワークに「.NET 6.0 (長期的なサポート)」を選択し「作成」ボタンをクリックします。
     
    04.png
     

DataGridに設定し表示されるデータ格納するクラスを作成

DataGridに表示する情報を格納する DataGridItem クラスを新規に作成します。
クラスはDataGridの1行に相当するデータを保持します。

以下のようなデータを保持することにします。

  • 都道府県名(prefectures)
  • 市区町村(cities)
  • 住所(address)
  1. クラスの作成
    クラス名は DataGridItem とします。
     
    DataGridSample を右右クリックし、「追加」→「クラス」をクリックします。
     
    11.png
     
  2. クラスが選択されていることを確認し、名前に DataGridItem.cs と入力し「追加」ボタンをクリックします。
     
    12.png
     
  3. DataGridItem.csソースが作成されます。
     
    13.png
     
  4. DataGridItem.cs を以下のようにプログラミングします。
    namespace DataGridSample
    {
        internal class DataGridItem
        {
            public DataGridItem(string prefectures, string cities, string address)
            {
                Prefectures = prefectures;
                Cities = cities;
                Address = address;
            }
    
            public string Prefectures { get; set; }
            public string Cities { get; set; }
            public string Address { get; set; }
        }
    }
    

DataGridに表示するデータの設定

MainWindow.xaml.cs にDataGridに表示する都道府県、市区町村、住所の値を持つ DataGridItem オブジェクトを作成します。

  1. MainWindow.xaml の▷をクリックし MainWindow.xaml.cs をクリックします。
     
    14.png
     
  2. MainWindow.xaml.cs を以下のようにプログラミングします。
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;
    
    namespace DataGridSample
    {
        /// <summary>
        /// Interaction logic for MainWindow.xaml
        /// </summary>
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
    
                List<DataGridItem> dataGridItems = new List<DataGridItem>();
                dataGridItems.Add(new DataGridItem("東京都", "千代田区", "千代田"));
                dataGridItems.Add(new DataGridItem("千葉県", "千葉市", "中央区"));
                dataGridItems.Add(new DataGridItem("埼玉県", "さいたま市", "浦和区"));
                dataGridItems.Add(new DataGridItem("神奈川県", "横浜市", "中区"));
                dataGridItems.Add(new DataGridItem("群馬県", "前橋市", "大手町"));
                dataGridItems.Add(new DataGridItem("栃木県", "宇都宮市", "塙田"));
                dataGridItems.Add(new DataGridItem("茨城県", "水戸市", "笠原町"));
                dataGridItems.Add(new DataGridItem("山梨県", "甲府市", "丸の内"));
            }
        }
    }

画面定義の MainWindow.xaml の修正

画面定義である、MainWindow.xaml をプログラミングします。

  1. 右側の「ツールボックス」をクリックします。
  2. ツールボックスが表示されるので、 DataGrid と入力します。
  3. コモンWPFコントロールが表示されるので、DataGrid を MainWindow にドラッグアンドドロップします。
     
    21.png
     

以下のキャプチャのように配置されます。

 
22.png
 
  1. XAMLを修正します。
    • 修正箇所
          <Grid>
              <DataGrid d:ItemsSource="{d:SampleData ItemCount=5}"/>
      
          </Grid>
    • 修正後
          <Grid>
              <DataGrid Name="PrefItems" AutoGenerateColumns="False">
                  <DataGrid.Columns>
                      <DataGridTextColumn Header="都道府県" Binding="{Binding Prefectures}"/>
                      <DataGridTextColumn Header="市区町村" Binding="{Binding Cities}"/>
                      <DataGridTextColumn Header="住所" Binding="{Binding Address}"/>
                  </DataGrid.Columns>
              </DataGrid>
          </Grid>
  2. XAMLに記述したDataGridItemsを MainWindow.xaml.cs に宣言する
    MainWindow.xaml に記述した Name="DataGridItems" 以下の部分を MainWindow.xaml.cs に追記します。
    • 追記前(抜粋)
              public MainWindow()
              {
                  InitializeComponent();
      
                  List<DataGridItem> dataGridItems = new List<DataGridItem>();
                  dataGridItems.Add(new DataGridItem("東京都", "千代田区", "千代田"));
                  dataGridItems.Add(new DataGridItem("千葉県", "千葉市", "中央区"));
                  dataGridItems.Add(new DataGridItem("埼玉県", "さいたま市", "浦和区"));
                  dataGridItems.Add(new DataGridItem("神奈川県", "横浜市", "中区"));
                  dataGridItems.Add(new DataGridItem("群馬県", "前橋市", "大手町"));
                  dataGridItems.Add(new DataGridItem("栃木県", "宇都宮市", "塙田"));
                  dataGridItems.Add(new DataGridItem("茨城県", "水戸市", "笠原町"));
                  dataGridItems.Add(new DataGridItem("山梨県", "甲府市", "丸の内"));
              }
    • 追記後(抜粋)
              public MainWindow()
              {
                  InitializeComponent();
      
                  List<DataGridItem> dataGridItems = new List<DataGridItem>();
                  dataGridItems.Add(new DataGridItem("東京都", "千代田区", "千代田"));
                  dataGridItems.Add(new DataGridItem("千葉県", "千葉市", "中央区"));
                  dataGridItems.Add(new DataGridItem("埼玉県", "さいたま市", "浦和区"));
                  dataGridItems.Add(new DataGridItem("神奈川県", "横浜市", "中区"));
                  dataGridItems.Add(new DataGridItem("群馬県", "前橋市", "大手町"));
                  dataGridItems.Add(new DataGridItem("栃木県", "宇都宮市", "塙田"));
                  dataGridItems.Add(new DataGridItem("茨城県", "水戸市", "笠原町"));
                  dataGridItems.Add(new DataGridItem("山梨県", "甲府市", "丸の内"));
      
                  PrefItems.ItemsSource = dataGridItems;
              }
      以下を追加しました。
      PrefItems.ItemsSource = dataGridItems;

実行してみる

ビルドして実行してみます。
ビルドエラーが発生するようであれば、プログラムや操作に誤りがないか確認してください。

  1. 以下の手順でビルドします。
    「ビルド」→「ソリューションのビルド」
     
    31.png
     
  2. 実行ボタンを押し作成したプログラムを実行します。
     
    32.png
     
  3. 実行結果 無事実行されDataGridに値が設定され表示されました。
     
    33.png

以上、DataGridのサンプルとなります。


添付ファイル: file33.png 105件 [詳細] file32.png 99件 [詳細] file31.png 94件 [詳細] file22.png 100件 [詳細] file21.png 104件 [詳細] file14.png 89件 [詳細] file13.png 104件 [詳細] file12.png 95件 [詳細] file11.png 116件 [詳細] file05.png 58件 [詳細] file04.png 88件 [詳細] file03.png 115件 [詳細] file02.png 102件 [詳細] file01.png 114件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2023-04-23 (日) 18:27:29