WPF/DataGridを使ってみる
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
]
開始行:
#navi(../)
* WPFでDataGridを使ってみる [#v97082eb]
WPFでDataGridを使ってみる記事となります。~
実際にDataGridを使うための操作とC#のサンプルコードを以下...
プロジェクトの作成手順など不要でサンプルコードを見たい方...
#contents
* 動作確認環境 [#j7389ada]
-Windows 11 ver.22H2
-Visual Studio 2022
-.NET 6.0
* 参考サイト [#ud708f17]
-Microsoft DataGrid クラス~
https://learn.microsoft.com/ja-jp/dotnet/api/system.windo...
* 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に設定し表示されるデータ格納するクラスを作成 [...
DataGridに表示する情報を格納する DataGridItem クラスを新...
クラスはDataGridの1行に相当するデータを保持します。~
以下のようなデータを保持することにします。~
- 都道府県名(prefectures)
- 市区町村(cities)
- 住所(address)
+ クラスの作成~
クラス名は DataGridItem とします。~
#br
DataGridSample を右右クリックし、「追加」→「クラス」をク...
#br
#ref(11.png)
#br
+クラスが選択されていることを確認し、名前に DataGridItem....
#br
#ref(12.png)
#br
+ DataGridItem.csソースが作成されます。~
#br
#ref(13.png)
#br
+ DataGridItem.cs を以下のようにプログラミングします。~
namespace DataGridSample
{
internal class DataGridItem
{
public DataGridItem(string prefectures, string c...
{
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に表示する都道府県、市区町村...
+ 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<...
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 を Main...
#br
#ref(21.png)
#br
* 以下のキャプチャのように配置されます。 [#oba006f3]
#br
#ref(22.png)
#br
+ XAMLを修正します。
--修正箇所
<Grid>
<DataGrid d:ItemsSource="{d:SampleData ItemCount...
</Grid>
--修正後
<Grid>
<DataGrid Name="PrefItems" AutoGenerateColumns="...
<DataGrid.Columns>
<DataGridTextColumn Header="都道府県" Bi...
<DataGridTextColumn Header="市区町村" Bi...
<DataGridTextColumn Header="住所" Bindin...
</DataGrid.Columns>
</DataGrid>
</Grid>
+ XAMLに記述したDataGridItemsを MainWindow.xaml.cs に宣言...
MainWindow.xaml に記述した Name="DataGridItems" 以下の部...
-- 追記前(抜粋)
public MainWindow()
{
InitializeComponent();
List<DataGridItem> dataGridItems = new List<...
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<...
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のサンプルとなります。
終了行:
#navi(../)
* WPFでDataGridを使ってみる [#v97082eb]
WPFでDataGridを使ってみる記事となります。~
実際にDataGridを使うための操作とC#のサンプルコードを以下...
プロジェクトの作成手順など不要でサンプルコードを見たい方...
#contents
* 動作確認環境 [#j7389ada]
-Windows 11 ver.22H2
-Visual Studio 2022
-.NET 6.0
* 参考サイト [#ud708f17]
-Microsoft DataGrid クラス~
https://learn.microsoft.com/ja-jp/dotnet/api/system.windo...
* 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に設定し表示されるデータ格納するクラスを作成 [...
DataGridに表示する情報を格納する DataGridItem クラスを新...
クラスはDataGridの1行に相当するデータを保持します。~
以下のようなデータを保持することにします。~
- 都道府県名(prefectures)
- 市区町村(cities)
- 住所(address)
+ クラスの作成~
クラス名は DataGridItem とします。~
#br
DataGridSample を右右クリックし、「追加」→「クラス」をク...
#br
#ref(11.png)
#br
+クラスが選択されていることを確認し、名前に DataGridItem....
#br
#ref(12.png)
#br
+ DataGridItem.csソースが作成されます。~
#br
#ref(13.png)
#br
+ DataGridItem.cs を以下のようにプログラミングします。~
namespace DataGridSample
{
internal class DataGridItem
{
public DataGridItem(string prefectures, string c...
{
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に表示する都道府県、市区町村...
+ 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<...
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 を Main...
#br
#ref(21.png)
#br
* 以下のキャプチャのように配置されます。 [#oba006f3]
#br
#ref(22.png)
#br
+ XAMLを修正します。
--修正箇所
<Grid>
<DataGrid d:ItemsSource="{d:SampleData ItemCount...
</Grid>
--修正後
<Grid>
<DataGrid Name="PrefItems" AutoGenerateColumns="...
<DataGrid.Columns>
<DataGridTextColumn Header="都道府県" Bi...
<DataGridTextColumn Header="市区町村" Bi...
<DataGridTextColumn Header="住所" Bindin...
</DataGrid.Columns>
</DataGrid>
</Grid>
+ XAMLに記述したDataGridItemsを MainWindow.xaml.cs に宣言...
MainWindow.xaml に記述した Name="DataGridItems" 以下の部...
-- 追記前(抜粋)
public MainWindow()
{
InitializeComponent();
List<DataGridItem> dataGridItems = new List<...
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<...
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のサンプルとなります。
ページ名: