目次 1 はじめに WPF とは データバインディング バインディングモード コンバータ コマンド コレクションのデータバインディング 依存関係プロパティ...

Transcription

1 WPF 入門ノート 2017 年 3 月 12 日 (日) 小寺 広志

2 目次 1 はじめに WPF とは データバインディング バインディングモード コンバータ コマンド コレクションのデータバインディング 依存関係プロパティ 埋め込み 添付 Behavior MVVM アーキテクチャ WPF のアーキテクチャ... 1 ViewModel の概念 WPF のフレームワークの紹介 Livet... 19

3 Prism VisualTree VisualTree の検索 階層バインディング リソース Style DataTemplate 標準で提供されている UI コントロール カスタムコントロール 参考情報 おわりに... 58

4 1 はじめに 本稿では WPF の基本的な所を丁寧に解説することを意図しています データバインディング 依存関係プロパティ ViewModel VisualTree などの概念が色々 と現れますが 1 つ 1 つ理解していき 何より実際にコードを書くことで自然に WPF が使 えるようになると思います 2 WPF とは WPF (Windows Presentation Foundation) には元々 開発プラットフォーム(Windows ア プリケーション Web アプリケーション グラフィックス 等)の統合を目指すという設計 思想があったようです (Chris Anderson エッセンシャル WPF:Windows Presentation Foundation より) 実際的には Windows フォームに代わるデスクトップアプリケーショ ンの開発用フレームワークとみなされます 2.1. WPF のアーキテクチャ WPF のアーキテクチャについて msdn に記事があります 最初の図だけでもご覧ください WPF のプロジェクトを VisualStudio で作成すると 次の 3 つのアセンブリがプロジェクトの参照に追加されます これらが WPF の実体です (1) WindowsBase (2) PresentationCore (3) PresentationFramework 1

5 フリーソフトの ILSpy で上記の各アセンブリを開いてみると WPF の仕様が巨大であるこ とが察せられると思います 各アセンブリで提供されているものを幾つかピックアップし てみます (1) WindowsBase System.Windows 名前空間 DependencyProperty DependencyObject WeakEventManager Point System.Windows.Threading 名前空間 Dispatcher (2) PresentationCore System.Windows 名前空間 RoutedEvent SizeToContent UIElement System.Windows.Input 名前空間 CommandBinding System.Windows.Interop 名前空間 HwndSource System.Windows.Media 名前空間 Brush Geometry ImageSource Visual VisualTreeHelper System.Windows.Media.Effects 名前空間 BitmapEffect PixelShader ShaderEffect System.Windows.Media.Imaging 名前空間 BitmapImage WriteableBitmap (3) PresentationFramework System.Windows 名前空間 DataTemplate DataTrigger EventTrigger FrameworkElement PropertyPath Style Window System.Windows.Controls 名前空間 Button Canvas CheckBox ComboBox ContentControl ControlTemplate DataGrid DockPanel Grid Label ScrollViewer StackPanel TextBox UserControl Viewbox System.Windows.Data 名前空間 Binding BindingMode MultiBinding 上記の幾つかは 以降で触れます WPF は内部でレンダリングスレッドを 1 つ UI スレッドを 1 つ持っています UI スレッ 2

6 ドはパフォーマンスを優先して スレッドセーフにはなっていません そのため Dispatcher オブジェクトが用意されています 例えば ボタンのプロパティに対し 別スレッドから直 接アクセスすると例外が飛びます この場合 Dispatcher オブジェクト経由でアクセスすると例外は飛びません async Task DoTest() await Task.Run(() => Application.Current.Dispatcher.Invoke(() => button.height = 50d; ); ); WPF は描画に DirectX を使っています DirectX が遅い PC では WPF の描画も遅くな ります DirectX の描画では 頂点データをビデオカードに転送します 頂点データがキャ ッシュされていない初回描画は 2 回目以降の描画に比べて遅いです 例えば Excel2010 で は マウスの右クリックで表示されるコンテキストメニューで セルの書式設定 を選択す ると 初回だけダイアログ表示が遅いことが確認できると思います 3 データバインディング Windows フォームにもデータバインディングの概念はあるようですが WPF の方が柔軟 です データバインディングは UI コントロールのプロパティ と データ の同期を取 る仕組みで 理解して使えば実装が楽になると思われます データバインディングの例を挙げます UI コントロールのプロパティ ( 1) は Button の Content プロパティ データ は MainWindow の ButtonContent プロパティ (object 型) とします 以下 STEP1/4 STEP4/4 の変更は全て MainWindow.xaml.cs で行います ( 1) WPF では データバインドが可能なプロパティは依存関係プロパティ (Dependency Property) と呼ばれます 実際 Button.ContentProperty の型は DependencyProperty 型 (System.Windows.DependencyProperty) (WindowsBase.dll 提供) です 3

7 STEP 1/4 MainWindow に ButtonContent プロパティをカスタムで定義します object buttoncontent; public object ButtonContent get return buttoncontent; set buttoncontent = value; STEP 2/4 button インスタンスの Content プロパティ と MainWindow の ButtonContent プロパティ を Binding オブジェクトによって結び付けます ここでは バインディング モードを双方向に設定しています void TestBind(Button button) var buttoncontentprop = this.gettype().getproperty("buttoncontent"); var binding = new Binding Path = new PropertyPath(buttonContentProp), Mode = BindingMode.TwoWay ; button.setbinding(button.contentproperty, binding); STEP 3/4 ButtonContent プロパティがどのクラスのプロパティであるかを WPF フレームワークに伝えるために DataContext を設定します ここでは this (MainWindow) を設定しています public MainWindow() InitializeComponent(); TestBind(button); this.datacontext = this; STEP 4/4 ButtonContent プロパティから Button.ContentProperty への変更通知を 実装します そのために MainWindow に対し System.ComponentModel.INotifyPropertyChanged インタフェースを追加します このインタフェースは PropertyChanged イベントの 実装を要求します そこで PropertyChanged イベントの呼出し用のメソッド RaisePropertyChanged()を追加し これを ButtonContent プロパティの Setter から 呼ぶようにします 4

8 public partial class MainWindow : Window, INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; void RaisePropertyChanged(string propertyname) PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); object buttoncontent; public object ButtonContent get return buttoncontent; set if (buttoncontent!= value) buttoncontent = value; RaisePropertyChanged("ButtonContent"); これでデータバインディングの準備ができました 例えば マウス左ボタン押下時のハンド ラを追加し (button.content でなく) MainWindow の ButtonContent プロパティに何か 値を設定すると MainWindow 上のボタンの内容 (button.content) が変更されることが確 認できます バインディングモードが TwoWay または OneWay の場合 protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e) base.onmouseleftbuttondown(e); this.buttoncontent = "!?"; 逆に button.content プロパティに何か値を設定すると MainWindow の ButtonContent プロパティの値が変更されることが確認できます バインディングモードが TwoWay また は OneWayToSource の場合 例えば マウス左ボタン押下時のハンドラとマウス右ボタ ン押下時のハンドラをそれぞれ用意し 前者で button.content プロパティの値を変更し 後者で ButtonContent プロパティの内容を確認します 5

9 3 点補足します 補足 1/3 PropertyChanged イベントは次のようにも書けます PropertyChangedEventHandler propchanged; public event PropertyChangedEventHandler PropertyChanged add propchanged += value; remove propchanged -= value; このように書いて add の箇所にデバッグ用のブレークポイントを置いてデバッグ実行す ると DataContext = this の実行後に add が呼ばれることが確認できま す また DataContext = this を実行しないと add が呼ばれないことも確認できます 補足 2/3 RaisePropertyChanged() メソッドで PropertyChanged イベントを呼ぶと (button.content の値の変化があったときのみ) Button クラスの OnPropertyChanged() ハンドラが呼ばれます カスタムでコントロールを作成する場合 OnPropertyChanged() ハンドラ内で何か処理を書くことがあると思います 補足 3/3 上記の TestBind() では Binding オブジェクトを C#のコードで new していまし たが Xaml で Binding を書くこともできます (簡潔に書けるためこちらの書き方を推奨し ます) 例えば次の通りです <Window x:class="wpfsample.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525"> <Grid> <Button Content="Binding Path=ButtonContent, Mode=TwoWay" /> </Grid> </Window> 3.1. バインディングモード Binding オブジェクトを生成するとき バインディングモードという設定があります OneWay は OneWayToSource の逆方向なので OneWayToSource だけ押さえて下さい これは要するに ViewModel への通知です (ViewModel については後述します) UI コン トロールの依存関係プロパティ データのプロパティ の方向にのみ通知する設定です 通知方向を一方向に限定できるならば TwoWay でなく OneWay か OneWayToSource を設定した方が意図が明確になります 6

10 3.2. コンバータ データバインディングでは 依存関係プロパティの変更を検出し 通知するというメカニ ズムが働いています コンバータはその応用です 対象とする依存関係プロパティが変化したタイミングで呼ばれ 依存関係プロパティを 入力として 出力を別の依存関係プロパティに渡す ということがコンバータ (IValueConverter または IMultiValueConverter) を使って実現できます コンバータの例を挙げます TextBox から入力した数値によって ラベルの背景色を変更 する例です STEP 1/2 コンバータを作成します ConvertBack() は使わないので実装しません using using using using System; System.Globalization; System.Windows.Data; System.Windows.Media; namespace WpfSample.Converters public class NumberToColorConverter : IValueConverter static SolidColorBrush green = new SolidColorBrush(Colors.LightGreen); static SolidColorBrush yellow = new SolidColorBrush(Colors.Yellow); static SolidColorBrush pink = new SolidColorBrush(Colors.LightPink); public object Convert(object value, Type targettype, object parameter, CultureInfo culture) var text = value.tostring(); var number = string.isnullorempty(text)? 100 : System.Convert.ToDouble(value); if (number >= 70) return green; else if (number >= 40) return yellow; return pink; public object ConvertBack(object value, Type targettype, object parameter, CultureInfo culture) throw new NotImplementedException(); STEP 2/2 Xaml で TextBox と Label を配置し Label の Background 依存関係プロパティ をコンバータの出力 TextBox の Text 依存関係プロパティをコンバータを入力とします 7

11 <Window x:class="wpfsample.mainwindow" xmlns=" xmlns:x=" xmlns:conv="clr-namespace:wpfsample.converters" Title="MainWindow" Height="350" Width="525"> <StackPanel Orientation="Horizontal"> <StackPanel.Resources> <conv:numbertocolorconverter x:key="colorconv" /> </StackPanel.Resources> <TextBox x:name="numbertext" Width="100" Height="30"></TextBox> <Label Background="Binding Path=Text, ElementName=numberText, Converter=StaticResource colorconv" Width="100" Height="30" /> </StackPanel> </Window> 複数の依存関係プロパティを入力とするコンバータ (マルチコンバータ) を作成すること もできます 金額と税率を入力とし それらから計算される金額を出力とするコンバータの 例を挙げます STEP 1/2 マルチコンバータを実装します using System; using System.Globalization; using System.Windows.Data; namespace WpfSample.Converters public class AmountConverter : IMultiValueConverter public object Convert(object[] values, Type targettype, object parameter, CultureInfo culture) var amountstr = values[0] as string; var taxratestr = values[1] as string; var amount = string.isnullorempty(amountstr)? 0m : System.Convert.ToDecimal(amountStr); var taxrate = string.isnullorempty(taxratestr)? 0m : System.Convert.ToDecimal(taxRateStr); return amount * (1m + taxrate); 8

12 public object[] ConvertBack(object value, Type[] targettypes, object parameter, CultureInfo culture) throw new NotImplementedException(); STEP 2/2 Xaml 側でのマルチコンバータの呼出しを実装します <Window x:class="wpfsample.mainwindow" xmlns=" xmlns:x=" xmlns:conv="clr-namespace:wpfsample.converters" Title="MainWindow" Height="350" Width="525"> <StackPanel Orientation="Horizontal"> <StackPanel.Resources> <conv:amountconverter x:key="amountconv" /> </StackPanel.Resources> <TextBox x:name="amount" Width="100" Height="30" /> <TextBox x:name="taxrate" Width="100" Height="30" /> <Label Width="100" Height="30" Background="Aqua"> <Label.Content> <MultiBinding Converter="StaticResource amountconv"> <Binding Path="Text" ElementName="amount" /> <Binding Path="Text" ElementName="taxRate" /> </MultiBinding> </Label.Content> </Label> </StackPanel> </Window> Xaml での MultiBinding の書き方を紹介する意図でマルチコンバータの例を挙げました コンバータは DataContext のダンプなどのデバッグ用にも使えます DataContextProperty もまた依存関係プロパティなので コンバータの入力に指定できます DataContext のダン プ用コンバータを実際に書いてみると コンバータの理解が深まると思います 9

13 3.3. コマンド Button や MenuItem は Command 依存関係プロパティを持っています ICommand 型 のプロパティをバインドすると Button や MenuItem のクリック時にデータバインディン グの仕組みを経由してコマンドを実行することができます コマンドの例として Button をクリックすると TextBox の値を表示する例を挙げます STEP 1/3 ICommand を継承した RelayCommand を作成します (名前の通り コンスト ラクタで渡した Func と Action をそのままリレーして使うコマンドです) using System; using System.Windows.Input; namespace WpfSample.Commands public class RelayCommand : ICommand public event EventHandler CanExecuteChanged; Func<object, bool> canexecutefunc; Action<object> executeaction; public RelayCommand(Func<object, bool> canexecutefunc, Action<object> executeaction) this.canexecutefunc = canexecutefunc; this.executeaction = executeaction; public bool CanExecute(object parameter) => canexecutefunc(parameter); public void Execute(object parameter) => executeaction(parameter); STEP 2/3 MainWindow に TestCommand プロパティを定義します public partial class MainWindow : Window, INotifyPropertyChanged public RelayCommand TestCommand => new RelayCommand( param => true, param => MessageBox.Show($"param", "Test Command")); STEP 3/3 Xaml 側でバインディングの設定を行います 10

14 <Window x:class="wpfsample.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525"> <StackPanel Orientation="Horizontal"> <TextBox x:name="numbertext" Width="100" Height="30" /> <Button Content="コマンドテスト" Width="100" Height="30" Command="Binding Path=TestCommand, Mode=OneTime" CommandParameter="Binding Path=Text, ElementName=numberText" /> </StackPanel> </Window> 3.4. コレクションのデータバインディング ComboBox の ItemsSource 依存関係プロパティに int 型のコレクションをバインドする 例を挙げます ObservableCollection<T> を使います List<T> と比較すると挙動が分か り易いと思うので ComboBox を 2 つ用意し 1 つは ObservableCollection<T>にバインド しもう 1 つは List<T>にバインドして 両者を比較してみます STEP 1/2 MainWindow.xaml.cs に 各 ComboBox にバインドさせるプロパティと コレクションへの項目の追加処理を記載します using using using using System.Collections.Generic; System.Collections.ObjectModel; System.Windows; System.Windows.Input; namespace WpfSample public partial class TestWindow : Window public List<int> ComboItems get; set; = new List<int>(); public ObservableCollection<int> ComboObservableItems get; set; = new ObservableCollection<int>(); public TestWindow() InitializeComponent(); this.datacontext = this; 11

15 protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e) base.onmouseleftbuttondown(e); this.comboitems.add(10); this.comboobservableitems.add(10); STEP 2/2 Xaml 側に ComboBox を 2 つ追加します <Window x:class="wpfsample.testwindow" xmlns=" xmlns:x=" xmlns:conv="clr-namespace:wpfsample.converters" Title="TestWindow" Height="100" Width="450"> <StackPanel Orientation="Horizontal"> <TextBlock Text="Not Observable" Height="30" Margin=" " /> <ComboBox Width="100" Height="30" ItemsSource="Binding Path=ComboItems" /> <TextBlock Text="Observable" Height="30" Margin=" " /> <ComboBox Width="100" Height="30" ItemsSource="Binding Path=ComboObservableItems" /> </StackPanel> </Window> 上記の例では マウス左ボタン押下ごとにドロップダウンに 10 を追加することを想定して います 実行してみると Observable でない左側のコンボボックスには 10 は追加されず Observable な 右 側 の コ ン ボ ボ ッ ク ス に は 10 が 追 加 さ れ る こ と が 確 認 で き ま す System.Collections.ObjectModel.ObservableCollection では INotifyCollectionChanged と INotifyProperyChanged インタフェースが実装されています 4 依存関係プロパティ 依存関係プロパティはカスタムで定義することもできます 以下 カスタムで作成したビ ューに依存関係プロパティを埋め込みで追加する例と 任意のビューに添付する形で振舞 いを追加する例を紹介します 12

16 4.1. 埋め込み カスタムで作成した依存関係プロパティは Xaml からも参照可能です MainWindow に AspectRatioProperty をカスタムで定義する例を挙げます STEP 1/2 DependencyProperty 型の AspectRatioProperty を定義します 0.75d はデフォルト値です // ここでは AspectRatio = Height / Width で定義 public static DependencyProperty AspectRatioProperty = DependencyProperty.Register("AspectRatio", typeof(double), typeof(mainwindow), new PropertyMetadata(0.75d)); STEP 2/2 AspectRatio プロパティに対する Getter/Setter を定義します public double AspectRatio get return (double)base.getvalue(aspectratioproperty); set base.setvalue(aspectratioproperty, value); AspectRatio の値を変更すると MainWindow の OnPropertyChanged() ハンドラが呼ばれ ます これは 3 章のデータバインディングの箇所 補足 2/3 で記載した通りです protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e) base.onpropertychanged(e); if (e.property == AspectRatioProperty) // Windowのサイズ変更の処理 (Width固定) this.height = this.actualwidth * (double)e.newvalue; 4.2. 添付 Behavior 依存関係プロパティをビューの外部で定義して 定義した依存関係プロパティが変化し たときに何らかの振舞い Behavior を任意のビューに追加する ということができます 例えば 任意の Window に対し 次の 2 つの振舞いを添付する例を挙げます 1. appendinvokedtime を添付プロパティに設定しておくと Window が起動した ときに タイトルに起動時刻を追記する 13

17 2. showvmprops を添付プロパティに設定すると Window の VM の Public な インスタンスプロパティのリストをメッセージボックスで表示する まず 添付 Behavior を定義します クラスを Static で定義することと PropertyMetadata にコールバックを設定していることがポイントです // SampleBehavior.cs using System; using System.Linq; using System.Windows; namespace WpfSample.Behavior public static class SampleBehavior public static readonly DependencyProperty SampleProperty = DependencyProperty.RegisterAttached("Sample", typeof(string), typeof(samplebehavior), new PropertyMetadata(string.Empty, new PropertyChangedCallback(SampleChanged))); public static string GetSample(DependencyObject o) => o.getvalue(sampleproperty) as string; public static void SetSample(DependencyObject o, string value) => o.setvalue(sampleproperty, value); static void SampleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) var newvalue = e.newvalue as string; var window = d as Window; if (window!= null) if (newvalue == "appendinvokedtime") window.contentrendered += WindowContentRendered; else if (newvalue == "showvmprops") var vm = window.datacontext; var props = vm.gettype().getproperties(system.reflection.bindingflags.public System.Reflection.BindingFlags.Instance); MessageBox.Show(string.Join("\r\n", props.select(x => x.name)), "VMのプロパティ"); static void WindowContentRendered(object ob, EventArgs e) var window = (Window)ob; window.contentrendered -= WindowContentRendered; window.title += $" (DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss") 起動)"; 14

18 次に MainWindow.xaml に添付 Behavior の Sample プロパティの初期値を設定します <!-- MainWindow.xaml --> <Window x:class="wpfsample.mainwindow" xmlns=" xmlns:x=" xmlns:behv="clr-namespace:wpfsample.behavior" behv:samplebehavior.sample="appendinvokedtime" Title="MainWindow" Height="350" Width="525"> そして マウス左ボタン押下時に Sample プロパティの値を showvmprops に変更しま す public partial class MainWindow : System.Windows.Window public MainWindow() InitializeComponent(); protected override void OnMouseLeftButtonDown(System.Windows.Input.MouseButtonEventArgs e) base.onmouseleftbuttondown(e); Behavior.SampleBehavior.SetSample(this, "showvmprops"); 添付 Behavior は 各ビューに共通的な仕組みを作るのに使えます 15

19 5 MVVM アーキテクチャ 今までの例では MainWindow にバインド対象のプロパティを書いていましたが プロ グラムの作りとしてはよくありません プログラムが単純な構成要素に分かれていないか らです ここで MVVM アーキテクチャ (または MVVM デザインパターン) を導入しま す MVVM アーキテクチャは WPF が最初らしいです WEB で読める MVVM の解説記事を 2 つ紹介します Model-View-ViewModel デザインパターンによる WPF アプリケーション GUI アーキテクチャパターンの基礎から MVVM パターンへ 2 つ目の記事は WPF のフレームワークの Livet の作者であり Microsoft MVP でもある ugaya40 氏による PowerPoint の資料です 以下 自分の理解している範囲で MVVM について解説します Model と View は古来か らある MVC アーキテクチャでの Model および View と同じです ViewModel が何である かが分かれば MVVM も分かると思います 5.1. ViewModel の概念 ViewModel (以降 VM と略します)は View が直接参照するモデル であり View (MainWindow など) と Model (Entity など) を仲介する役割を持ったオブジェクトです このことは次の図で表せます V VM M View と VM は疎結合にするルールがあります (MVVM の規約) 疎結合は データバイン ディングによって実現されます MVVM の規約を守らなくても実装できますが 多分メン テしにくいプログラムになります (少なくとも WPF での標準的な作り方ではないです) WPF では VM は DataContext に設定するオブジェクトです DataContext 依存関係プ ロパティは System.Windows.FrameworkElement で定義されていて 例えば ユーザコント ロール単位でもボタン単位でも VM を設定できます ユーザコントロール ユーザコントロール用の VM ボタン ボタン用の VM 16

20 両者に同じ VM を結び付けることもできます VM の概念は ASP.NET MVC でも Knockout.js でも出現します ASP.NET MVC で は View (cshtml) で指定するオブジェクトが (C#で書かれた) VM です Knockout.js では ko.applybindings() で指定するオブジェクトが (JavaScript で書かれた) VM です いずれの場合も VM は View が直接参照するモデルです では 3 章の冒頭で紹介した例を MVVM アーキテクチャで書き直してみます STEP 1/4 ViewModelBase クラスを追加します 後述する WPF のフレームワークを 使う場合は VM のベースは既に用意されているので追加する必要はありません // ViewModelBase.cs using System.ComponentModel; namespace WpfSample.ViewModel public class ViewModelBase : INotifyPropertyChanged public event PropertyChangedEventHandler PropertyChanged; protected void RaisePropertyChanged(string propertyname) PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); STEP 2/4 ViewModelBase を継承して MainWindowViewModel クラスを追加し ButtonContent プロパティを定義します // MainWindowViewModel.cs namespace WpfSample public class MainWindowViewModel : ViewModel.ViewModelBase object buttoncontent; public object ButtonContent get return buttoncontent; set if (buttoncontent!= value) buttoncontent = value; base.raisepropertychanged("buttoncontent"); 17

21 STEP 3/4 MainWindow の DataContext に MainWindowViewModel を設定します ここではモーダルダイアログを想定しています モードレスダイアログの場合は VM インスタンスの設定は Xaml では行いません VM インスタンスのスコープと モードレスダイアログのスコープを一致させるためです <!-- MainWindow.xaml --> <Window x:class="wpfsample.mainwindow" xmlns=" xmlns:x=" xmlns:wpfs="clr-namespace:wpfsample" Title="MainWindow" Height="350" Width="525"> <Window.DataContext> <wpfs:mainwindowviewmodel /> </Window.DataContext> <Grid> <Button Content="Binding Path=ButtonContent" Width="100" Height="30" /> </Grid> </Window> STEP 4/4 MainWindow.xaml.cs でマウス左ボタンの押下時に ButtonContent に値を 設定するコードを追加します // MainWindow.xaml.cs using System.Windows.Input; namespace WpfSample public partial class MainWindow : System.Windows.Window public MainWindow() InitializeComponent(); protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e) base.onmouseleftbuttondown(e); var vm = this.datacontext as MainWindowViewModel; vm.buttoncontent = "!?"; VM を導入したことでコードが分離され 見通しがよくなりました プログラムの規模が大 きくなってくると VM なしで大量に書いたコードはメンテナンスしにくくなるので VM を使ってコーディングすることを推奨します 18

22 6 WPF のフレームワークの紹介 WPF の入門の段階では フレームワークを使わない方が WPF の理解が進むと思われる のですが ある程度慣れてきたら フレームワークを使った方が開発効率が上がると思いま す (フレームワーク自体の使い方に慣れることも必要になりますが) 以下 WPF のフレームワークとして Livet と Prism を紹介します Livet は国産の OSS のフレームワークで 作者は Microsoft MVP の ugaya40 氏です ドキュメントが日本語で あることとコンパクトであることが特徴です 一方の Prism は Livet よりも多機能な OSS のフレームワークで Microsoft 内の人達が書いているそうです 6.1. Livet Livet は GitHub の次の URL で公開されています VisualStudio の NuGet パッケージマネージャーからもインストールできます ライセンスは zlib/libpng ライセンスです 以下 Livet により提供される機能を幾つか例示します ちなみに Livet のコードはコメ ントが全て日本語で かつ 規模がそれほど大きくないため 割と読めると思います (1) Livet.ViewModel INotifyPropertyChanged インタフェースを実装した Livet.NotificationObject があり Livet.ViewModel はそれを継承した抽象クラスです RaisePropertyChanged() で 文字列 でなく式木でプロパティを渡せるようになっている点が特徴です これにより プロパティ 名を変更したときの VisualStudio でのリファクタリングが効くようになります 5.1 の MainWindowViewModel.cs を書き換えると次のようになります // MainWindowViewModel.cs namespace WpfSample public class MainWindowViewModel : Livet.ViewModel 19

23 object buttoncontent; public object ButtonContent get return buttoncontent; set if (buttoncontent!= value) buttoncontent = value; base.raisepropertychanged(() => ButtonContent); (2) Livet.Behaviors.LivetCallMethodAction Livet では VM のメソッドを コマンドバインドを使わずに View から呼ぶ方法が提供 されています 例えば MainWindow の ContentRendered イベントの発生時に VM の Initialize() メソッドを呼ぶ例を挙げます <!-- MainWindow.xaml --> <Window x:class="wpfsample.mainwindow" xmlns=" xmlns:x=" xmlns:l=" xmlns:i=" Title="MainWindow" Height="350" Width="525"> <Window.DataContext> <wpfs:mainwindowviewmodel /> </Window.DataContext> <i:interaction.triggers> <i:eventtrigger EventName="ContentRendered"> <l:livetcallmethodaction MethodTarget="Binding" MethodName="Initialize" /> </i:eventtrigger> </i:interaction.triggers> </Window> // MainWindowViewModel.cs namespace WpfSample public class MainWindowViewModel : Livet.ViewModel public void Initialize() // 何らかの初期化 20

24 (3) Livet.EventListeners.PropertyChangedEventListener Livet では 指定した Livet.NotificationObject の PropertyChanged イベントのリスナー が提供されています 例えば Model のプロパティの変更を VM が受け取るために使えま す 例として Livet.NotificationObject を継承した Entity を抽象クラスとして用意し Entity クラスを継承した Book クラスを作成します そして VM 上でリスナーを生成し Book オブジェクトの Name プロパティの変更を受け取る例を挙げます Model ----// Entity.cs namespace WpfSampleLivet.Models public abstract class Entity : Livet.NotificationObject public abstract string Key get; // Book.cs namespace WpfSampleLivet.Models public class Book : Entity string id; public string Id get return id; set if (id!= value) id = value; base.raisepropertychanged(() => Id); string name; public string Name get return name; set if (name!= value) name = value; base.raisepropertychanged(() => Name); /* (B) */ public override string Key => Id; 21

25 ----- VM ----// MainWindowViewModel.cs using Livet.EventListeners; using WpfSampleLivet.Models; namespace WpfSample public class MainWindowViewModel : Livet.ViewModel Book book = new Book(); public string Name get return book.name; set book.name = value; public void Initialize() var listener = new PropertyChangedEventListener(book, (_, ) => base.raisepropertychanged(() => Name) /* (C) */); base.compositedisposable.add(listener); public void OnAct() this.name = "Buttonがクリックされました "; /* (A) */ View ----<!-- MainWindow.xaml --> <Window x:class="wpfsample.mainwindow" xmlns=" xmlns:x=" xmlns:wpfs="clr-namespace:wpfsample" xmlns:l=" xmlns:i=" Title="MainWindow" SizeToContent="WidthAndHeight"> <Window.DataContext> <wpfs:mainwindowviewmodel /> </Window.DataContext> <i:interaction.triggers> <i:eventtrigger EventName="ContentRendered"> <l:livetcallmethodaction MethodTarget="Binding" MethodName="Initialize" /> </i:eventtrigger> </i:interaction.triggers> <StackPanel> <Button Content="Click" Width="100" Height="30"> <i:interaction.triggers> 22

26 <i:eventtrigger EventName="Click"> <l:livetcallmethodaction MethodTarget="Binding" MethodName="OnAct" /> </i:eventtrigger> </i:interaction.triggers> </Button> <TextBlock Text="Binding Path=Name" Width="150" Height="30" /> </StackPanel> </Window> イベントの通知パスは次の通りです (デバッガで追えます) View: Button.Click VM: OnAct() Model: Book.Name / (A) / Model: Book.Name: RaisePropertyChanged / (B) / VM: PropertyChangedEventListner のハンドラ / (C) / (4) Livet.Messaging.InteractionMessenger Livet では VM から View に対してメッセージを送る仕組みが提供されていて (VM の) Messenger オブジェクトのデータバインディング経由で実行されます 以下 Window を起 動する TransitionMessage を モード付で Window を起動する場合と モードなしで Window を起動する場合の 2 つの場合について例示します VM ----// MainWindowViewModel.cs using Livet.EventListeners; using WpfSampleLivet; namespace WpfSample public class MainWindowViewModel : Livet.ViewModel TestWindow2ViewModel vmtestwindow2; public void OpenModal() var message = new Livet.Messaging.TransitionMessage("KeyTestWindow1"); base.messenger.raise(message); public void OpenModeless() if (vmtestwindow2 == null) vmtestwindow2 = new TestWindow2ViewModel(); var message = new Livet.Messaging.TransitionMessage(typeof(TestWindow2), vmtestwindow2, Livet.Messaging.TransitionMode.NewOrActive, "KeyTestWindow2"); base.messenger.raise(message); 23

27 ----- View ----<!-- MainWindow.xaml --> <Window x:class="wpfsample.mainwindow" xmlns=" xmlns:x=" xmlns:wpfs="clr-namespace:wpfsample" xmlns:l=" xmlns:i=" Title="MainWindow" SizeToContent="WidthAndHeight"> <Window.DataContext> <wpfs:mainwindowviewmodel /> </Window.DataContext> <i:interaction.triggers> <l:interactionmessagetrigger Messenger="Binding Path=Messenger" MessageKey="KeyTestWindow1"> <l:transitioninteractionmessageaction Mode="Modal" WindowType="x:Type wpfs:testwindow" /> </l:interactionmessagetrigger> <l:interactionmessagetrigger Messenger="Binding Path=Messenger" MessageKey="KeyTestWindow2"> <l:transitioninteractionmessageaction /> </l:interactionmessagetrigger> </i:interaction.triggers> <StackPanel> <Button Content="Modal" Width="100" Height="30"> <i:interaction.triggers> <i:eventtrigger EventName="Click"> <l:livetcallmethodaction MethodTarget="Binding" MethodName="OpenModal" /> </i:eventtrigger> </i:interaction.triggers> </Button> <Button Content="Modeless" Width="100" Height="30"> <i:interaction.triggers> <i:eventtrigger EventName="Click"> <l:livetcallmethodaction MethodTarget="Binding" MethodName="OpenModeless" /> </i:eventtrigger> </i:interaction.triggers> </Button> </StackPanel> </Window> VM で Message を生成して View に送信し View に (Message を受取ったときに実行する) MessageAction を定義します モードなしの場合は MainWindow の VM で Message を new する際に TestWindow2 の VM のインスタンスを渡している点にご注意下さい ちなみに Window でなくメッセージダイアログを表示する Message もあります Information ダイアログの場合 View 側で次のようにメッセージアクションを定義し 24

28 <i:interaction.triggers> <l:interactionmessagetrigger Messenger="Binding Path=Messenger" MessageKey="KeyInfo"> <l:informationdialoginteractionmessageaction /> </l:interactionmessagetrigger> </i:interaction.triggers> VM で次のようにメッセージを生成 送信します var message = new Livet.Messaging.InformationMessage("text", "caption", "KeyInfo"); base.messenger.raise(message); 6.2. Prism Prism は GitHub の次の URL で公開されています /2/26 に Prism.Wpf の Version pre2 がリリースされたようです NuGet パッケージマネージャーからインストールできます ライセンスは Apache-2.0 Prism.Wpf をインストールすると それが依存している Prism.Core もインストールされ ます DI コンテナの Unity の拡張コンポーネント Prism.Unity もインストールしておきます (UnityBootstrapper が使えます ((5) で後述します)) 以下 Prism により提供される機能を幾つか例示します (1) Prism.Mvvm.BindableBase Prism では System.ComponentModel.INotifyPropertyChanged インタフェースを実装し ている Prism.Mvvm.BindableBase を継承して VM を作成します BindableBase は VM のデータバインド対象プロパティの Setter を簡潔に書く方法を提供します 例えば 次の 25

29 ような感じです public class MainWindowViewModel : Prism.Mvvm.BindableBase object buttoncontent; public object ButtonContent get return buttoncontent; set base.setproperty(ref buttoncontent, value); (2) Prism.Commands.DelegateCommand 3.3 /RelayCommand と同じものが Prism.Commands.DelegateCoommand として提供 されています コマンドのアクション (省略不可) とコマンドの実行可能条件を計算するデ リゲート (省略可 省略すると常に true) を次のように指定します public class MainWindowViewModel : Prism.Mvvm.BindableBase public Prism.Commands.DelegateCommand TestCommand => new Prism.Commands.DelegateCommand(() => System.Windows.MessageBox.Show("Invoked TestCommand.");, () => return /* 何らかの条件 (型はbool) */; ); コマンドの実行可能条件を再評価するには TestCommand.RaiseCanExecuteChanged(); を明示的に呼びます ボタンの Enable/Disable を更新できます (3) Prism.Mvvm.ViewModelLocator Prism では あるルールの下で View と VM を自動で結び付ける仕組みがあります ルー ルは次の通りです R1 プロジェクト直下の Views フォルダにビュー xxxxx 名称 をおく R2 プロジェクト直下の ViewModels フォルダに xxxxxviewmodel をおく (VM の 名称はビューの名称の末尾に ViewModel を付ける) ここで言う ビュー は System.Windows.FrameworkElement を継承したクラス (ユーザ コントロールやウィンドウなど) です View と VM を自動で結び付ける設定を有効にするには Prism.Mvvm.ViewModelLocator の AutoWireViewModel 依存関係プロパティに次のように true を設定します 例えば Views/SampleUserControl.cs と ViewModels/SampleUserControlViewModel.cs を用意し 26

30 ます VM は BindableBase を継承します <UserControl x:class="wpfsampleprism.views.sampleusercontrol" xmlns=" xmlns:x=" xmlns:prism=" prism:viewmodellocator.autowireviewmodel="true" Width="300" Height="300"> <StackPanel> <TextBlock Text="サンプル UserControl" Width="200" Height="30" /> <TextBox Text="Binding Path=SampleText" Width="100" Height="30" IsReadOnly="True" /> </StackPanel> </UserControl> (4) Prism.Interactivity.InteractionRequest.InteractionRequestTrigger Prism では (Livet にもあるように) VM から View に対してメッセージを送る仕組みが あります Prism.Interactivity.PopupWindowAction を使う (VM のコマンドから View の PopupWindowAction を起動する) 例を挙げます PopupWindowAction が View 側で起動 されると Window が自動生成され そこに指定した Title (string 型) と Content (object 型) が埋め込まれます View 側で Window に埋め込むビュー (例えば SampleUserControl (UserControl 型)) を指定することもできます 関連する参考情報の URL を挙げておきます Interactivity Code Sample using the Prism Library 5.0 for WPF // MainWindowViewModel.cs using Prism.Commands; using Prism.Interactivity.InteractionRequest; using Prism.Mvvm; namespace WpfSamplePrism.ViewModels public class MainWindowViewModel : BindableBase public MainWindowViewModel() this.notificationrequest = new InteractionRequest<INotification>(); this.samplerequest = new InteractionRequest<INotification>(); public DelegateCommand ShowPopupCommand => new DelegateCommand(() => this.notificationrequest.raise( new Notification Content = "Notification.", Title = "Test Notification" ); ); 27

31 public DelegateCommand ShowSampleUserControlCommand => new DelegateCommand(() => this.samplerequest.raise( new Notification Title = "サンプル" ); ); // (cf.) public InteractionRequest<INotification> NotificationRequest get; set; public InteractionRequest<INotification> SampleRequest get; set; <!-- MainWindow.xaml --> <Window x:class="wpfsampleprism.mainwindow" xmlns=" xmlns:x=" xmlns:i=" xmlns:views="clr-namespace:wpfsampleprism.views" xmlns:prism=" prism:viewmodellocator.autowireviewmodel="true" Title="MainWindow" Height="350" Width="525"> <i:interaction.triggers> <prism:interactionrequesttrigger SourceObject="Binding Path=NotificationRequest, Mode=OneWay"> <prism:popupwindowaction IsModal="True" CenterOverAssociatedObject="True" /> </prism:interactionrequesttrigger> <prism:interactionrequesttrigger SourceObject="Binding Path=SampleRequest, Mode=OneWay"> <prism:popupwindowaction IsModal="True" CenterOverAssociatedObject="True"> <prism:popupwindowaction.windowcontent> <views:sampleusercontrol /> </prism:popupwindowaction.windowcontent> </prism:popupwindowaction> </prism:interactionrequesttrigger> </i:interaction.triggers> <StackPanel VerticalAlignment="Center"> <Button Content="Notification" Width="100" Height="30" Command="Binding Path=ShowPopupCommand" /> <Button Content="Sample" Width="100" Height="30" Command="Binding Path=ShowSampleUserControlCommand" /> </StackPanel> </Window> (5) Prism.Unity.UnityBootstrapper Prism.Unity は Microsoft.Practices.Unity の拡張パッケージです Microsoft.Practices. Unity アセンブリは Unity という名称の DI コンテナを提供します DI コンテナ用の インタフェースとして Microsoft.Practices.Unity.IUnityContainer があり 例えば 次のよ うに Resolve() メソッドで指定クラスのインタンスを生成することができます 28

32 using Microsoft.Practices.Unity; using Prism.Commands; using Prism.Mvvm; namespace WpfSamplePrism.ViewModels public class MainWindowViewModel : BindableBase IUnityContainer Container get; = new UnityContainer(); public DelegateCommand ShowTestWindowCommand => new DelegateCommand(() => this.container.resolve<testwindow>().show(); ); Prism.Unity アセンブリは 初期化処理用のフレームワークである UnityBootstrapper (抽象クラス) を提供します 抽象クラスであるため継承して使います 例えば UnityBootstrapper を 継 承 し て SampleBootstrapper を 作 成 す る 例 を 挙 げ ま す UnityBootstrapper は IUnityContainer 型の Container プロパティを持っています ここで Prism.Unity では MainWindow のことを Shell と呼びます // SampleBootstrapper.cs using System.Windows; using Prism.Unity; namespace WpfSamplePrism public class SampleBootstrapper : UnityBootstrapper protected override DependencyObject CreateShell() => new MainWindow(); protected override void InitializeShell() base.initializeshell(); // 例えば モードレスダイアログ用のVMインスタンスの生成を記述する Application.Current.MainWindow = (Window)this.Shell; Application.Current.MainWindow.Show(); SampleBootstrapper は App.xaml.cs の OnStartup() メソッドで new して実行します // App.xaml.cs using System.Windows; namespace WpfSamplePrism 29

33 public partial class App : Application protected override void OnStartup(StartupEventArgs e) base.onstartup(e); var bootstrapper = new SampleBootstrapper(); bootstrapper.run(); UnityBootstrapper を App.xaml.cs の OnStartup() で使う場合 App.xaml の StartupUri 指定で実行されるウィンドウ表示処理と処理が重複するため StartupUri をコメントアウ トもしくは削除します (そうしないとアプリケーションの実行時にウィンドウが 2 つ起動 します) <!-- App.xaml --> <Application x:class="wpfsampleprism.app" xmlns=" xmlns:x=" <!--StartupUri="MainWindow.xaml">--> <Application.Resources> </Application.Resources> </Application> (6) モジュール Prism では モジュールの初期化用 ( 1) のフレームワークが提供されています ここ では 1 つのアセンブリ VisualStudio で言うプロジェクト をモジュールとします ( 1) 初期化処理が強調されることには 背景があると思われます WPF のグラフィック スには DirectX 特に Direct3D が使われていることを 2.1 で記載しました 3D グラフ ィックスでは 初期化処理で記述するコード量が多いです そこで 初期化のコードを整理 するフレームワークが提供されていると推察されます 使い方を例示します 例えば カスタムコントロール用の CustomControls プロジェク ト モジュール を作成し その初期化処理を WpfSamplePrism プロジェクトで行います STEP 1/3 CustomControls プロジェクトを作成し NuGet パッケージマネージャーから Prism.Core と Prism.Unity をインストールします 30

34 STEP 2/3 Prism.Modularity.IModule インタフェースを実装するクラス この例では EntryPoint クラス を作成します RegionManager については (7) で触れます // EntryPoint.cs using Microsoft.Practices.Unity; using Prism.Regions; namespace CustomControls public class EntryPoint : Prism.Modularity.IModule // Prism.Unity フレームワークにより Setter にインスタンスが設定される [Dependency] public IUnityContainer Container get; set; [Dependency] public IRegionManager RegionManager get; set; /// <summary> /// モジュールを初期化します /// </summary> public void Initialize() // 何らかの初期化処理を行います STEP 3/3 WpfSamplePrism プロジェクトの SampleBootstrapper クラス (5)で書いた もの で ConfigureModuleCatalog() メソッドをオーバライドして CustomControls プロジェクトの EntryPoint を AddModule()で追加します (追加すると EntryPoint の Initialize() メソッドが Prism フレームワークから呼ばれます) // SampleBootstrapper.cs using System.Windows; using Prism.Unity; namespace WpfSamplePrism public class SampleBootstrapper : UnityBootstrapper protected override void ConfigureModuleCatalog() base.configuremodulecatalog(); var catalog = (Prism.Modularity.ModuleCatalog)this.ModuleCatalog; // AddModule()によりEntryPointのInitialize()が呼ばれる catalog.addmodule(typeof(customcontrols.entrypoint)); 31

35 確かに 初期化処理が整理した形で書けそうです (7) Prism.Regions.RegionManager MainWindow が Shell と呼ばれていることからも分かるように Prism では 1 つの Window を使い続ける設計が多いことが想定されています すると 1 つの Window を複数の領域に 分けて その領域ごとにビューを割り当てる という設計が自然に導かれます この各領域 は Region と呼ばれ Region のコレクションを管理するために RegionManager が Prism により提供されています (6)で書いた CustomControls プロジェクトと WpfSamplePrism プロジェクトの例の上で RegionManager の使い方を例示します STEP 1/3 WpfSamplePrism プロジェクトの Shell MainWindow.xaml を 3 つの Region に分けて RegionName を設定します この例では ExplorerRegion OutputRegion WorkingRegion <!-- MainWindow.xaml --> <Window x:class="wpfsampleprism.mainwindow" xmlns=" xmlns:x=" xmlns:prism=" prism:viewmodellocator.autowireviewmodel="true" Title="MainWindow" Height="350" Width="525"> <Window.Content> <DockPanel LastChildFill="True"> <DockPanel.Children> <Border DockPanel.Dock="Left" Width="100" Background="Aqua"> <Border.Child> <ContentControl prism:regionmanager.regionname="explorerregion" /> </Border.Child> </Border> <Border Background="Azure"> <Border.Child> <DockPanel LastChildFill="True"> <DockPanel.Children> <Border DockPanel.Dock="Bottom" Height="70" Background="LightBlue"> <Border.Child> <ContentControl prism:regionmanager.regionname="outputregion" /> </Border.Child> </Border> <Border Background="Aquamarine"> <Border.Child> <ContentControl prism:regionmanager.regionname="workingregion" /> </Border.Child> </Border> </DockPanel.Children> 32

36 </DockPanel> </Border.Child> </Border> </DockPanel.Children> </DockPanel> </Window.Content> </Window> STEP 2/3 CustomControls プロジェクトで ExplorerRegion に埋め込むことを 想定した View SampleExplorer.xaml を VM と Model と共に作成します Model ----// ControlMessages.cs namespace CustomControls.Models public class ControlMessages public string ExplorerTitle get; set; public string OutputTitle get; set; public string WorkingTitle get; set; public ControlMessages() Initialize(); void Initialize() ExplorerTitle = "エクスプローラー"; OutputTitle = "出力"; WorkingTitle = "git1"; View ----<!-- SampleExplorer.xaml --> <UserControl x:class="customcontrols.views.sampleexplorer" xmlns=" xmlns:x=" xmlns:prism=" prism:viewmodellocator.autowireviewmodel="true"> <UserControl.Content> <StackPanel> <StackPanel.Children> <TextBlock Text="Binding Path=Messages.ExplorerTitle" /> <TreeView Background="Transparent" Margin=" "> <TreeView.Items> <TreeViewItem Header="1:00"> <TreeViewItem.Items> 33

37 <TreeViewItem Header="1:33" <TreeViewItem Header="1:40" </TreeViewItem.Items> </TreeViewItem> <TreeViewItem Header="2:00"> <TreeViewItem.Items> <TreeViewItem Header="2:20" <TreeViewItem Header="2:55" </TreeViewItem.Items> </TreeViewItem> </TreeView.Items> </TreeView> </StackPanel.Children> </StackPanel> </UserControl.Content> </UserControl> /> /> /> /> VM ----// SampleExplorerViewModel.cs using Microsoft.Practices.Unity; using CustomControls.Models; namespace CustomControls.ViewModels public class SampleExplorerViewModel : Prism.Mvvm.BindableBase [Dependency] public ControlMessages Messages get; set; STEP 3/3 CustomControls プロジェクトの EntryPoint で RegionName ExplorerRegion に対して SampleExplorer UserControl を割り当てる設定を RegionManager により 行います // EntryPoint.cs using Microsoft.Practices.Unity; using Prism.Regions; using CustomControls.Models; using CustomControls.Views; namespace CustomControls public class EntryPoint : Prism.Modularity.IModule // Prism.Unity フレームワークにより Setter にインスタンスが設定される [Dependency] public IUnityContainer Container get; set; [Dependency] public IRegionManager RegionManager get; set; 34

38 /// <summary> /// モジュールを初期化します /// </summary> public void Initialize() // モデルを破棄するスコープの設定 this.container.registertype<controlmessages>( new ContainerControlledLifetimeManager()); // コンテナにビューを登録 this.container.registertype<object, SampleExplorer>(nameof(SampleExplorer)); // RegionManagerにビューを登録 this.regionmanager.requestnavigate("explorerregion", nameof(sampleexplorer)); 以上の準備の上で WpfSamplePrism プロジェクトから Shell を起動すると 次の図のよう に左側の ExplorerRegion に SampleExplorer が埋め込まれることが確認できます 7 VisualTree Html で書かれたドキュメントを DOM ツリーと呼ぶのに対し Xaml で書かれたドキュ メントを VisualTree と呼びます (WPF は System.Windows.Media.VisualTreeHelper とい う名前のヘルパークラスも提供しています) VisualTree でまず押さえておくべきことは 明示的に指定しなければ 子の DataContext は親の DataContext を継承する ことです これが成立しないと DataContext の指定の手 35

39 間が大変です 次は VisualTree の検索方法と階層バインディングのやり方を紹介します 7.1. VisualTree の検索 VisualTree のノードとリーフは主に System.Windows.DependencyObject です 例えば Window をルートとする VisualTree で Text が設定されていない TextBlock を列挙して 各 Text に TEST を設定する例を挙げます STEP 1/2 System.Windows.Media.VisualTreeHelper をラップした VisualTreeSearch ユーティリティクラスを作成します // VisualTreeSearch.cs using System; using System.Collections.Generic; using System.Windows; using System.Windows.Media; namespace WpfSample.Utilities public static class VisualTreeSearch public static List<T> Find<T>(DependencyObject root, Func<T, bool> condition) where T: DependencyObject var founds = new List<T>(); Find(root, condition, founds); return founds; static void Find<T>(DependencyObject root, Func<T, bool> condition, List<T> founds) where T: DependencyObject var count = VisualTreeHelper.GetChildrenCount(root); for (var i = 0; i < count; ++i) var child = VisualTreeHelper.GetChild(root, i); var element = child as T; if (element!= null && condition(element)) founds.add(element); if (child!= null) Find(child, condition, founds); STEP 2/2 上記のユーティリティを使ったコードを MainWindow.xaml.cs に書きます 36

40 // using System.Linq; var founds = VisualTreeSearch.Find<TextBlock>(this, element => string.isnullorempty(element.text)); founds.foreach(x => x.text = "TEST"); 上記は ルートから下方向への検索でした 逆方向はどうでしょうか 興味と時間があり ましたら 考えてみて下さい (System.Windows.FrameworkElement は Parent プロパティ を持っていますが そこに値が設定されているとは限りません) 7.2. 階層バインディング 7.1 は C#コードでの VisualTree の検索でした 一方 Xaml で VisualTree を検索して バインディングを行うことも出来ます 例を 2 つ挙げます 例 1 矩形の高さを幅と同じ値に設定する際に 幅だけに数値を設定する例 <StackPanel> <Rectangle Width="200" Height="Binding Path=Width, RelativeSource=RelativeSource Self" Stroke="Black" /> </StackPanel> 例 2 TextBlock の Text に Window のタイトルと同じ文字列を指定する例 <Border BorderBrush="Black" BorderThickness="1" Width="300" Height="25"> <TextBlock Text="Binding Path=Title, RelativeSource=RelativeSource AncestorType=x:Type Window, Mode=FindAncestor, AncestorLevel=1" /> </Border> 37

41 RelativeSource の指定で TemplatedParent という指定もあります これは ControlTemplate を使ってカスタムコントロールを作成するときに使います 8 リソース 3.2 コンバータ で StackPanel.Resources タグの下にコンバータのインスタンスを 指定し StackPanel をルートとする VisualTree に含まれる Label で StaticResource 指定 によりそのインスタンスを参照しました この場合 コンバータは StackPanel から見たリ ソースです System.Windows.FrameworkElement は System.Windows.ResourceDictionary 型のプロ パティ Resources を持っています Window スコープでのリソース Window をルートとす る VisualTree に含まれる UI コントロールや Grid などのパネルのスコープでのリソースな ど 様々なスコープでリソースを定義できます 特に アプリケーション全体で参照できる リソースを定義できます App.xaml の Application.Resources に指定します <Application x:class="wpfsample.app" xmlns=" xmlns:x=" StartupUri="MainWindow.xaml"> <Application.Resources> </Application.Resources> </Application> ResourceDictionary は Xaml ファイルとして作成し その ResourceDictionary を読込ま せることも出来ます 例を挙げます STEP 1/2 VisualStudio で [追加] [新しい項目] [リソース ディクショナリ(WPF)] を 選択し SampleResource.xaml を追加し 以下の内容を記載します (NumberToColorConverter は 3.2 で紹介したものです) <!-- SampleResource.xaml --> <ResourceDictionary xmlns=" xmlns:x=" xmlns:conv="clr-namespace:wpfsample.converters"> <conv:numbertocolorconverter x:key="numbertocolorconverter" /> </ResourceDictionary> STEP 2/2 MainWindow.xaml で Window.Resources に SampleResources を読込みます 38

42 <!-- MainWindow.xaml --> <Window x:class="wpfsample.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="/WpfSample;component/Resources/SampleResource.xaml" /> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Window.Resources> <Grid> <Button> <Button.Background> <Binding Source="80" Converter="StaticResource numbertocolorconverter" /> </Button.Background> </Button> </Grid> </Window> ResourceDictionary を読込ませるときは Source のパス指定に注意が必要です /プロジェクト名;component/フォルダパス/ファイル名 のように指定します また C#コードで ResourceDictionary を読込ませることも出来ます MainWindow.xaml.cs で Window の Resources プロパティが参照できる箇所で 次のよう に書きます Resources.MergedDictionaries.Add( System.Windows.Application.LoadComponent( new System.Uri("/WpfSample;component/Resources/SampleResource.xaml", System.UriKind.Relative)) as System.Windows.ResourceDictionary); リソースには ブラシ コンバータ Style DataTemplate などを指定できます 8.1. Style Style を定義するときは TargetType とキー x:key を指定し 依存関係プロパティに 設定する値のコレクションを指定します キー指定を省略すると ResourceDictionary のス コープ内にある全ての TargetType に対してその Style が適用されます (1) Style の例 Style の定義例と Button への適用例を挙げます <!-- MainWindow.xaml --> 39

43 <Window x:class="wpfsample.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525"> <StackPanel> <StackPanel.Resources> <Style TargetType="x:Type Button" x:key="teststyle"> <Style.Setters> <Setter Property="Width" Value="100" /> <Setter Property="Height" Value="30" /> <Setter Property="Background"> <Setter.Value> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="White" /> <GradientStop Offset="0.2" Color="Blue" /> <GradientStop Offset="0.8" Color="Blue" /> <GradientStop Offset="1.0" Color="DarkBlue" /> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Setter.Value> </Setter> </Style.Setters> </Style> </StackPanel.Resources> <Button Style="StaticResource TestStyle" /> </StackPanel> </Window> (2) トリガー System.Windows.Style は TriggerCollection 型のプロパティ Triggers を持っています これを使って Xaml で UI コントロールの依存関係プロパティの値が特定の値になったと きに 特定の依存関係プロパティの値を変更することができます Label の IsMouseOver 依存関係プロパティの値が True になったときに 背景色を青に変 更する例を挙げます <Border BorderBrush="Black" BorderThickness="1" Width="100" Height="30"> <Label> <Label.Style> <Style TargetType="x:Type Label"> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Trigger.Setters> <Setter Property="Background" Value="Blue" /> </Trigger.Setters> </Trigger> </Style.Triggers> 40

44 </Style> </Label.Style> </Label> </Border> 複数の依存関係プロパティが特定の値の組み合わせを取るときに 特定の依存関係プロ パティの値を変更することもできます 上記の Xaml で Trigger を MultiTrigger に置き換 えて実装できます 依存関係プロパティでなく データが特定の値を取ったときに 特定の依存関係プロパテ ィの値を変更することもできます DataTrigger を使います 今度は VM の 3 つのプロパ テ ィ Mode ExistsAlert ExistsWarning の 値 を 見 て Label の 背 景 色 を 変 更 す る MultiDataTrigger の例を挙げます <Border BorderBrush="Black" BorderThickness="1" Width="100" Height="30"> <Label> <Label.Style> <Style TargetType="x:Type Label"> <Style.Triggers> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="Binding Path=Mode" Value="CheckingAlerts" /> <Condition Binding="Binding Path=ExistsAlert" Value="True" /> </MultiDataTrigger.Conditions> <MultiDataTrigger.Setters> <Setter Property="Background" Value="Red" /> </MultiDataTrigger.Setters> </MultiDataTrigger> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="Binding Path=Mode" Value="CheckingAlerts" /> <Condition Binding="Binding Path=ExistsAlert" Value="False" /> <Condition Binding="Binding Path=ExistsWarning" Value="True" /> </MultiDataTrigger.Conditions> <MultiDataTrigger.Setters> <Setter Property="Background" Value="Yellow" /> </MultiDataTrigger.Setters> </MultiDataTrigger> </Style.Triggers> </Style> </Label.Style> 41

45 </Label> </Border> 8.2. DataTemplate WPF では VisualTree バインディング情報 をテンプレート化し キー指定しておき リソースとして利用する方法が DataTemplate として提供されています DataTemplate は ContentPresenter を仲介して使います 少し抽象的ですが 強力です 例えば VisualTree として Label と TextBox バインディング情報として Label では Label.Content を LabelText プロパティにバインディング TextBox では TextBox.Text を Text プロパティにバインディング する例を挙げます STEP 1/3 DataTemplate を定義します リソースなので どこかの ResourceDictionary で 定義します 例えば Window.Resources タグの下で定義します <Window.Resources> <DataTemplate x:key="testtemplate"> <StackPanel Orientation="Horizontal" Height="30"> <Label Content="Binding Path=LabelText" /> <TextBox Text="Binding Path=Text" Width="100" Height="30" /> </StackPanel> </DataTemplate> </Window.Resources> STEP 2/3 ContentPresenter を宣言し ContentTemplate に DataTemplate のキーを 指定し Content に DataContext を指定します この例では ContentPresenter が 含まれる VisualTree で ContentPresenter の親の DataContext を参照するために Content= Binding を指定します <ContentPresenter ContentTemplate="StaticResource TestTemplate" Content="Binding" /> STEP 3/3 MainWindow の VM を DataContext にすることにして VM に LabelText と Text プロパティを定義します TextBox.Text のデフォルトのバインディングモードは 42

46 TwoWay であるため Text プロパティには Getter と Setter の両方を用意します public class MainWindowViewModel : ViewModel.ViewModelBase public object LabelText => "TestLabel"; string text; public string Text get return text; set if (text!= value) text = value; base.raisepropertychanged("text"); 9 標準で提供されている UI コントロール WPF では 以下のように様々な UI コントロールが標準で用意されています Grid StackPanel WrapPanel DockPanel Canvas Button Label ComboBox TextBox TextBlock CheckBox RadioButton ScrollViewer ViewBox Menu MenuItem ContextMenu Expander Slider ListView DataGrid ContentControl ItemsControl Popup Border UserControl Window 上記から幾つかピックアップして 利用例を紹介します ここで 入門ノートの範囲からは外れるのですが WPF の描画が遅く パフォーマンスを 43

47 意識する必要がある場合 レイアウトの選択 や UI の仮想化 を考慮することがあるか も知れません リンクを 2 つ紹介しておきます WPF アプリケーションのパフォーマンスの最適化 第 3 回 WPF アプリケーション チューニング (1) Grid Grid について押さえておくべきことは次の 2 つだと思います 1) 行と列を定義して 何行何列目に配置するといった指定が可能である 2) 行や列の指定をしないと Grid 内の UI コントロールは重ねて描画される これらについて例示します 1) 例えば 3 行 4 列を定義し 各行にボタンを配置する例を挙げます <!-- MainWindow.xaml --> <Window x:class="wpfsample.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="2.*" /> <RowDefinition Height="3.*" /> <RowDefinition Height="5.*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="1.*" /> <ColumnDefinition Width="3.*" /> <ColumnDefinition Width="2.*" /> <ColumnDefinition Width="4.*" /> </Grid.ColumnDefinitions> <Button <Button <Button <Button </Grid> </Window> Grid.Row="0" Grid.Row="1" Grid.Row="1" Grid.Row="2" Grid.Column="2" Grid.Column="3" Grid.Column="1" Grid.Column="0" Content="(1,3)" Content="(2,4)" Content="(2,2)" Content="(3,1)" 44 /> /> /> />

48 ここで 図を見ると分かるように a. の指定は比率を意味しています 一方 ピクセル指定もできます 2) 行や列を定義せずに Grid に Button を 2 つ配置してみます <!-- MainWindow.xaml --> <Window x:class="wpfsample.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525"> <Grid> <Button Width="100" Height="30" Content="TEST1" /> <Button Width="100" Height="30" Content="TEST2" /> </Grid> </Window> 実行結果は次のようになります Content が TEST1 のボタンは Content が TEST2 のボタンに上書きされ イベントも拾 えない状態になります また VisualTree は上から順に描画されていることも分かります 45

49 このままでは使えませんが 例えば HorizontalAlignment や VerticalAlignment を指定し て使えば 重ねて描画はむしろ記述量が少なくなり便利なことがあります <Grid> <Button Width="100" Height="30" Content="TEST1" HorizontalAlignment="Left" /> <Button Width="100" Height="30" Content="TEST2" HorizontalAlignment="Right" /> </Grid> (2) Canvas MSDN の次の記事 パフォーマンスの最適化 レイアウトとデザイン にもあるように 5 つのパネル Grid StackPanel WrapPanel DockPanel Canvas の中で最も描画効率がよいのが Canvas です Canvas では 座標指定して UI コントロールを配置します 他のパネルでは様々なレイ アウトロジックが実行されて位置が決まり 慣れない内は表示したい場所に表示できない ことがあるかも知れません Canvas の場合は そんなことはなくシンプルです <Canvas> <Button Canvas.Left="10" Canvas.Top="20" Width="100" Height="30" Content="(10,20)" /> <Button Canvas.Left="200" Canvas.Top="50" Width="100" Height="30" Content="(200,50)" /> <Button Canvas.Left="70" Canvas.Top="150" Width="100" Height="30" Content="(70,150)" /> </Canvas> ちなみに C#コード上で button インスタンスの Left の値を設定するには 次のように書 きます Canvas.SetLeft(button, 100d); 46

50 (3) Label Label は目に見えない伸縮性のアメーバのように使えて 拾えなかったイベントを拾う といったことができます 例えば 次のように Label を配置したとします <Grid> <Canvas> <Button Canvas.Left="10" Canvas.Top="20" Width="100" Height="30" Content="(10,20)" /> <Button Canvas.Left="200" Canvas.Top="50" Width="100" Height="30" Content="(200,50)" Click="Button_Click" /> <Button Canvas.Left="70" Canvas.Top="150" Width="100" Height="30" Content="(70,150)" /> </Canvas> <Label MouseLeftButtonDown="Label_MouseLeftButtonDown" /> </Grid> このように記述すると Canvas が描画された後に Label が描画され かつ Grid で行と列 を定義していないので Grid 全体を Label が覆うことになり ボタンのクリックイベント が呼ばれなくなります Label_MouseLeftButtonDown ハンドラが呼ばれます 一方 次のように Label を Canvas より前に宣言したとします <Grid> <Label MouseLeftButtonDown="Label_MouseLeftButtonDown" /> <Canvas> <Button Canvas.Left="10" Canvas.Top="20" Width="100" Height="30" Content="(10,20)" /> <Button Canvas.Left="200" Canvas.Top="50" Width="100" Height="30" Content="(200,50)" Click="Button_Click" /> <Button Canvas.Left="70" Canvas.Top="150" Width="100" Height="30" Content="(70,150)" /> </Canvas> </Grid> すると ボタンをクリックすればボタンのクリックイベントが呼ばれ 余白をクリックすれ 47

51 ば Label_MouseLeftButtonDown ハンドラが呼ばれます (4) ComboBox Key: Value のコレクションを並べる例を挙げます STEP 1/3 KeyValue クラスを作成します namespace WpfSample.Models public class KeyValue public string Key get; set; public string Value get; set; public KeyValue(string key, string value) this.key = key; this.value = value; public override string ToString() => $"Key: Value"; STEP 2/3 Xaml で ComboBox の ItemsSource 依存関係プロパティに ComboItems をパス で指定します <ComboBox ItemsSource="Binding Path=ComboItems" Width="150" Height="25" /> STEP 3/3 VM で ComboItems を定義します // using WpfSample.Models; public IEnumerable<KeyValue> ComboItems => new[] new KeyValue(key:"k1", value:"v1"), new KeyValue(key:"k2", value:"v2"), ; 48

52 (5) ScrollViewer 基本的な使い方は HorizontalScrollBarVisibility と VerticalScrollBarVisibility の各依存関 係プロパティに値をセットして次のように使います <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Width="300" Height="200"> <StackPanel> <StackPanel.Resources> <Style TargetType="x:Type Button"> <Style.Setters> <Setter Property="Width" Value="100" /> <Setter Property="Height" Value="30" /> </Style.Setters> </Style> </StackPanel.Resources> <Button Content="Binding Path=ButtonContents[0], Mode=OneWay" /> <Button Content="Binding Path=ButtonContents[1], Mode=OneWay" /> <Button Content="Binding Path=ButtonContents[2], Mode=OneWay" /> <Button Content="Binding Path=ButtonContents[3], Mode=OneWay" /> <Button Content="Binding Path=ButtonContents[4], Mode=OneWay" /> <Button Content="Binding Path=ButtonContents[5], Mode=OneWay" /> <Button Content="Binding Path=ButtonContents[6], Mode=OneWay" /> <Button Content="Binding Path=ButtonContents[7], Mode=OneWay" /> </StackPanel> </ScrollViewer> ちなみに VM での ButtonContents の定義は次の通りです public string[] ButtonContents => new[] "0", "1", "2", "3", "4", "5", "6", "7", ; 49

53 もう少し細かい制御をしたい場合は System.Windows.Controls.ScrollViewer は ScrollInfo プロパティを protected internal で持っているため ScrollViewer を継承して カスタムの ScrollViewer を作成するといいと思います (6) DataGrid System.Data.DataTable を ItemsSource に次のように設定して使えます Xaml 側は例え ば次の通りです <DataGrid ItemsSource="Binding Path=DataGridSource" /> VM に定義するプロパティは 例えば次の通りです DataTable dt; public DataTable DataGridSource get return dt; set if (dt!= value) dt = value; base.raisepropertychanged("datagridsource"); System.Data.DataTable の使い方は Windows フォームと同様です 例えば ビューのビハ インドで次のようにデータを作成し VM の DataGridSource プロパティに設定します var dt = new DataTable("TestTable"); dt.columns.addrange(new[] new DataColumn(columnName:"Key"), new DataColumn(columnName:"Value"), new DataColumn(columnName:"Date"), ); dt.rows.add("k1", "v1", "2017/3/12"); dt.rows.add("k2", "v2", "2017/3/12"); dt.rows.add("k3", "v3", "2017/3/12"); 50

54 System.Windows.Controls.DataGrid には CellStyle や ColumnHeaderStyle の各依存関係 プロパティなどがあり 見た目のカスタマイズを行う方法が提供されています (7) ContentControl System.Windows.Controls.ContentControl は object 型の Content 依存関係プロパティ を持っています 例えば Content にパネルを設定することにし マウス左ボタン押下でパ ネル A StackPanel マウス右ボタン押下でパネル B WrapPanel を設定する例を挙げま す Xaml は次の通りです <ContentControl Content="Binding Path=CustomContent" /> VM は次の通りです object customcontent; public object CustomContent get return customcontent; set if (customcontent!= value) customcontent = value; base.raisepropertychanged("customcontent"); ビューのビハインドのハンドラは次の通りです protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e) base.onmouseleftbuttondown(e); var vm = this.datacontext as MainWindowViewModel; var stackpanel = new StackPanel(); var textblock = new TextBlock Text = "SampleText", Width = 100d, Height = 30d ; var button = new Button Content = "Content", Width = 100d, Height = 30d ; stackpanel.children.add(textblock); stackpanel.children.add(button); vm.customcontent = stackpanel; protected override void OnMouseRightButtonDown(MouseButtonEventArgs e) base.onmouserightbuttondown(e); var vm = this.datacontext as MainWindowViewModel; 51

55 var wrappanel = new WrapPanel(); var buttons = new Button[20]; for (var i = 0; i < buttons.length; ++i) buttons[i] = new Button Content = i, Width = 100d, Height = 30d ; wrappanel.children.add(buttons[i]); vm.customcontent = wrappanel; 10 カスタムコントロール WPF の大きな特徴の 1 つは 標準で提供されている UI コントロールを組み合わせて カ スタムでコントロールを柔軟に作成することができることです カスタムで UI コントロールを作成するには 次の 3 つの方法があります (1) UI コントロールの Template プロパティに ControlTemplate を実装します (2) System.Windows.Controls.UserControl を継承して作成します (UI は主に Xaml で 記述します) (3) System.Windows.ContentControl を継承したクラスを継承して作成します (UI は 主に C#コードで記述します) (1) の例 例えば Label をタグ付きのボタンとして扱うように ControlTemplate を定義することが できます RelativeSource で TemplateParent を指定していることにご注意ください <Label Tag="タグ" Content="TEST"> <Label.Style> <Style TargetType="x:Type Label"> <Style.Setters> <Setter Property="Template"> <Setter.Value> <ControlTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="Binding Path=Tag, RelativeSource=RelativeSource TemplatedParent" Height="25" Margin=" " /> 52