C#のListViewに文字を入力する方法

C#のListViewで、セルに文字などを入力できるようにする方法です。

目次

  1. ListViewで入力を可能にする考え方
  2. 実施例
    1. XAML
    2. コード
    3. 実行結果

ListViewで入力を可能にする考え方

ListViewは本来表示をするためのコントロールですが、便利ですので入力もしたいと思います。

方法としては、ListViewの各列の子要素として、TextBoxやCheckBoxを指定し、その子要素にデータのプロパティをバインディングします。

つまり、ListViewの子要素に入力することで、ListViewにバインドしたデータを更新するという考え方です。

実施例

コードを見るのが手っ取り早いと思います。

ListViewとTextBlockおよび2つのButtonから成るアプリを作ってみます。

完成形はこんな感じ。

アプリの完成形

「追加」ボタンでリストにアイテムを追加し、「表示」ボタンでリストの中身を文字列に変換してTextBlockに表示します。

XAML

<Window x:Class="listview_test.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:listview_test"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="400" Loaded="Window_Loaded">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="150" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>
        <ListView Name="ListViewMain" Grid.Column="0" Grid.Row="0" ItemsSource="{Binding}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="10,10,10,10" >
            <ListView.View>
                <GridView>
                    <GridViewColumn>
                        <GridViewColumnHeader Content="文字" Tag="Moji" />
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <TextBox Text="{Binding Path=Moji}" Width="100" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn>
                        <GridViewColumnHeader Content="チェック" Tag="Chk" />
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <CheckBox IsChecked="{Binding Path=Chk}" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
        <TextBlock Name="TextBlockMain" Grid.Column="1" Grid.Row="0" Margin="10,10,10,10" />
        <Button Name="ButtonAddItem" Content="追加" Grid.Column="0" Grid.Row="1" Margin="10" Click="ButtonAddItem_Click" />
        <Button Name="ButtonViewList" Content="リストの中身を表示" Grid.Column="1" Grid.Row="1" Margin="10" Click="ButtonViewList_Click" />
    </Grid>
</Window>

ListViewのGridViewClimunの子要素として、GridViewColumnHeaderの他に、TextBoxとCheckBoxを指定しています。

ListViewにはHogeクラスのオブジェクトPiyoをバインディングするのですが、そのHogeクラスのプロパティにMojiとChkがあります。

public class Hoge
{
    public bool Chk { set; get; }
    public string Moji { set; get; }
}

TextBoxにはPath=Mojiとして、CheckBoxにはPath=Chkとして、それぞれプロパティをバインディングします。

WindowにはLoadedイベント、各ボタンにClickイベントを設定します。

コード

using System.Windows;
using System.Collections.ObjectModel;

namespace listview_test
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        ObservableCollection<Hoge> Piyo = new ObservableCollection<Hoge>();

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            ListViewMain.DataContext = Piyo;
        }

        private void ButtonAddItem_Click(object sender, RoutedEventArgs e)
        {
            Hoge temp_item = new Hoge();
            Piyo.Add(temp_item);
        }

        private void ButtonViewList_Click(object sender, RoutedEventArgs e)
        {
            string DisplayText = string.Empty;
            foreach (var f in Piyo)
            {
                DisplayText = DisplayText + f.Moji + ", " + f.Chk.ToString() + "\r\n";
            }
            TextBlockMain.Text = DisplayText;
        }
    }

    public class Hoge
    {
        public bool Chk { set; get; }
        public string Moji { set; get; }
    }
}

HogeクラスのオブジェクトPiyoを、ObservableCollectionとして宣言します。こうすると、コード側でPiyoオブジェクトにアイテムを増やしたときに、ListViewがそれに併せて更新されます。

ListView全体のDataContextにPiyoオブジェクトを指定してバインディングします。そうすると、TextBoxにはPiyoオブジェクトのMojiプロパティが、CheckBoxにはChkプロパティがバインドされます。

実行結果

アプリを実行して、「追加」を3回クリックすると、このような表示になります。

アイテムを追加

TextBoxとCheckBoxに適当に入力してみます。

アイテムに入力

「表示」ボタンをクリックしてデータの中身をTextBlockに表示するとこうなります。

アイテムを表示

入力した結果がデータに反映されていることがわかりますね。

公開日

広告