2019-06-29に投稿

【WPF】登録画面を作成して別ウィンドウのモーダル表示をやってみた。

今回はデータ追加用のフォームを別Windowで作成し、追加ボタンがクリックされた際にモーダル表示しようと思います。

プログラムは前回のものを利用します。
【WPF】画面のタイトルバーに自作アイコンを表示する

プログラムの修正

新規画面の追加

新規画面の追加

ソリューションエクスプローラーでプロジェクトを右クリックし、「追加」>「ウィンドウ」を選択します。

クラスの選択

新しい項目の追加画面で「ウィンドウ(WPF)」を選択、名前に「SubWindow.xaml」と入力して「追加」ボタンをクリックします。

画面の作成

SubWindow.xaml

<Mah:MetroWindow x:Class="WpfApp1.SubWindow"
        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:WpfApp1"
        xmlns:Mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
        mc:Ignorable="d"
        Title="追加" Height="300" Width="300"
        GlowBrush="{DynamicResource AccentColorBrush}"
        Icon="/WpfApp1;component/Resource/Cat.ico"
        BorderThickness="1"
        WindowStartupLocation="CenterOwner"
        >
    <Window.Resources>
        <ResourceDictionary Source="/Style/StyleDic.xaml"/>
    </Window.Resources>
    <Grid>
        <Label Content="名前:" Margin="10,10,0,0" Style="{StaticResource lb-normal}" RenderTransformOrigin="0.522,0.893"/>
        <TextBox x:Name="txt_name" Margin="61,12,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="100"  Style="{StaticResource MetroTextBox}"/>
        <Label Content="性別:" Margin="10,54,0,0" Style="{StaticResource lb-normal}"/>
        <ComboBox x:Name="cmb_sex" HorizontalAlignment="Left" Margin="61,54,0,0" VerticalAlignment="Top" Width="50">
            <ComboBoxItem Content="♂" HorizontalAlignment="Left" Width="50"/>
            <ComboBoxItem Content="♀" HorizontalAlignment="Left" Width="50"/>
        </ComboBox>
        <ComboBox x:Name="cmb_kind" HorizontalAlignment="Left" Margin="61,140,0,0" VerticalAlignment="Top" Width="150"/>
        <Label Content="年齢:" Margin="10,98,0,0" Style="{StaticResource lb-normal}"/>
        <TextBox x:Name="txt_age" Margin="61,98,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="50"  Style="{StaticResource MetroTextBox}"/>
        <Label Content="種別:" Margin="10,143,0,0" Style="{StaticResource lb-normal}"/>
        <Label Content="好物:" Margin="10,186,0,0" Style="{StaticResource lb-normal}"/>
        <TextBox x:Name="txt_favorite" Margin="61,186,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Width="200"  Style="{StaticResource MetroTextBox}"/>
        <Button x:Name="btn_cansel" Content="キャンセル" HorizontalAlignment="Left" Margin="125,231,0,0" VerticalAlignment="Top" Width="75" Click="btn_cansel_Click"/>
        <Button x:Name="btn_add" Content="追加" HorizontalAlignment="Left" Margin="205,231,0,0" VerticalAlignment="Top" Width="75" Click="btn_add_Click"/>
    </Grid>
</Mah:MetroWindow>

処理の実装

SubWindow.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.Shapes;

using Npgsql;
using MahApps.Metro.Controls;

namespace WpfApp1
{
    /// <summary>
    /// SubWindow.xaml の相互作用ロジック
    /// </summary>
    public partial class SubWindow : MetroWindow
    {

        public Boolean IsCancel { set; get; }


        public SubWindow()
        {
            InitializeComponent();

            // データを取得
            // 種別マスタを取得してコンボボックスに設定する
            using (var context = new PgDbContext())
            {
                var mstKind = context.Kinds;
                IQueryable<Kind> result = from x in mstKind orderby x.KindCd select x;
                var list = result.ToList();

                // コンボボックスに設定
                this.cmb_kind.ItemsSource = list;
                this.cmb_kind.DisplayMemberPath = "KindName";
            }

        }

        /// <summary>
        /// キャンセルボタンクリックイベント.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btn_cansel_Click(object sender, RoutedEventArgs e)
        {
            this.IsCancel = true;
            this.Close();
        }

        /// <summary>
        /// 追加ボタンクリックイベント.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void btn_add_Click(object sender, RoutedEventArgs e)
        {
            this.IsCancel = false;

            // データを追加する
            using (var context = new PgDbContext())
            {
                var cats = context.Cats;
                int no = cats.Count();

                // データ作成
                Cat cat = new Cat();
                cat.No = no + 1;
                cat.Name = this.txt_name.Text;
                cat.Sex = (this.cmb_sex.SelectedItem as ComboBoxItem).Content.ToString();
                cat.Age = int.Parse(this.txt_age.Text);
                cat.Kind = (this.cmb_kind.SelectedItem as Kind).KindCd;
                cat.Favorite = this.txt_favorite.Text;
                // データ追加
                context.Cats.Add(cat);
                // DBの変更を確定
                context.SaveChanges();

                MessageBox.Show("データを追加しました。");
            }

            this.Close();
        }
    }
}

メイン画面の修正

MainWindow.xaml.cs

追加ボタンをクリックした際の処理を修正します。

        /// <summary>
        /// 追加ボタンクリックイベント
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void add_button_Click(object sender, RoutedEventArgs e)
        {
            logger.Info("追加ボタンクリック");

            var win = new SubWindow();
            win.Owner = GetWindow(this);
            win.ShowDialog();

            if (!win.IsCancel) {
                // データ再検索
                searchData();
            }
        }

 

起動してみる

検索後の画面

検索ボタンをクリックしてデータを表示、追加ボタンをクリックします。

子画面

表示された子ウィンドウの各項目を入力、選択し「追加」ボタンをクリックします。

追加完了

追加完了メッセージが表示されます。

データ再検索

無事にデータが登録されました。

まとめ

昔からモーダル画面で何かを操作させるというのはよくありますよね。

操作性なんかを考えると、果たしてそれでいいのかという気持ちもありますが、ひとまずやってみました。

登録フォーム以外でも活用できる場面はあるかと思いますし。

次回は子画面にデータを受け渡してみたいと思います。

ではでは。

 

Originally published at www.doraxdora.com

doraxdora

IT関係の仕事をしています/1985年生まれの東京在住/便利なサービスやツール漁りや料理などが好き/2017年~ブログやってます/自分でサービスとか作ってリリースしたい/何かありましたらお気軽にDMどうぞ

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント