C#WPFの道#12！SQLiteとListViewでマスタ設定画面の作成!

これまでの知識のまとめ
仕様
実装例

これまでの知識のまとめ

ListViewを学んだので、SQLiteと組み合わせることで、ある程度のアプリケーションを作ることができます。これまで学んだ知識のまとめとして、マスター設定画面の作成をしてみましょう。腕試しとして、次の仕様だけを見てご自身で一度プログラミングしてみることをお勧めします。どうしてもわからない場合は解説を見ながら一緒にコーディングしてみてください。ただ、データの更新と削除はまだ解説していないので、解説を見てください。

仕様

＜一覧画面＞

Addボタン	Save画面の起動
Updateボタン	Save画面の起動
Deleteボタン	ListViewで選択されているCustomerテーブルの行削除
一覧（ListView）	Customerテーブルの一覧を表示

＜Save画面＞

テキストボックス	Customerの名前を表示 Addモードのときは空文字 Updateモードのときは呼び出し元画面で指定した名前
Saveボタン	AddモードのときはCustomerの新規追加 UpdateモードのときはCustomerの行更新

Customerテーブル（SQLite）

Id	ID
Name	名前

実装例

App.xaml

using System;
using System.Windows;

namespace WPF012
{
    ///
    /// App.xaml の相互作用ロジック
    /// 
    public partial class App : Application
    {
        static string databaseName = "Shop2.db";
        static string folderPath = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);
        public static string DatabasePath = System.IO.Path.Combine(folderPath, databaseName);

    }
}

using System;

using System.Windows;

namespace WPF012

{

///

/// App.xaml の相互作用ロジック

///

public partial class App : Application

{

static string databaseName = "Shop2.db";

static string folderPath = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);

public static string DatabasePath = System.IO.Path.Combine(folderPath, databaseName);

}

App.xamlにはSQLiteの接続先を定義します。場所は任意の場所で問題ありません。

Customerクラス

using SQLite;

namespace WPF012
{
    public class Customer
    {
        public Customer()
        {

        }

        public Customer(string name)
        {
            Name = name;
        }

        public Customer(int id ,string name)
        {
            Id = id;
            Name = name;
        }

        [PrimaryKey, AutoIncrement]
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

using SQLite;

namespace WPF012

{

public class Customer

{

public Customer()

{

}

public Customer(string name)

{

Name = name;

}

public Customer(int id ,string name)

{

Id = id;

Name = name;

}

[PrimaryKey, AutoIncrement]

public int Id { get; set; }

public string Name { get; set; }

}

CustomerクラスはIdとNameのみを定義します。コンストラクタは用途別に3種類定義しています。コンストラクタは記述しなくても問題はありません。インスタンスを生成時に値を指定するほうがコードがわかりやすくなるためそうしています。

MainWindow.xaml

<Window x:Class="WPF012.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:WPF012"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Grid>
        <StackPanel Margin="10">
            <Button x:Name="AddButton"
                    FontSize="20"
                    Content="Add"
                    Click="AddButton_Click"/>
            <Button x:Name="UpdateButton"
                    FontSize="20"
                    Content="Update"
                    Click="UpdateButton_Click"/>
            <Button x:Name="DeleteButton"
                    FontSize="20"
                    Content="Delete"
                    Click="DeleteButton_Click"/>
            <ListView Height="150"
                      x:Name="CustomerListView">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}"
                                   FontSize="20"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackPanel>
    </Grid>
</Window>

<Window x:Class="WPF012.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:WPF012"

mc:Ignorable="d"

Title="MainWindow" Height="300" Width="300">

<Grid>

<Button x:Name="AddButton"

FontSize="20"

Content="Add"

Click="AddButton_Click"/>

<Button x:Name="UpdateButton"

FontSize="20"

Content="Update"

Click="UpdateButton_Click"/>

<Button x:Name="DeleteButton"

FontSize="20"

Content="Delete"

Click="DeleteButton_Click"/>

<ListView Height="150"

x:Name="CustomerListView">

<ListView.ItemTemplate>

<TextBlock Text="{Binding Name}"

FontSize="20"/>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</StackPanel>

</Grid>

</Window>

MainWindowではStackPanel上に、Add、Update、DeleteボタンとListViewを設置しています。

MainWindow.xaml　コードビハインド側

using SQLite;
using System.Windows;

namespace WPF012
{
    /// <summary>
    /// MainWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            ReadDatabase();
        }

        private void AddButton_Click(object sender, RoutedEventArgs e)
        {
            var f = new SaveWindow(null);
            f.ShowDialog();
            ReadDatabase();
        }

        private void UpdateButton_Click(object sender, RoutedEventArgs e)
        {
            var item = CustomerListView.SelectedItem as Customer;
            if(item == null)
            {
                MessageBox.Show("行を選択してください");
                return;
            }

            var f = new SaveWindow(item);
            f.ShowDialog();
            ReadDatabase();
        }

        private void DeleteButton_Click(object sender, RoutedEventArgs e)
        {
            var item = CustomerListView.SelectedItem as Customer;
            if (item == null)
            {
                MessageBox.Show("行を選択してください");
                return;
            }

            using (var connection = new SQLiteConnection(App.DatabasePath))
            {
                connection.CreateTable<Customer>();
                connection.Delete(item);
                ReadDatabase();
            }
        }

        private void ReadDatabase()
        {
            using (var connection = new SQLiteConnection(App.DatabasePath))
            {
                connection.CreateTable<Customer>();
                CustomerListView.ItemsSource = connection.Table<Customer>().ToList();
            }
        }
    }
}

using SQLite;

using System.Windows;

namespace WPF012

{

/// <summary>

/// MainWindow.xaml の相互作用ロジック

/// </summary>

public partial class MainWindow : Window

{

public MainWindow()

{

InitializeComponent();

ReadDatabase();

}

private void AddButton_Click(object sender, RoutedEventArgs e)

{

var f = new SaveWindow(null);

f.ShowDialog();

ReadDatabase();

}

private void UpdateButton_Click(object sender, RoutedEventArgs e)

{

var item = CustomerListView.SelectedItem as Customer;

if(item == null)

{

MessageBox.Show("行を選択してください");

return;

}

var f = new SaveWindow(item);

f.ShowDialog();

ReadDatabase();

}

private void DeleteButton_Click(object sender, RoutedEventArgs e)

{

var item = CustomerListView.SelectedItem as Customer;

if (item == null)

{

MessageBox.Show("行を選択してください");

return;

}

using (var connection = new SQLiteConnection(App.DatabasePath))

{

connection.CreateTable<Customer>();

connection.Delete(item);

ReadDatabase();

}

private void ReadDatabase()

{

using (var connection = new SQLiteConnection(App.DatabasePath))

{

connection.CreateTable<Customer>();

CustomerListView.ItemsSource = connection.Table<Customer>().ToList();

}

Addボタン押下時はCustomerをNullでSave画面を起動。Update時は選択されている行のCustomerクラスを引数に渡しています。ListViewの選択行はSelectedItemで取得します。選択されていないときはNullになるため、Nullチェックも行っています。 Updateボタン押下時は選択行のCustomerクラスを引数としてSave画面を起動しています。Deleteボタン押下時は選択行のCustomerクラスを削除しています。削除はconnection.Deleteで実行しています。

SaveWindow.xaml

<Window x:Class="WPF012.SaveWindow"
        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:WPF012"
        mc:Ignorable="d"
        Title="SaveWindow" Height="300" Width="300">
    <Grid>
        <StackPanel Margin="10">
            <TextBox x:Name="NameTextBox"
                     FontSize="20"/>
            <Button Content="Save"
                    x:Name="SaveButton"
                    FontSize="20"
                    Click="SaveButton_Click"/>
        </StackPanel>
    </Grid>
</Window>

<Window x:Class="WPF012.SaveWindow"

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:WPF012"

mc:Ignorable="d"

Title="SaveWindow" Height="300" Width="300">

<Grid>

<TextBox x:Name="NameTextBox"

FontSize="20"/>

<Button Content="Save"

x:Name="SaveButton"

FontSize="20"

Click="SaveButton_Click"/>

</StackPanel>

</Grid>

</Window>

Save画面は名前のテキストボックスと、Saveボタンを設置しています。

SaveWindow.xaml　コードビハインド側

using SQLite;
using System.Windows;

namespace WPF012
{
    /// <summary>
    /// SaveWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class SaveWindow : Window
    {
        private Customer _customer;
        public SaveWindow(Customer customer)
        {
            InitializeComponent();

            _customer = customer;

            if(customer != null)
            {
                this.NameTextBox.Text = customer.Name;
            }
        }

        private void SaveButton_Click(object sender, RoutedEventArgs e)
        {
            if(NameTextBox.Text.Trim().Length < 1)
            {
                MessageBox.Show("名前を入力してください");
                return;
            }

            using (var connection = new SQLiteConnection(App.DatabasePath))
            {
                connection.CreateTable<Customer>();
                if(_customer == null)
                {
                    connection.Insert(new Customer(NameTextBox.Text));
                }
                else
                {
                    connection.Update(new Customer(_customer.Id, NameTextBox.Text));
                }

                Close();
            }
        }
    }
}

using SQLite;

using System.Windows;

namespace WPF012

{

/// <summary>

/// SaveWindow.xaml の相互作用ロジック

/// </summary>

public partial class SaveWindow : Window

{

private Customer _customer;

public SaveWindow(Customer customer)

{

InitializeComponent();

_customer = customer;

if(customer != null)

{

this.NameTextBox.Text = customer.Name;

}

private void SaveButton_Click(object sender, RoutedEventArgs e)

{

if(NameTextBox.Text.Trim().Length < 1)

{

MessageBox.Show("名前を入力してください");

return;

}

using (var connection = new SQLiteConnection(App.DatabasePath))

{

connection.CreateTable<Customer>();

if(_customer == null)

{

connection.Insert(new Customer(NameTextBox.Text));

}

else

{

connection.Update(new Customer(_customer.Id, NameTextBox.Text));

}

Close();

}

Save画面のコンストラクタでは、Customerクラスを引数にしています。Nullの場合は新規追加、Null以外のときは、更新処理をしています。更新処理はconnection.Updateで実行しています。以上がサンプルコードとなります。

WPFの道！

C#を正しい3層構造で造れてますか？

非売品コースを受け取る

無料動画コース「C#のアーキテクチャー」（80分）をプレゼントしています

これまでの知識のまとめ

仕様

＜一覧画面＞

＜Save画面＞

Customerテーブル（SQLite）

実装例

App.xaml

Customerクラス

MainWindow.xaml

MainWindow.xaml コードビハインド側

SaveWindow.xaml

SaveWindow.xaml コードビハインド側

MainWindow.xaml　コードビハインド側

SaveWindow.xaml　コードビハインド側