.NET開発者のためのブログメディア
XAMLのDataGridを使ってグリッドをカスタマイズする
2020年04月15日
プログラミング経験者でしたらDataGridといえば、取得してきたデータを画面に一覧形式で出力するものというイメージを持たれているのではないでしょうか。XAMLでもこのDataGridを使用して、ユーザーがデータを閲覧できるようにコーディングすることが可能です。ここでは、このDataGridの利用方法などについて確認していきましょう。
- PG
- DataGridは企業向けのシステムを開発する時に、よくお世話になるコントロールですよね?今度DataGridを使用して開発するので、カスタマイズする方法を教えてください。
- PL
- DataGridを利用する場合、カスタマイズはどこの現場でも必要でしょうね。まずは簡単なデータの表示方法から一緒に確認していきましょう。
目次
XAMLで使えるDataGridの概要
XAMLでDataGridを使用する場合、列の自動生成機能がありますので、簡単にデータを表示させることができます。しかし、多くは自分で列を定義してカスタマイズすることになるでしょう。
ここではカスタマイズに使用される代表的なDataGridのクラスを紹介します。
- ■DataGridTextBoxColumn
- ■DataGridCheckBoxColumn
- ■DataGridComboBoxColumn
- ■DataGridTemplateColumn
Bindingプロパティで設定したデータを表示するクラスです。画面からデータの編集を行うこともできます。
Bindingプロパティで設定したデータをチェックボックスとして表示することができます。
ItemsSourceプロパティで設定したコレクションを選択肢として表示する、コンボボックスをセルに表示します。
DataTemplateを使用して表示されている内容をカスタマイズできます。
簡単なXAMLでのDataGrid活用例
ここでDataGridの活用方法をサンプルコードとともに確認していきましょう。
1
2
3
4
5
6
7
8
9
10
11
12
|
<Window x:Class="WpfApp3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp3"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<DataGrid ItemsSource="{Binding Path=Data}" x:Name="dataGrid" />
</Grid>
</Window>
|
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
32
33
34
35
36
37
38
39
40
41
|
using System.Windows;
using System.Collections.ObjectModel;
namespace WpfApp3
{
/// <summary>
/// MainWindow.xaml の相互作用ロジック
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new TestList();
}
}
public class TestList
{
public ObservableCollection<Test> Data { get; }
public TestList()
{
Data = new ObservableCollection<Test> {
new Test { Zyusyo="世田谷区", Syokugyou="プログラマー", Name="東京一郎", Nenrei=31},
new Test { Zyusyo="渋谷区", Syokugyou="営業員", Name="東京次郎", Nenrei=33},
new Test { Zyusyo="港区", Syokugyou="販売員", Name="東京三郎", Nenrei=40},
new Test { Zyusyo="新宿区", Syokugyou="棟梁", Name="東京四郎", Nenrei=63}
};
}
}
public class Test
{
public string Zyusyo { get; set; }
public string Syokugyou { get; set; }
public string Name { get; set; }
public int Nenrei { get; set; }
}
}
|
- PG
- DataGridを使用して取得してきたデータを画面に表示させることができました。できるプログラマーになった気分です。
- PL
- あとはユーザー目線に立って、どうすればより見やすい表示になるかを考えてカスタマイズしていきましょう。
一覧画面を作成するにはDataGridの理解は必要不可欠です
画面があるアプリケーション開発を行う場合、一覧形式でデータを表示させることは、多くの現場で求められるスキルです。XAMLだけでなく、HTMLを駆使して作成するWebアプリケーションでも同様のDataGridは存在します。基本的なDataGridの概念やコーディング方法を理解すれば、他の言語でも柔軟に対応できるようになるので、ここで改めてDataGridについての理解を深めてみても良いのではないでしょうか。
Search キーワード検索
Popular 人気の記事
-
.NET Framework 3.5をWindows10にインストールする方法
2019年10月24日 -
EdgeとChromeはどう違う?それぞれのスペック7つを比較解説!
2020年09月28日 -
【VB.NET入門】DataGridViewの使い方まとめ
2019年12月22日 -
VB.NETをおすすめする3つの理由とは?VBAとの違いや勉強方法を解説
2019年12月21日 -
Windows10のテキストエディタおすすめ20選!選ぶポイント3つ
2020年04月28日
reccomended おすすめ記事
-
C#のusingステートメントでリソースの解放【Disposeとの違いとは】
2020年03月17日 -
【SQL Serverログの操作】トランザクションログの使用量を確認する方法
2020年03月16日 -
【.NETが統合】.NET 5の概要と今後のリリース予定
2020年03月05日