わさわさとWPF

Transcription

1 わさわさと WPF ソースコードと要点で学ぶ WPF の活用

2 わさわさとは WPF を使用して開発された Wassr( 和製ミニブログ ) クラゕント WPF の表現によりデスクトップゕプリながら HTML に引けを取らない表示を実現 VS2008 のみで開発したためコントロールのデザン等は弄っていない 動作には Windows XP 以降が必要

3 セッションの内容 スラドは参考書 ソースコードは教科書の小説 WPF 独特の機能を使いこなす リソース スタル データバンデゖング コンバータ バリデータ コマンド デゖスパッチャ 裏技的なテクニックを使いこなす

4 対象レベル くまーでいうと 2 くらい C# か VB.NET の文法をある程度理解していること XAML の文法をある程度理解していること 基本は同じなので HTML+JS な人でも大丈夫だと思います

5 StaticResource と DynamicResource x:static プロジェクトの Resource ゕテム マージされたリソースデゖクショナリ スタル 其の壱 リソース

6 StaticResource と DynamicResource StaticResource Control.Resources で定義されたリソースを呼び出す リソースのキーは x:key 属性で指定する DynamicResource ソースコードから動的に設定されたリソースを呼び出す すなわち遅延評価される {StaticResource resourcekey} <StaticResource ResourceKey= resourcekey />

7 x:static public クラスの public static プロパテゖまたはフゖールドを参照できる マネージドリソースを参照できるが利用できる型は限られる あらかじめルート要素の xmlns:ns 属性で CLR 名前空間と関連づけをしておく xmlns:ns="clr-namespace:namespace;assembly=assemblyname {x:static ns:classname.propertyname} <x:static Member= ns:classname.propertyname />

8 プロジェクトの Resource ゕテム ビルドゕクションを Resource にすると WPF リソースとして扱われる 同一ゕセンブリのリソースの URI は pack://application:,,,/resourcefile. ext XAML からは相対パスで参照できる 参照ゕセンブリのリソースの URI は pack://application:,,,/referenceda ssembly;component/resourcefile. xaml

9 マージされたリソースデゖクショナリ ResourceDictionary にはリソースデゖクショナリフゔルをマージできる リソースデゖクショナリフゔルに EventSetter( 後述 ) を記述することはできない <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <ResourceDictionary Source="myresourcedictionary.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary>

10 スタル 1 スタルを使うとコントロールなどの既定のプロパテゖを設定できる スタルは通常リソースに設置される TargetType のみ指定するとタプの一致する要素全て x:key を併用すると StaticResource で設定した要素のみに適用される スタルは BasedOn プロパテゖで x:key が設定されている TargetType の一致するプロパテゖを継承できる

11 スタル 2 スタルには Setter EventSetter Trigger を含むことができる Setter にはプロパテゖ名と値を設定する 値にはデータバンド ( 後述 ) が使用できる DataContext は適用先のコントロールのものになる EventSetter にはベント名とベントを設定する HandlesEventToo を設定しておかないとベントが呼び出されないことがある リソースデゖクショナリフゔルでは使用できない テンプレート内で使用するとデザナが使用できない Trigger については割愛する

12 ContentControl へのデータバンド コンバータ バリデーション ListBox へのデータバンド TabControl へのデータバンド 其の弐 グ データバインディン

13 ContentControl へのデータバンド 1 何を (Source と Path) DataContext/Source/RelativeSource/Element Name 未指定だと親要素やテンプレート親から DataContext が使用される Path はそこからの相対パス いつ (UpdateSourceTrigger) LostFocus/PropertyChanged/Explicit どのように (Mode と Converter と ValidationRules) OneWay/TwoWay/OneWayToSource Converter は未定義の変換を行うのに使用される ValidationRules は値の確認に使用される

14 ContentControl へのデータバンド 2 ソースになるオブジェクトの種類に制限はないが INotifyPropertyChanged ベントが実装されていると即座に反映される DataContext はコントロールに属し 親要素から継承される ソースコードから設定しやすい Source はバンデゖングに属する つまり DataContext を上書きしない 前述した StaticResource か x:static が設定できる バンデゖングが依存関係オブジェクトでないため DynamicResource は設定できない RelativeSource も然り 詳しくは後述 ElementName も然り 他の要素を参照できる チェックされていれば有効といった用途に使う

15 ContentControl へのデータバンド 3 Path は指定されたオブジェクトのプロパテゖ XML の場合は XPath 存在しないプロパテゖの場合は後述するコンバータで変換するか拡張メソッドを使うとよい たとえば txtmessage:textbox の文字列の文字数を取得するにはサンプル 1 のようにする たとえばゕプリケーション設定の Color を取得するにはサンプル 2 のようにする (Settings.Settings のゕクセス修飾子を Public にしておく必要がある ) 1. {Binding ElementName=txtMessage, Path=Text.Length, Mode=OneWay} 2. xmlns:prop= clr-namespace AppName.Properties {Binding Source={x:Static prop:settings.default}, Path=Color}

16 ContentControl へのデータバンド 4 RelativeSource は {RelativeSource Self} のように拡張機能をネストして記述する ここは嵌りやすいので注意 Self はその要素を表す TemplatedParent はテンプレート親を表す 要するに Template を持っている要素 FindAncestor は AncestorType 型の AncestorLevel 番目に見つかった親要素を表す たとえば AncestorType=Window, AncestorLevel=1 であれば親ウゖンドウを表す PreviousData は情報不足により不明です 知っている人がいたら教えてください m( )m

17 ContentControl へのデータバンド 5 LostFocus はフォーカスを失った時点で検証とバンドを行う TextBox.Text がこの形式 PropertyChanged はプロパテゖが変更された (ry 大部分のプロパテゖがこの形式 Explicit は UpdateTarget/UpdateSource が呼び出された (ry 明示的に設定する必要がある 設定画面などはこの形式であると都合がよいが コントロール個別に呼び出さなければいけない

18 ContentControl へのデータバンド 6 OneWay はソースからターゲットへのみバンドを行う これは内容を編集できないコントロールで使用される TwoWay は両方向のバンドを行う これは内容を編集できるコントロールで使用される OneWayToSource はターゲットからソースへのみバンドを行う これについては後述する OneWay または TwoWay の場合 ソースに INotifyPropertyChanged が適切に実装されていない場合 UpdateTarget を実行するまで表示が変化しない ソースとして使う場合 INotifyChanged の実装は事実上必須とも言える

19 裏技 1 OneWayToSource の使い所 データバンドで生成された Selector の SelectedIndex を取得するもっともスマートな方法 Selector に対応するデータクラス ( わさわさでは IBundle) に SelectedIndex プロパテゖを作成する 1. ListBox の SelectedIndex を OneWayToSource で作成したプロパテゖにバンドする public int SelectedIndex{ get; set; } SelectedIndex= {Binding Path=SelectedIndex, Mode=OneWayToSource}

20 コンバータ バンデゖングに型変換はつきものであるが フレームワークによって変換できないケースもそれなりに存在する こうした場合 IValueConverter を実装したクラスを定義し リソースに配置して使用する 複数のソースを使用する場合は IMultiValueConverter を (ry ターゲットにこれを参照した MultiBinding をバンドする

21 バリデーション ほとんどの場合バンデゖングのターゲットは自由に入力可能な TextBox である このため 数値などにバンデゖングしている場合入力を制限する必要がある こうした場合は ValidationRule を継承したクラスを定義し リソースに配置し バンデゖングの ValidationRules プロパテゖに設定して使用する ValidationRule では値が正常値かどうかを bool で返す 検証を通過できなければソースに代入されない

22 ListBox へのデータバンド 1 スカラではなくコレクションにバンドされる ゕテムはテンプレートによって配置および表示される Items Source テンプレート ItemTemplate ItemsPanel 表示結果

23 ListBox へのデータバンド 2 ItemsSource には ObservableCollection<T> を使用すると効率がよい これは Add/Insert/Remove で変更部分のみ更新されるから このため ObservableCollection はマルチスレッドではデゖスパッチャ経由で操作する必要がある ( 後述 ) これは ItemsControl 全般に言えること

24 ListBox へのデータバンド 3 ItemTemplate には DataTemplate を使用する DataTemplate は ContentControl Content には Grid や StackPanel を配置し その Children にコントロールを配置する コントロールへのバンドは {Path=PropertyName} だけでよい これは DataContext により自動的に設定されるから

25 裏技 2 前ページで DataContext が自動的に設定される と書いたが これは別の用途にも使用できる すなわち コントロールのベントハンドラから参照が可能 ListView の列の場合は値そのものが設定されるが TemplatedParent.DataContext でデータクラスのンスタンスが取得可能 var Data = (sender as Control).DataContext as DataClass;

26 ListBox へのデータバンド 4 ItemsPanel を設定するとは項目の配置をカスタマズすることができる ItemsPanel には ItemsPanelTemplate を使用する ItemsPanelTemplate には StackPanel や WrapPanel Canvas などを配置できる Canvas を配置した場合は ListBox のリソースに ListBoxItem のスタルを配置し Top Left などのバンデゖングを設定する必要がある

27 TabControl へのデータバンド 1 ItemsControl に ContentTemplate プロパテゖが追加されている ただし 何故か ItemsPanel は意味を成さないため 残念ながら非常に自由度の低いコントロールとなっている Items Source テンプレート ItemTemplate ItemsPanel ContentTemplate 表示結果

28 TabControl へのデータバンド 2 ItemTemplate でタブの文字列やツールチップのテンプレートを設定する 基本的には TextBlock を配置し Text プロパテゖにタブの文字列を配置する ContentTemplate で内容のテンプレートを設定する データクラスの設計によっては ItemsControl を入れ子にすることも可能

29 コマンドとは 組み込みコマンドの使用 コマンドの定義 其の参 コマンド

30 コマンドとは GoF の Command パターンを拡張し ターゲットごとに異なる実装をもてるようにしたもの ICommand は開く 保存などの抽象的な操作を表すンターフェスで 通常 RoutedEvent が使用され public static フゖールドとして定義される CommandBinding でコマンドとターゲットの実装を紐付ける ボタンなどのとの紐付けは Command プロパテゖに Command を設定するだけでよい

31 組み込みコマンドの使用 ApplicationCommands/ComponentCo mmands/mediacommands/navigation Commands が用意されている これらのコマンドは x:static などを使用せずに指定することができる <Window.CommandBindings> <CommandBinding x:name= helpcommandbinding Command= ApplicationCommands.Help CanExecute= helpcommandbinding_canexecute Execute= helpcommandbinding_execute /> <Button Command= ApplicationCommands.Help > ヘルプ (_P)</Command>

32 コマンドの定義 RoutedCommand型のpublic staticフゖー ルドを定義する 名前 所有型 ショートカットを指定でき る 定義はサンプル1のように行う 参照はサンプル2のように行う public static RoutedCommand UpdateStatusCommand = new RoutedCommand("UpdateStatusCommand", typeof(mainwindow), new InputGestureCollection(new []{ new KeyGesture(Key.Enter, ModifierKeys.Control) })); xmlns:ta= clr-namespace AssemblyName {x:static ta:mainwindow.updatestatuscommand}

33 スレッドセーフな UI 操作 其の五 ディスパッチャ

34 スレッドセーフな UI 操作 デゖスパッチャは WinForms の Control.Invoke に相当するもの UIElement. Dispatcher を取得し Invoke メソッドにデリゲートを渡すと適宜実行される デリゲートには Action と匿名メソッドの組み合わせを使うと便利

35 ご静聴有り難うございました 質問タム