WPFで登録と削除が可能なリストを作成します [C#][WPF]

はじめに

ObservableCollectionを使用して、登録と削除が可能なリストを持つアプリを作成します。

アプリの見た目

アプリには、登録、削除、全削除ボタンがあります。
名前と連絡先に文字列を入れて登録ボタンを押すと、データが登録されます。

リストの項目を選択して削除ボタンを押すと、選択した項目のデータが削除されます。

全削除ボタンを押すと、リストのデータがすべて削除されます。

ただし、列の横幅は、データの長さによって自動調整されません。(´;ω;｀)　

プロジェクト構成

プロジェクト構成は以下のとおりです。

コード

コードは以下のとおりです。
* MainWindow.xaml

<Window x:Class="ListView.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <!-- 行を3つ定義 -->
        <Grid.RowDefinitions>
            <RowDefinition Height="4*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
            <RowDefinition Height="1*"/>
        </Grid.RowDefinitions>
        <!-- 列を3つ定義 -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
            <ColumnDefinition Width="1*"/>
        </Grid.ColumnDefinitions>
        <ListView Name="lstEntry" ItemsSource="{Binding Path=Items}" Grid.Row="0" Grid.Column="0" Grid.RowSpan="1" Grid.ColumnSpan="5" >
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Path=Name}" Width="200"/>
                    <GridViewColumn Header="Contact" DisplayMemberBinding="{Binding Path=Contact}" Width="200"/>
                </GridView>
            </ListView.View>
        </ListView>

        <Button Content="登録" Grid.Row="1" Grid.Column="0" Click="Add_Click" />
        <Button Content="削除" Grid.Row="2" Grid.Column="0" Click="Remove_Click" />
        <Button Content="全削除" Grid.Row="3" Grid.Column="0" Click="RemoveAll_Click" />
        <Label Content="名前"  Grid.Row="1" Grid.Column="1" HorizontalAlignment ="Center" VerticalAlignment ="Center"/>
        <Label Content="連絡先" Grid.Row="1" Grid.Column="3" HorizontalAlignment ="Center" VerticalAlignment ="Center"/>
        <Label Content="(リスト選択項目削除)" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan ="2" HorizontalAlignment ="Center" VerticalAlignment ="Center"/>
        <Label Content="(リスト項目全削除)" Grid.Row="3" Grid.Column="1" Grid.ColumnSpan ="2" HorizontalAlignment ="Center" VerticalAlignment ="Center"/>
        <TextBox Name="txtName" Grid.Row="1" Grid.Column="2" TextAlignment="Center" VerticalContentAlignment="Center"/>
        <TextBox Name="txtContact" Grid.Row="1" Grid.Column="4" Grid.ColumnSpan="2" TextAlignment="Center" VerticalContentAlignment="Center"/>
    </Grid>
</Window>

• MainWindow.xaml.cs

using System.Windows;

namespace ListView
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        private ViewModel viewModel = new ViewModel();

        public MainWindow()
        {
            InitializeComponent();

            this.DataContext = this.viewModel;
        }

        private void Add_Click(object sender, RoutedEventArgs e)
        {
            viewModel.AddPair(txtName.Text, txtContact.Text);
        }

        private void Remove_Click(object sender, RoutedEventArgs e)
        {
            viewModel.RemovePair(lstEntry.SelectedIndex);
        }

        private void RemoveAll_Click(object sender, RoutedEventArgs e)
        {
            viewModel.RemoveAllPair();
        }
    }
}

• ViewModel.cs

using System.Collections.ObjectModel;

namespace ListView
{
    public class ViewModel
    {
        public ObservableCollection<Entry> Items { get { return _Items; } }
        private ObservableCollection<Entry> _Items = new ObservableCollection<Entry>();

        public void AddPair(string k, string v)
        {
            _Items.Add(new Entry(k, v));

        }

        public void RemovePair(int n)
        {
            if ( (n >= 0) && (n < Items.Count) )
            {
                _Items.RemoveAt(n);
            }
        }

        public void RemoveAllPair()
        {
            _Items.Clear();
        }
    }
}

• Entry.cs

namespace ListView
{
    public class Entry
    {
        /// <summary>
        /// 名前
        /// </summary>
        public string Name { get; set; }

        /// <summary>
        /// 連絡先
        /// </summary>
        public string Contact { get; set; }

        /// <summary>
        /// コンストラクタ
        /// </summary>
        /// <param name="someName"></param>
        /// <param name="someContact"></param>
        public Entry(string someName, string someContact)
        {
            this.Name = someName;
            this.Contact = someContact;
        }
    }
}

参考にしたサイト

codezine.jp