VB のたまご

作成日: 2017/03/05, 更新日: 2017/03/05



DataGrid

    イメージ
  •  DataGrid は、表形式でデータを表示するコントロールです。 とりあえずどういう風に動くのか見てみましょう。 以下サンプルです。「DataGridWindow1」という画面で作成していますが、「MainWindow」に書いても構いません。

  • スポンサーリンク


    <Window x:Class="DataGridWindow1"
            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:z04_NormalControls"
            mc:Ignorable="d"
            Title="DataGridWindow1" Height="350" Width="525">
        
        <Grid>
    
            <DockPanel Margin="10">
                <Button Content="データ追加" DockPanel.Dock="Top" Click="Button_Click" />
                <DataGrid Name="datagrid1" />
            </DockPanel>
            
        </Grid>
        
    </Window>
    

    Imports System.Data
    
    Public Class DataGridWindow1
    
        Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
    
            Dim dt As New DataTable
            dt.Columns.Add(New DataColumn("name", GetType(String)))
            dt.Columns.Add(New DataColumn("age", GetType(Integer)))
            dt.Columns.Add(New DataColumn("GenderIsMan", GetType(Boolean)))
    
            dt.Rows.Add(New Object() {"taro", 25, True})
            dt.Rows.Add(New Object() {"jiro", 22, True})
            dt.Rows.Add(New Object() {"hanako", 18, False})
    
            Me.datagrid1.ItemsSource = dt.DefaultView
    
        End Sub
    
    End Class
    

  •  データ追加ボタンを押すことで、コレクションデータが表示されたと思います。 この時、列の定義はしていませんが自動的に生成される仕組みになっています。

  •  続いて、列の定義を手動で行う場合です。以下のサンプルでは、文字列用の列「名前」を定義していて、「name」のデータを表示するように紐づけています。

  • <Window x:Class="DataGridWindow2"
            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:z04_NormalControls"
            mc:Ignorable="d"
            Title="DataGridWindow2" Height="350" Width="525">
    
        <Grid>
    
            <DockPanel Margin="10">
                <Button Content="データ追加" DockPanel.Dock="Top" Click="Button_Click" />
                <DataGrid Name="datagrid1" AutoGenerateColumns="False">
                    <DataGrid.Columns>
                        <DataGridTextColumn Header="名前" Binding="{Binding name}" />
                    </DataGrid.Columns>
                </DataGrid>
            </DockPanel>
    
        </Grid>
    
    </Window>
    

    Imports System.Data
    
    Public Class DataGridWindow2
    
        Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
    
            Dim dt As New DataTable
            dt.Columns.Add(New DataColumn("name", GetType(String)))
            dt.Columns.Add(New DataColumn("age", GetType(Integer)))
            dt.Columns.Add(New DataColumn("GenderIsMan", GetType(Boolean)))
    
            dt.Rows.Add(New Object() {"taro", 25, True})
            dt.Rows.Add(New Object() {"jiro", 22, True})
            dt.Rows.Add(New Object() {"hanako", 18, False})
    
            Me.datagrid1.ItemsSource = dt.DefaultView
    
        End Sub
    
    End Class
    

  •  これを実行すると、3つの列の内、1つ目の「name」データのみが表示されます。他の2つの列データは切り捨てられる動きになります。

  • スポンサーリンク


  •  最近では、DataTable の他に、独自データクラス + List や Enumerable なコレクションデータで扱うことが多いみたいですね。 以下はそのサンプルです。

  • <Window x:Class="DataGridWindow3"
            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:z04_NormalControls"
            mc:Ignorable="d"
            Title="DataGridWindow3" Height="300" Width="300">
    
        <Grid>
    
            <DockPanel Margin="10">
                <Button Content="データ追加" DockPanel.Dock="Top" Click="Button_Click" />
                <DataGrid Name="datagrid1" AutoGenerateColumns="False" AlternatingRowBackground="AliceBlue"
                          CanUserAddRows="False" CanUserDeleteRows="False">
                    <DataGrid.Columns>
                        <DataGridTextColumn Header="名前" Binding="{Binding Name}" />
                        <DataGridTextColumn Header="年齢" Binding="{Binding Age}" />
                        <DataGridCheckBoxColumn Header="性別(男性?)" Binding="{Binding IsMan}" />
                    </DataGrid.Columns>
                </DataGrid>
            </DockPanel>
            
        </Grid>
    
    </Window>
    

    Public Class DataGridWindow3
    
        Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
    
            Dim items = New List(Of Person)(Enumerable.Range(1, 100).Select(Function(i) New Person With {
                                                                              .Name = "taro" + i.ToString(),
                                                                              .Age = 20 + i,
                                                                              .IsMan = i Mod 5 = 0}))
    
            Me.datagrid1.ItemsSource = items
    
        End Sub
    
        Private Class Person
    
            Public Property Name As String = String.Empty
            Public Property Age As Integer = 0
            Public Property IsMan As Boolean = False
    
        End Class
    
    End Class
    

  •  AlternatingRowBackground プロパティに色を設定することで、偶数行の背景色に色を塗ることができます。 CanUserAddRows, CanUserDeleteRows プロパティそれぞれに False を設定して、ユーザー操作の行追加、行削除を禁止しています。

  •  続いて、行選択した時のイベント処理です。

  • <Window x:Class="DataGridWindow4"
            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:z04_NormalControls"
            mc:Ignorable="d"
            Title="DataGridWindow4" Height="300" Width="300">
    
        <Grid>
    
            <DockPanel Margin="10">
                <Button Content="データ追加" DockPanel.Dock="Top" Click="Button_Click" />
                <DataGrid Name="datagrid1" SelectionChanged="SelectionChanged" />
            </DockPanel>
    
        </Grid>
    
    </Window>
    

    Public Class DataGridWindow4
    
        Private Sub Button_Click(sender As Object, e As RoutedEventArgs)
    
            Dim items = New List(Of Person)(Enumerable.Range(1, 100).Select(Function(i) New Person With {
                                                                              .Name = "taro" + i.ToString(),
                                                                              .Age = 20 + i,
                                                                              .IsMan = i Mod 5 = 0}))
    
            Me.datagrid1.ItemsSource = items
    
        End Sub
    
        Private Class Person
    
            Public Property Name As String = String.Empty
            Public Property Age As Integer = 0
            Public Property IsMan As Boolean = False
    
        End Class
    
        Private Sub SelectionChanged(sender As Object, e As SelectionChangedEventArgs)
    
            ' Remove は、変更前の選択項目
            If 0 < e.RemovedItems.Count Then
                Console.WriteLine($"")
                For Each item As Person In e.RemovedItems
                    Console.WriteLine($"{item.Name} remove.")
                Next
            End If
    
            ' Add は、変更後の選択項目
            If 0 < e.AddedItems.Count Then
                For Each item As Person In e.AddedItems
                    Console.WriteLine($"{item.Name} add.")
                Next
            End If
    
        End Sub
    
    End Class
    

  •  SelectionChanged イベントの引数からは、変更前と変更後の値を取得することができます。これを使って、変更した値を調べています。 イベント引数名には、RemovedItems, AddedItems とありますが、ここの例では、「選択項目の削除」や「新規項目の追加」という意味ではありません。