![[PukiWiki]](image/logo.png "[PukiWiki]"){kind=logo}
#author("2023-04-23T18:25:03+09:00","","") #author("2023-04-23T18:27:29+09:00","","") #navi(../) * WPFでDataGridを使ってみる [#v97082eb] WPFでDataGridを使ってみる記事となります。~ 実際にDataGridを使うための操作とC#のサンプルコードを以下に記します。~ プロジェクトの作成手順など不要でサンプルコードを見たい方は [[サンプルコード>#SAMPLECODE]] をクリックしてください。 #contents * 動作確認環境 [#j7389ada] -Windows 11 ver.22H2 -Visual Studio 2022 -.NET 6.0 * 参考サイト [#ud708f17] -Microsoft DataGrid クラス~ https://learn.microsoft.com/ja-jp/dotnet/api/system.windows.controls.datagrid * DataGridのサンプルを作ってみる [#d9f1c8c1] 以下、プロジェクトの作成、DataGridサンプルコード作成および実行までの手順を記します。 ** プロジェクトの作成 [#m3cbdd7b] 以下の手順でDataGridを使ったプロジェクトを作成します。 + Visual Studio 2022を起動します。(Visual Studio 2019でも同様の操作になると思います。) #br + 「新しいプロジェクトの作成」をクリックします。 #br #ref(01.png) #br +「WPF アプリケーション」を選択し「次へ」ボタンをクリックします。~ C#, Windows, デスクトップ でフィルタしました。~ #br #ref(02.png) #br + プロジェクト名に DataGridSample と入力し「次へ」ボタンをクリックしました。 #br #ref(03.png) #br +フレームワークに「.NET 6.0 (長期的なサポート)」を選択し「作成」ボタンをクリックします。 #br #ref(04.png) #br ** DataGridに設定し表示されるデータ格納するクラスを作成 [#gf3f281e] DataGridに表示する情報を格納する DataGridItem クラスを新規に作成します。~ クラスはDataGridの1行に相当するデータを保持します。~ 以下のようなデータを保持することにします。~ - 都道府県名(prefectures) - 市区町村(cities) - 住所(address) + クラスの作成~ クラス名は DataGridItem とします。~ #br DataGridSample を右右クリックし、「追加」→「クラス」をクリックします。 #br #ref(11.png) #br +クラスが選択されていることを確認し、名前に DataGridItem.cs と入力し「追加」ボタンをクリックします。 #br #ref(12.png) #br + DataGridItem.csソースが作成されます。~ #br #ref(13.png) #br + 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に表示するデータの設定 [#vc2f1385] MainWindow.xaml.cs にDataGridに表示する都道府県、市区町村、住所の値を持つ DataGridItem オブジェクトを作成します。 + MainWindow.xaml の▷をクリックし MainWindow.xaml.cs をクリックします。 #br #ref(14.png) #br +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 の修正 [#l86b82a9] 画面定義である、MainWindow.xaml をプログラミングします。 + 右側の「ツールボックス」をクリックします。 + ツールボックスが表示されるので、 DataGrid と入力します。 + コモンWPFコントロールが表示されるので、DataGrid を MainWindow にドラッグアンドドロップします。 #br #ref(21.png) #br * 以下のキャプチャのように配置されます。 [#oba006f3] #br #ref(22.png) #br + 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> + 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; ** 実行してみる [#u2d3e6e4] ビルドして実行してみます。~ ビルドエラーが発生するようであれば、プログラムや操作に誤りがないか確認してください。 + 以下の手順でビルドします。~ 「ビルド」→「ソリューションのビルド」 #br #ref(31.png) #br + 実行ボタンを押し作成したプログラムを実行します。 #br #ref(32.png) #br + 実行結果 無事実行されDataGridに値が設定され表示されました。 #br #ref(33.png) 以上、DataGridのサンプルとなります。
