BETA

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

投稿日:2019-06-29
最終更新:2019-06-29
※この記事は外部サイト(https://www.doraxdora.com/blog/2017/08/18/...)からのクロス投稿です

今回はデータ追加用のフォームを別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();  
            }  
        }  

起動してみる

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

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

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

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

まとめ

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

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

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

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

ではでは。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@doraxdoraの技術ブログ 主に Java, C#, Python, Javascript の記事を載せていく予定。

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!