Web Analytics

こつこつエンジニア

現役アプリ開発者によるIT系特化ブログ

トップ > VisualStudio > 【WPF】Listviewをバインドし番号付きで表示する

【WPF】Listviewをバインドし番号付きで表示する

VisualStudio C# WPF

f:id:madai21:20211014191416j:plain

はじめに

今回はVisual Studio 2019 C# + WPFでリストをバインドさせてListViewに番号付きで表示させてみたいと思います。
コードを全文記載しているのでコピペするだけでできます＾＾
いちいち作るの面倒くさい・・・という方は最後にプロジェクトごと丸々クローン出来るGithubのURLも載せてますｗ

環境

以下をすべて用意していることを前提とします。

.NETデスクトップ開発とC++によるデスクトップ開発の機能を使用します。
もし、インストール時にこれらの機能を入れていなければVisual Studio InstallerからVisual Studio Community 2019の変更でこれらの機能をインストールしておいて下さい。

WPFアプリを作成する

C#のWPFアプリを作成します。
アプリ名はListViewAppとしておきます。
※.Net Frameworkは4.7.2を使用します。
※WPFアプリの作り方は過去記事をご参考にしてください。
madai21.hatenablog.com

以下の流れでアプリを作っていきます。


  • 表示するリストを管理するViewModel(Model)を作る

  • View(XAMLファイル)を編集する

  • リストに表示する項目を設定する

    • 表示するリストを管理するViewModel(Model)を作る

    新規でViewModel.csを作成し、以下のように編集します。

    using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Media.Imaging;
  
namespace ListViewApp
{
    public class PersonInfo
    {
        public int no { get; set; }
        public string name { get; set; }
        public string birthday { get; set; }
        public string seibetu { get; set; }
        public string address { get; set; }
        public string phone { get; set; }
        public string mail { get; set; }
    }

    class ViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
 
        private double clientWidth;
        public double ClientWidth
        {
            get
            {
                return clientWidth;
            }

            set
            {
                clientWidth = value;
                NotifyPropertyChanged();
            }
        }
 
        private double clientHeight;
        public double ClientHeight
        {
            get
            {
                return clientHeight;
            }

            set
            {
                clientHeight = value;
                NotifyPropertyChanged();
            }
        }
 
        private List<PersonInfo> personDatas = new List<PersonInfo>();
        public List<PersonInfo> PersonDatas
        {
            get
            {
                return personDatas;
            }
        }
        public PersonInfo PersonDataAdd
        {
            set
            {
                PersonInfo data = value;
                data.no = personDatas.Count + 1;

                personDatas.Add(data);
                NotifyPropertyChanged();
            }
        }
    }
}


    主な編集内容は以下の３点です。


  • PersonInfoがリストのアイテムクラス

  • personDatasがリストの変数で、PersonDatasでこのリストを取得できるようにしている

  • PersonDataAddにPersonInfoを代入すると自動的に番号を付与し、personDatasにAddする

    • View(XAMLファイル)を編集する

    表示部分を作成するため、XAMLファイルを編集していきます。
    XAMLファイルであるMainWindow.xamlを以下のように編集します。

    <Window x:Class="ListViewApp.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:ListViewApp"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"
        SizeChanged="Window_SizeChanged">
    <Grid>
        <ListView
            Height="{Binding ClientHeight}"
            Width="{Binding ClientWidth}"
            ItemsSource="{Binding PersonDatas}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="番号" DisplayMemberBinding="{Binding no}" Width="30"/>
                    <GridViewColumn Header="氏名" DisplayMemberBinding="{Binding name}" Width="80"/>
                    <GridViewColumn Header="生年月日" DisplayMemberBinding="{Binding birthday}" Width="80"/>
                    <GridViewColumn Header="性別" DisplayMemberBinding="{Binding seibetu}" Width="30"/>
                    <GridViewColumn Header="住所" DisplayMemberBinding="{Binding address}" Width="180"/>
                    <GridViewColumn Header="電話番号" DisplayMemberBinding="{Binding phone}" Width="100"/>
                    <GridViewColumn Header="メールアドレス" DisplayMemberBinding="{Binding mail}" Width="120"/>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>


    ポイントは以下の2点です。


  • ListView.ItemsSourceにリスト(PersonDatas)を指定する

  • GridViewColumnの各要素にListView.ItemsSourceでバインドしたクラス(PersonInfo)のメンバ変数名を指定する

    • リストに表示する項目を設定する

    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 ListViewApp
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        private ViewModel vm;
 
        public MainWindow()
        {
            InitializeComponent();
 
            vm = new ViewModel();
            DataContext = vm;
 
            var person1 = new PersonInfo();
            person1.name = "東京太郎";
            person1.birthday = "19XX/01/01";
            person1.seibetu = "男";
            person1.address = "東京都XX区YY 〇-〇-〇";
            person1.phone = "090-XXXX-YYYY";
            person1.mail = "hoge@hoge.com";
 
            var person2 = new PersonInfo();
            person2.name = "大阪花子";
            person2.birthday = "20XX/02/02";
            person2.seibetu = "女";
            person2.address = "大阪府XX市YY 〇-〇-〇";
            person2.phone = "080-XXXX-YYYY";
            person2.mail = "sample@sample.com";
 
            var person3 = new PersonInfo();
            person3.name = "北海道次郎";
            person3.birthday = "20XX/02/02";
            person3.seibetu = "男";
            person3.address = "沖縄県XX市YY 〇-〇-〇";
            person3.phone = "080-XXXX-YYYY";
            person3.mail = "hogo@hogo.com";
 
            vm.PersonDataAdd = person1;
            vm.PersonDataAdd = person2;
            vm.PersonDataAdd = person3;
        }
 
        private void Window_SizeChanged(object sender, SizeChangedEventArgs e)
        {
            FrameworkElement frameworkElement = Content as FrameworkElement;
            vm.ClientWidth = frameworkElement.ActualWidth;
            vm.ClientHeight = frameworkElement.ActualHeight;
        }
    }
}


    サンプル用に3人の個人情報を登録してみました。
    それでは実行してみましょう。

    f:id:madai21:20210921225944p:plain


    リストの内容が表示されてますね＾＾

    おわりに

    以下の場所から今回作成したプロジェクトを取得できます。
    ご自由にお使いください。
    github.com

    #VisualStudio #csharp #WPF

    madai21 読者になる

    広告を非表示にする
    コメントを書く