【WPF】登録画面を作成して別ウィンドウのモーダル表示をやってみた。
おはようございます。
8月も半分過ぎ、お盆休みも終わってしまった方が殆どじゃないですかね。
私も水曜日から仕事が始まってるのですが、なかなか休み気分が抜けずに困っています。
さてさて。
今回はデータ追加用のフォームを別Windowで作成し、追加ボタンがクリックされた際にモーダル表示しようと思います。
プログラムは前回のものを利用します。
スポンサーリンク
プログラムの修正
新規画面の追加
ソリューションエクスプローラーでプロジェクトを右クリックし、「追加」＞「ウィンドウ」を選択します。
新しい項目の追加画面で「ウィンドウ（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();
}
}
起動してみる
検索ボタンをクリックしてデータを表示、追加ボタンをクリックします。
表示された子ウィンドウの各項目を入力、選択し「追加」ボタンをクリックします。
追加完了メッセージが表示されます。
無事にデータが登録されました。
まとめ
昔からモーダル画面で何かを操作させるというのはよくありますよね。
操作性なんかを考えると、果たしてそれでいいのかという気持ちもありますが、ひとまずやってみました。
登録フォーム以外でも活用できる場面はあるかと思いますし。
次回は子画面にデータを受け渡してみたいと思います。
ではでは。