C# + WPF + XAML コマンドのバインドとメニューバー

テキストエディタ + csc.exeだけで、どこまでWPFなアプリケーションが
作成できるか挑戦中。

テキストエディタでWPF + XAML データバインド

データのバインドができたので、イベント(コマンド)のバインドについて
調べてみます。



サンプルのメモ帳



[C#/XAML] WPF と Windows フォームのメニューの違い (Windows フォームから WPF へ)
こちらを参考にさせて頂きました。


画面を構成する「win.xaml」はこんな感じ。


  1. <Window
  2.  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.  Title="WPFメモ帳"
  5.  Width="320"
  6.  Height="240"
  7.  FontSize="20"
  8.  WindowStartupLocation="CenterScreen"
  9. >
  11.     <DockPanel>
  12.     
  13.         <Menu Name="menu1" DockPanel.Dock="Top">
  14.             <MenuItem Header="File">
  15.                 <MenuItem Header="Open" Name="Command_Open" />
  16.                 <MenuItem Header="Exit" Name="Command_Exit" />
  17.             </MenuItem>
  18.             <MenuItem Header="Edit">
  19.                 <MenuItem Command="ApplicationCommands.Copy" />
  20.                 <MenuItem Command="ApplicationCommands.Cut" />
  21.                 <MenuItem Command="ApplicationCommands.Paste" />
  22.          </MenuItem>
  23.         </Menu>
  24.     
  25.         <TextBox Name="textBox1" DockPanel.Dock="Top" AcceptsReturn="True"
  26.             VerticalScrollBarVisibility="Visible"
  27.             HorizontalScrollBarVisibility="Visible" />
  28.     
  29.     </DockPanel>
  30.     
  31. </Window>




プログラム本体の「Sample.cs」はこんな感じ。


  1. using System;
  2. using System.IO;
  3. using System.Collections.Generic;
  4. using System.Xml;
  5. using System.Windows;
  6. using System.Windows.Controls;
  7. using System.Windows.Markup;
  8. using System.Windows.Input;
  10. public class Sample {
  12.     private static Window win;
  14.     [STAThread]
  15.     static void Main(string[] args) {
  16.     
  17.         win = new Window();
  18.     
  19.         // 作成したwin.xamlを読み込んで、Windowsオブジェクトを取得
  20.         using (FileStream infs = new FileStream("win.xaml", FileMode.Open)) {
  21.             XmlReader xmlReader = XmlReader.Create(infs);
  22.             win = (Window)XamlReader.Load(xmlReader);
  23.         }
  24.         
  25.         // メニューの[File] - [Open]
  26.         MenuItem item = (MenuItem)win.FindName("Command_Open");
  27.         item.Click += new RoutedEventHandler(File_Open);
  28.         
  29.         // メニューの[File] - [Close]
  30.         item = (MenuItem)win.FindName("Command_Exit");
  31.         item.Click += new RoutedEventHandler(Window_Close);
  32.         
  33.         // Window表示
  34.         var app = new Application();
  35.         app.Run(win);
  36.     }
  37.     
  38.     // ファイルのオープン処理
  39.     private static void File_Open(object sender, RoutedEventArgs e) {
  40.      var dlg = new Microsoft.Win32.OpenFileDialog();
  41.      if (dlg.ShowDialog() == false) {
  42.          return;
  43.      }
  44.      
  45.      TextBox textBox = (TextBox)win.FindName("textBox1");
  46.      
  47.      using (var reader = new System.IO.StreamReader(dlg.FileName)) {
  48.          textBox.Text = reader.ReadToEnd();
  49.      }
  50.     }
  51.     
  52.     // プログラム終了処理
  53.     private static void Window_Close(object sender, RoutedEventArgs e) {
  54.         win.Close();
  55.     }
  56. }




ビルドするためのバッチファイル「build.bat」はこんな感じ。


@echo off

if "%1"=="3" (
    goto NET3
)

echo .NET 4
set csc="C:\Windows\Microsoft.NET\Framework64\v4.0.30319\csc.exe"
set opt=/nologo /r:WPF\PresentationCore.dll;WPF\PresentationFramework.dll;WPF\WindowsBase.dll;System.Xaml.dll
set opt=%opt% /target:winexe
set opt=%opt% /debug
%csc% %opt% Sample.cs

goto END

:NET3
echo .NET 3
set csc="C:\Windows\Microsoft.NET\Framework64\v3.5\csc.exe"
set opt=/nologo /r:PresentationCore.dll;PresentationFramework.dll;WindowsBase.dll
set opt=%opt% /target:winexe
set opt=%opt% /debug
%csc% %opt% Sample.cs

:END




一応、.Net 3.5と4で動作を確認してます。
ビルドのオプションを変更するのが面倒になってきたので、
引数なしだと.Net 4

C:\> build.bat



引数に3を指定すると.NET 3.5でビルドするようにしました。

C:\> build.bat 3





まず、.NET 3.5でビルドした場合はこんな感じになります。

180_01.png

180_02.png

180_03.png


続いて、.NET 4でビルドした場合。

180_04.png

180_05.png

180_06.png


.NETのバージョンによってファイルの保存ダイアログの形式が変わるようです。

xamlで、MenuItemに「Command="ApplicationCommands.Copy"」の
ように指定していますが、これが非常に便利。

コードを書かなくても自動的にテキストの状態を判断して、Enable制御をおこなってくれます。

180_07.png

180_08.png






ClickからCommandへ



メニューアイテムのClickに「RoutedEventHandler」を追加して、
ファイルオープンやアプリケーション終了のイベントを付与しました。

ファイルのオープンを、コピーやペーストに使用しているような
「Command」を使う方式に変更してみます。


まだ十分に理解していないのですが、まず「RoutedCommand」を作成する。
これが、Windowオブジェクトとコントロールを結びつけるオブジェクト

次に「CommandBinding」を作成して、「RoutedCommand」が呼び出された時
具体的になんの処理を実行するか結びつけます。

今回だと、「CommandBinding」にプログラムに記載している関数
「File_Open」と、実行確認を行う「File_Open_CanExecute」を登録しました。


作成した「CommandBinding」はWindowオブジェクトに追加しておきます。
メニューアイテムのCommandに指定するのは「RoutedCommand」になります。


  1. using System;
  2. using System.IO;
  3. using System.Collections.Generic;
  4. using System.Xml;
  5. using System.Windows;
  6. using System.Windows.Controls;
  7. using System.Windows.Markup;
  8. using System.Windows.Input;
  10. public class Sample {
  12.     private static Window win;
  13.     
  14.     [STAThread]
  15.     static void Main(string[] args) {
  16.     
  17.         win = new Window();
  18.     
  19.         // 作成したwin.xamlを読み込んで、Windowsオブジェクトを取得
  20.         using (FileStream infs = new FileStream("win.xaml", FileMode.Open)) {
  21.             XmlReader xmlReader = XmlReader.Create(infs);
  22.             win = (Window)XamlReader.Load(xmlReader);
  23.         }
  24.         
  25.         // RoutedCommandを作成
  26.         // このオブジェクトを通じて、コマンドの制御が行われる模様
  27.         RoutedCommand fileCommand = new RoutedCommand();
  28.         
  29.         // CommandBindingを作成
  30.         // RoutedCommandと、そのコマンドの実行に関する関数を指定
  31.         // fileCommandは、
  32.         // ・実行して良いかの判断は「File_Open_CanExecute」で行う
  33.         // ・実際に実行する処理は「File_Open」である
  34.         CommandBinding fileCommandBinding = new CommandBinding(
  35.             fileCommand, File_Open, File_Open_CanExecute);
  36.         
  37.         /* コンストラクタで一括指定しないパターン
  38.         CommandBinding fileCommandBinding = new CommandBinding();
  39.         fileCommandBinding.Command = fileCommand;
  40.         fileCommandBinding.Executed += File_Open;
  41.         fileCommandBinding.CanExecute += File_Open_CanExecute;
  42.         */
  43.         
  44.         // 作成したCommandBindingをWindowオブジェクトに登録
  45.         win.CommandBindings.Add(fileCommandBinding);
  46.         
  47.         
  48.         // メニューの[File] - [Open]
  49.         MenuItem item = (MenuItem)win.FindName("Command_Open");
  50.         // ClickではなくCommandに登録
  51.         //item.Click += new RoutedEventHandler(File_Open);
  52.         item.Command = fileCommand;
  53.         
  54.         // メニューの[File] - [Close]
  55.         item = (MenuItem)win.FindName("Command_Exit");
  56.         item.Click += new RoutedEventHandler(Window_Close);
  57.         
  58.         // Window表示
  59.         var app = new Application();
  60.         app.Run(win);
  61.     }
  62.     
  63.     // ファイルのオープン処理
  64.     private static void File_Open(object sender, RoutedEventArgs e) {
  65.      var dlg = new Microsoft.Win32.OpenFileDialog();
  66.      if (dlg.ShowDialog() == false) {
  67.          return;
  68.      }
  69.      
  70.      TextBox textBox = (TextBox)win.FindName("textBox1");
  71.      
  72.      using (var reader = new System.IO.StreamReader(dlg.FileName)) {
  73.          textBox.Text = reader.ReadToEnd();
  74.      }
  75.     }
  76.     
  77.     // ファイルオープンのコマンドを実行して良いかの確認
  78.     private static void File_Open_CanExecute(object sender, CanExecuteRoutedEventArgs e) {
  79.         Control target = e.Source as Control;
  80.         
  81.         Panel panel = null;
  82.         while(true) {
  83.             if (target.Parent is Panel) {
  84.                 panel = target.Parent as Panel;
  85.                 break;
  86.             }
  87.             target = target.Parent as Control;
  88.         }
  89.         
  90.         TextBox textBox = panel.FindName("textBox1") as TextBox;
  91.         if (textBox == null) {
  92.             e.CanExecute = true;
  93.             return;
  94.         }
  95.         
  96.         e.CanExecute = (textBox.Text.Length == 0);;
  97.     }
  98.     
  99.     // プログラム終了処理
  100.     private static void Window_Close(object sender, RoutedEventArgs e) {
  101.         win.Close();
  102.     }
  104. }




・Windowがメニューアイテムの処理を実行しようとする
・メニューアイテムに登録されているCommandを取得する
・取得したCommandから、Window.CommandBindingsに登録されている内容を検索。
・CommandBindingを取得し、処理を実行。

こんなイメージでしょうか。


実行してみると、テキストボックスに何も入力されていない場合は
ファイルオープンが有効。

180_09.png


何か入力されているときは使用不可という狙い通りの動作になってくれました。

180_10.png








Commandのバインド



「Click」だと「+=」演算子を使用してイベントを追加しなくてはいけませんが、
「Command」だと「=」演算子でイベントの設定が可能なので、
データバインドが使えます。

「win.xaml」はこんな感じ。


  1. <Window
  2.  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.  Title="WPFメモ帳"
  5.  Width="320"
  6.  Height="240"
  7.  FontSize="20"
  8.  WindowStartupLocation="CenterScreen"
  9. >
  11.     <DockPanel>
  12.     
  13.         <Menu Name="menu1" DockPanel.Dock="Top">
  14.             <MenuItem Header="File">
  15.                 <MenuItem Header="Open" Name="Command_Open"
  16.                 Command="{Binding File_Open}" />
  17.                 <MenuItem Header="Exit" Name="Command_Exit" />
  18.             </MenuItem>
  19.             <MenuItem Header="Edit">
  20.                 <MenuItem Command="ApplicationCommands.Copy" />
  21.                 <MenuItem Command="ApplicationCommands.Cut" />
  22.                 <MenuItem Command="ApplicationCommands.Paste" />
  23.          </MenuItem>
  24.         </Menu>
  25.     
  26.         <TextBox Name="textBox1" DockPanel.Dock="Top" AcceptsReturn="True"
  27.             VerticalScrollBarVisibility="Visible"
  28.             HorizontalScrollBarVisibility="Visible" />
  29.     
  30.     </DockPanel>
  31.     
  32. </Window>




この部分がミソ。

Command="{Binding File_Open}"



「File_Open」という名前(任意)でバインドするようにしておきました。


ソースはこんな感じ。


  1. using System;
  2. using System.IO;
  3. using System.Collections.Generic;
  4. using System.Xml;
  5. using System.Windows;
  6. using System.Windows.Controls;
  7. using System.Windows.Markup;
  8. using System.Windows.Input;
  10. public class Sample {
  12.     private static Window win;
  13.     
  14.     [STAThread]
  15.     static void Main(string[] args) {
  16.     
  17.         win = new Window();
  18.     
  19.         // 作成したwin.xamlを読み込んで、Windowsオブジェクトを取得
  20.         using (FileStream infs = new FileStream("win.xaml", FileMode.Open)) {
  21.             XmlReader xmlReader = XmlReader.Create(infs);
  22.             win = (Window)XamlReader.Load(xmlReader);
  23.         }
  24.         
  25.         // RoutedCommandを作成
  26.         // このオブジェクトを通じて、コマンドの制御が行われる模様
  27.         RoutedCommand fileCommand = new RoutedCommand();
  28.         
  29.         // CommandBindingを作成
  30.         // RoutedCommandと、そのコマンドの実行に関する関数を指定
  31.         // fileCommandは、
  32.         // ・実行して良いかの判断は「File_Open_CanExecute」で行う
  33.         // ・実際に実行する処理は「File_Open」である
  34.         CommandBinding fileCommandBinding = new CommandBinding(
  35.             fileCommand, File_Open, File_Open_CanExecute);
  36.         
  37.         /* コンストラクタで一括指定しないパターン
  38.         CommandBinding fileCommandBinding = new CommandBinding();
  39.         fileCommandBinding.Command = fileCommand;
  40.         fileCommandBinding.Executed += File_Open;
  41.         fileCommandBinding.CanExecute += File_Open_CanExecute;
  42.         */
  43.         
  44.         // 作成したCommandBindingをWindowオブジェクトに登録
  45.         win.CommandBindings.Add(fileCommandBinding);
  46.         
  47.         
  48.         // メニューの[File] - [Open]
  49.         // MenuItem item = (MenuItem)win.FindName("Command_Open");
  50.         //// ClickではなくCommandに登録
  51.         ////item.Click += new RoutedEventHandler(File_Open);
  52.         //item.Command = fileCommand;
  53.         
  54.         //バインドで、Commandイベントを設定
  55.         win.DataContext = new { File_Open = fileCommand};
  56.         
  57.         
  58.         // メニューの[File] - [Close]
  59.         MenuItem item = (MenuItem)win.FindName("Command_Exit");
  60.         item.Click += new RoutedEventHandler(Window_Close);
  61.         
  62.         // Window表示
  63.         var app = new Application();
  64.         app.Run(win);
  65.     }
  66.     
  67.     // ファイルのオープン処理
  68.     private static void File_Open(object sender, RoutedEventArgs e) {
  69.      var dlg = new Microsoft.Win32.OpenFileDialog();
  70.      if (dlg.ShowDialog() == false) {
  71.          return;
  72.      }
  73.      
  74.      TextBox textBox = (TextBox)win.FindName("textBox1");
  75.      
  76.      using (var reader = new System.IO.StreamReader(dlg.FileName)) {
  77.          textBox.Text = reader.ReadToEnd();
  78.      }
  79.     }
  80.     
  81.     // ファイルオープンのコマンドを実行して良いかの確認
  82.     private static void File_Open_CanExecute(object sender, CanExecuteRoutedEventArgs e) {
  83.         Control target = e.Source as Control;
  84.         
  85.         Panel panel = null;
  86.         while(true) {
  87.             if (target.Parent is Panel) {
  88.                 panel = target.Parent as Panel;
  89.                 break;
  90.             }
  91.             target = target.Parent as Control;
  92.         }
  93.         
  94.         TextBox textBox = panel.FindName("textBox1") as TextBox;
  95.         if (textBox == null) {
  96.             e.CanExecute = true;
  97.             return;
  98.         }
  99.         
  100.         e.CanExecute = (textBox.Text.Length == 0);;
  101.     }
  102.     
  103.     // プログラム終了処理
  104.     private static void Window_Close(object sender, RoutedEventArgs e) {
  105.         win.Close();
  106.     }
  108. }




この部分がミソ。

//バインドで、Commandイベントを設定
win.DataContext = new { File_Open = fileCommand};




これで、わざわざMenuItemをFindNameで引っ貼り出さなくても、
イベントの追加が行えました。


関連記事
  • 2013/01/20(日) 12:31:16

コメント

バインド名

分かりやすく、楽しく読ませてもらっています。
「Commandのバインド」の項で、「File_Open」という名前(任意)でバインドされていますが、「File_Open」は同名のメソッドがあるため分かり難くなっています。
重複しない名前の方がいいのではないでしょうか。

2017/06/21 11:10  by Ｃ♯勉強中  URL  編集

非公開コメント

トラックバック

この記事にトラックバックする(FC2ブログユーザー)

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム


最新記事

カテゴリ

月別アーカイブ

RSSリンクの表示

リンク

このブログをリンクに追加する