約 6,506,226 件
https://w.atwiki.jp/wpfapp/pages/13.html
WPF(Windows Presentation Foundation)とは 一言で言えば、Windows用アプリケーション開発のためのGUIライブラリ。細かい事を言えば.NET Framework上で動作するため、ターゲット環境はWindowsに限るわけではないし、GUIライブラリというよりは、GUIアプリ開発のためのフレームワークと呼べるかもしれない。 いずれにしてもWindowsで、しかも.Net Frameworkを使ったGUIアプリ開発をする際にはWindows Formsと並んで選択肢の一つとなる存在。WPFの方が後発である分、先進的な設計思想に基づいて作られている。Windows Formsの後継というほどではないが、Microsoftとしては今後はWindows FormからWPFの開発へ注力してくらしい。 WPFの特徴 Windows FormsやVisual C++におけるMFCなどと比較して、特記すべき事項は ロジックとインターフェースの分離が可能 ただでさえ動作の重い.Net Frameworkだが、それに輪をかけて重い 描画はDirect3Dを用いるためGPUの恩恵を受けれる データドリブンなアプリケーションを作成できる(データバインディング) 1.は、WebにおけるHTMLとJavaScriptの関係に似てるのかもしれない。WPFではUI部分をXAMLと呼ばれるXMLで記述し、処理の部分をC#やVisual Basicで記述する。UI部分のXML記述する方式はAdobe AirやSilverlightのようなRIAにもよく見られる。XAMLの仕様も膨大なものになっているので私も触りしか把握できていないが、HTMLとCSSの関係のようにUIの構造と見栄えも分離できれば良いと思うのが、見栄えも今のところXAMLで定義するようだ。複雑な見栄えはExpression Blend等の外部ツールで定義することをMicrosoftは想定しているようだ。 2. フレームワークの多用は開発が容易になる反面、実行速度が犠牲になりがちだがWPFも例外ではない。とはいえ起動は遅いものの体感では問題になるほどではなかった。対象ユーザを考慮して、非力なPCが想定される場合は、WPFの選択には注意が必要。 3. マルチメディア・グラフィック周りの対応が充実しているので、特に意識せずコードを書いてもGPUを活用してくれるのは有り難いだろう。私はこの辺りを意識しないといけないアプリを書いたことが無いので、あまり書けることがないです。 4. WPFでの開発において肝となる部分であり、同時に慣れない者にとっては最大の壁となる概念。要はデータとUIコントロールを文字通り結びつけて(バインド）して、データが更新されればそれは即座にUIコントロールに反映される。逆にUIコントロールから編集作業をすればそのままデータが更新される。データが更新されてもユーザーが更新操作をしなければ反映できなかったイベントドリブンに比べれば、容易かつ直感的なアプローチで開発できる。が、どのコントロールにどんなデータがバインドできるのか、どのような方法でバインドするのかといった情報が乏しい。DataBaseのデータも直接バインドできるため、これが主な用途と思われるが情報もこれに偏っているおり私は非常に困っている最中です。
https://w.atwiki.jp/wpfapp/pages/14.html
デザイナにドラッグ＆ドロップでコントロールで配置していくのはMFCやWindows Formとそう変わらないがWPFにおいて、それはいくつかある配置方法の中の一つであり、各種の配置用コントロールが用意されている。入れ子関係を表現できるXMLでUI構造を定義するというWPFの特徴から推察できるとおり、各コントロールは入れ子にすることが可能。 DockPanel 上部にメニュー/ツールバー、下部にステータスバーといった一般的なWindowsアプリでお馴染みなレイアウトを構成する場合にお世話になるコントロール。 図解しないと解り辛いので、とりあえず判り易く解説しているサイトに誘導。 [WPF] WPF入門 ～レイアウト [DockPanel]～ http //blogs.wankuma.com/kzt/archive/2009/03/17/169777.aspx
https://w.atwiki.jp/ryouga0415/pages/84.html
更新日：2010-03-08 WPF … Windows Presentation Foundation WPFを使ったGUIアプリケーションの開発は，Visual Studio 2008で可能になりました。 VS2008のSP1では、42個のコントロールが利用できる。 VS2010では、新たにCalender,DataGrid,DataPickerが追加され、44個のコントロールが利用できる。 ※既存のUniformGridは無くなった。 Calender … 色々な種類のカレンダーコントロールが利用可能に。 DataPicker … OSの日付と時刻のプロパティのようなコントロールが利用可能に。 WPFの特徴 従来からあるようなコードベースのAPIだけではなく、XAML(ザムル)と呼ばれるXMLによるプレゼンテーション 記述言語を利用することで、ASP.NETのようなコードビハインド機能を実現すること出来ます。 Microsoft Expression Blend WPFアプリケーションのUIをデザインするために利用可能なデザイナー向けのツール ※Microsoftのページより評価版(無料)がダウンロード可能 製品版は、購入が必要です。 製品版では、デザインだけでなく、Blendツール上でイベントの記述やデバックが可能 NUnit単体テストの自動実行を支援するツール Java用のテストツールである「JUnit」を元に.NETで利用可能にしたもの 最新バージョンは、NUnit2.5.2(http //sourceforge.net/projects/nunit/) Silverlightマイクロソフトが開発したインターネットブラウザ用のプラグイン VS2010より、標準でSilverlightアプリケーションの開発が可能になりました。 Silverlightの特徴標準技術との連携が容易で、JavaScriptより300～1000倍高速 SilverlightとWPFの違いSilverlight … マルチプラットフォーム、マルチブラウザで動作するブラウザ用プラグイン WPF … Windowsプラットフォーム(XP以降)で動作するwindowsアプリケーション用の技術 なぜXAML？Windowsフォームでは、画面のデザインは自動生成のためVS任せ。 WPFでは、XAMLを利用し、画面のデザインがデザインツールなどでも容易になった。
https://w.atwiki.jp/atachi/pages/39.html
データグリッドの機能 [#mf0696a7] データグリッドの設定 [#md3a96c1] カラム [#h1c86b3c] カラムの設定 [#h666d223] カラムの種類 [#kce03342] ボタンをカラムに表示する [#ufea0d87] コンボボックスをカラムに表示する 参考サイト データグリッドの機能 カラム自動生成機能 DataGrid.ItemsSourceに設定されたデータの型情報を元に、データグリッドのカラムを自動生成する機能を持ちます。 カラムの定義を記述する必要がなく、データを与えるだけですべての情報が表示されることができます。 逆に表示するデータの項目を制限したい場合やカラムの順番の変更、表示形式の変更などを行いたい場合はこの機能を無効にし、カラムの定義を記述していく必要があります。 カラム自動生成機能の制御はDataGrid.AutoGenerateColumns プロパティのフラグで設定できます。 データグリッドの設定 名前 プロパティ名 設定例 備考 読み込み専用モード DataGrid.IsReadOnly True グリッド全体を読み取り専用モードにする。編集モードにならない ソートの有効 DataGrid.AllowSorting True レコードのソートを許可する ユーザーによるレコードの追加 DataGrid.CanUserAddRows True 実行時にユーザーによってレコードの追加を許可する ユーザーによるレコードの削除 DataGrid.CanUserDeleteRows True 実行時にユーザーによってレコードの削除を許可する ユーザーによるカラム位置の変更 DataGrid.CanUserReorderColumns True 実行時にユーザーによってカラムの場所の移動を許可する ユーザーによるカラム幅の変更 DataGrid.CanUserResizeColumns True 実行時にユーザーによってカラムの幅の変更を許可する カラムの自動生成機能 DataGrid.AutoGeneratingColumn True データソースから自動的にカラムの生成を行う カラム カラムの設定 名前 プロパティ名 設定例 備考 ヘッダー名 DataGridColumn.Header 文字列 ヘッダー名に設定したい文字列 ヘッダーの幅 DataGridColumn.Width 数字 ヘッダーの幅 * すべてのカラムの幅の合計がグリッドの幅より小さい場合に、グリッド幅まで広げる SizeToCells 列の中でセルの幅が最大のものに合わせる SizeToHeader セルの幅をヘッダー名の幅に合わせる 読み取り専用列 DataGridColumn.IsReadOnly True カラムを読み取り専用にするグリッド全体を読み取り専用にするにはデータグリッドの設定を参照。 カラムの種類 定義済みのカラムを使用する。または、独自のカラムを定義することも可能。 カラム名 説明 DataGridTextColumn TextBlockまたはTextBoxによるカラムの描画を行う。文字列の表示や編集を必要とする場合に使用するカラム DataGridCheckBoxColumn データがBoolean型でCheckBoxによるカラムの描画を行う。 DataGridComboBoxColumn ComboBoxによるカラムの描画を行う。 DataGridHyperlinkColumn データをURIとして扱う。Hyperlinkによるカラムの描画を行う。 DataGridTemplateColumn データテンプレートを使用して独自のコントロールを使用してカラムの描画を行う。 ボタンをカラムに表示する DataGridTemplateColumnを使ってカラムを定義することで、カラムに任意のレイアウトで表示することができる。 下記の例はカラムにボタンを表示するサンプルです。 DataGrid DataGrid.Columns DataGridTemplateColumn DataGridTemplateColumn.CellTemplate DataTemplate Button Content="テスト" / /DataTemplate /DataGridTemplateColumn.CellTemplate /DataGridTemplateColumn /DataGrid.Columns /DataGrid コンボボックスをカラムに表示する DataGridのカラム設定でDataGridComboBoxColumnを使用します。 表示されるコンボボックスの選択項目をDataGridのアイテム以外から設定する場合には、少し工夫が必要となります。 なぜかDataGridComboBoxColumn.ItemsSourceに直接バインドすることができないので、EditingElementStyleプロパティとElementStyleプロパティを使って直接コンボボックスのItemsSourceに表示させたい項目のコレクションをバインドします。 Window Grid DataGrid AutoGenerateColumns="False" Height="232" HorizontalAlignment="Left" Margin="12,12,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="479" ItemsSource="{Binding Studios}" DataGrid.Columns DataGridTextColumn Header="映画名" Binding="{Binding Label}" Width="150"/ DataGridComboBoxColumn Header="DataGridComboBoxのテスト" SelectedItemBinding="{Binding CategoryType}" DataGridComboBoxColumn.ElementStyle Style TargetType="{x Type ComboBox}" Setter Property="DisplayMemberPath" Value="ViewName" / Setter Property="ItemsSource" Value="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x Type Window} },Path=DataContext.Types}" / /Style /DataGridComboBoxColumn.ElementStyle DataGridComboBoxColumn.EditingElementStyle Style TargetType="{x Type ComboBox}" Setter Property="DisplayMemberPath" Value="ViewName" / Setter Property="ItemsSource" Value="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x Type Window} },Path=DataContext.Types}" / /Style /DataGridComboBoxColumn.EditingElementStyle /DataGridComboBoxColumn !-- ↓の方法ではコンボボックスの一覧にItemsSourceを使うことができない -- DataGridComboBoxColumn Header="DataGridComboBoxのテスト" SelectedItemBinding="{Binding CategoryType}" ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor,AncestorType={x Type Window} },Path=DataContext.Types}" DisplayMemberPath="ViewName"/ /DataGrid.Columns /DataGrid /Grid /Window MyDataはXAMLの分離コードでWindowのDataContextに設定します。 public class MyData { public MyData() { _Types.Add(new CategoryType { ViewName = "Type A" }); _Types.Add(new CategoryType { ViewName = "Type B" }); _Types.Add(new CategoryType { ViewName = "Type C" }); _Studios.Add(new Studio { Label = "A", CategoryType = _Types.ElementAt(0) }); _Studios.Add(new Studio { Label = "B", CategoryType = _Types.ElementAt(2) }); } public ICollection Studio Studios { get { return _Studios; } } public ICollection CategoryType Types { get { return _Types; } } private ICollection Studio _Studios = new ObservableCollection Studio (); private ICollection CategoryType _Types = new List CategoryType (); } public class Studio { public string Label { get; set; } public CategoryType CategoryType { get; set; } } public class CategoryType { public string ViewName { get; set; } } 参考サイト MSDN DataGrid DataGridの使い方 DataGridで行ごとに色を変えるには？ セル内のボタンを表示・非表示する方法 動的にカラムの表示非表示を切り替えるDataGridの作成
https://w.atwiki.jp/atachi/pages/48.html
WPFが実装しているコントロールは、旧フォームや他のGUIのフレームワークと比べるとま非常に貧弱なので注意が必要。 フォーム中心のアプリケーションの開発を行うならば、今はまだフォームアプリケーションプロジェクトでの開発がいいのかもしれません。 目次 記事の紹介 [WPF][C#]CheckedListBoxを作ろう 目次 XAMLイベントグラフィックスコマンドコンポーネントコンテナコントロールChartColorPickerMicrosoft Outlook Appointment ViewMonthview CalendarNotifyMessagePropertyGridコンボボックスタブコントロールチェックボックスリストボックスツリーコントロールテキストボックスバリデーションデータグリッドリストビューリストボックススタイルデータバインディング依存関係プロパティ 記事の紹介 [WPF][C#]CheckedListBoxを作ろう かずきのBlog CheckedListBoxを作ろう 各項目にチェックボックスがついたListBoxの実装方法と説明。
https://w.atwiki.jp/atachi/pages/36.html
アイテムの表示 [#pd6f59e0] チェックボックスをもつツリーコントロール TreeViewはWindowsのエクスプローラーのように、開閉可能な枝と葉を階層構造に配置したビューです。 TreeViewItemのテンプレートをカスタマイズすることで、アイテムの表示形式を変更することができます。 アイテムの表示 ItemsSourceプロパティはバインディングを使ってコレクションを与えることができます。 ObservableCollection string items = new ObservableCollection string (); items.Add("北海道"); items.Add("青森"); items.Add("秋田"); items.Add("山形"); // XAML TreeView ItemsSource="{Binding items}" / チェックボックスをもつツリーコントロール CodeProjectにツリーコントロールの各アイテムにチェックボックスを持たせるためのサンプルコードが投稿されています。 http //www.codeproject.com/KB/WPF/TreeViewWithCheckBoxes.aspx
https://w.atwiki.jp/osinko/pages/113.html
＜資料＞ 非常に分かりやすい資料：Windows Presentation Foundation 概要（WPF） (.NET Framework) （このページの右隅下側に「Windows Presentation Foundation」の統合メニューがあり、そこから概要や基本構造などのページが閲覧できます。非常に分かりやすいので困ったときは読むこと） （慣れた頃に読むと良い）WPF入門 － ＠IT たぶんMSDN内で最新のバインディングに関するサンプルや資料で読みやすい：方法のトピック XAMLのコントロールの仕様を見たい場合はここが見やすい：System.Windows.Controls 名前空間 ＜Ｃ＃（ＣＬＲ）とＸＡＭＬ（ＷＰＦ）のリソースとコレクションの連携方法＞ リソースとコード http //msdn.microsoft.com/ja-jp/library/vstudio/system.windows.resourcedictionary.aspx コレクションにバインドして選択に基づく情報を表示する SelectedValue プロパティ ＜描画に関する資料＞ 描画の要となるDrawingContextとDrawingVisualに関して簡潔に説明がある：Simple is best - Yahoo!ブログ ＜利用頻度の高いマークアップ拡張＞ Binding 通常のバインディング。{Binding X}という書き方は{Binding Path=X}と同じ意味である。ElementName=で対象をエレメントにしたり、Source=でソースにしたり、RelativeSource=でターゲットの位置に対して相対的な位置を指定することにより、バインディング ソースを取得できる。続くPathで対象のプロパティを指定する。バインディング・ソースがXMLデータの場合、PathプロパティではなくXPathプロパティを利用する TemplateBinding コントロールテンプレートの適用先のコントロールに与えられたプロパティ値を取得するために利用する 資料：RelativeSource のマークアップ拡張機能 例 StackPanel !--エレメントをキーで参照してバインディング-- TextBox x Name="TextBox1" Text="5"/ Slider Value="{Binding ElementName=TextBox1, Path=Text}"/ !--先祖をたどってWindow要素を見つけプロパティTitleをバインディング-- TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Window}, Path=Title}"/ !--自分自身のプロパティWidthを参照してHeightにバインディング-- Rectangle Fill="Aqua" Width="50" Height="{Binding RelativeSource={RelativeSource Self}, Path=Width}"/ /StackPanel ＜利用頻度の高いコードスニペット＞ propdp 依存プロパティを記述する際に非常に便利 ＜利用頻度の高いusing＞ System.ComponentModel DependencyObjectを利用したい場合に必要。INotifyPropertyChangedは自動実装される Microsoft.Win32 コモンダイアログの利用等に System.IO File.Open関数などファイル入出力 System.Windows.Markup XamlWriter.Save関数などシリアライズ ＜利用頻度の高いプロパティ＞ Resources リソース、XAML内にオブジェクトを作ったりする際に利用する。リソースのコードを書く位置に注意：利用するオブジェクトのコードより上（先に宣言しておく必要がある）に書かれている必要がある Content プロパティは Object 型である為、格納できる項目に制限は無い。つまり文字でもUIElementでもなんでも入れて表示できる DataContext 子へと継承可能なコレクションを指定する Items そのコントロールが扱うアイテムコレクション（絶対指定オブジェクト）。ItemsSourceとの併用は不可らしい ItemsSource そのコントロールで利用したいリソース内のコレクション、もしくはバインディングオブジェクトをここで設定する（相対指定オブジェクト） IsSynchronizedWithCurrentItem 選択アイテムの変更を反映させる。ComboBoxやListBoxエレメント等で利用する DisplayMemberPath オブジェクト内のテキスト表示するプロパティを指定する（ちなみにプロパティウインドウではキーボードで直接名前を入力した方が早い） Name エレメントの名前 ElementNameのキー値指定時にここで設定した一意のキー名を利用する。反対に言えばこれを設定しない場合バインディングできない（しない） Text 表示するテキスト SelectedValuePath 選択アイテムを値で参照する際のコレクション内のプロパティ先を文字列で指定できる SelectedValue 選択する値 SelectedIndex 選択するインデックス SelectedItem 現在選択されているアイテムオブジェクト。このまま続けて「.～」でプロパティを書いてもＯＫ。例 Image Source="{Binding SelectedItem.FileLocation, ElementName=ComboBox1}" /Image ＜利用頻度の高いオブジェクト＞ Style スタイル指定。TargetTypeプロパティでスタイルを適用するターゲットをコントロール名で指定できる Setter Style等をセットする。Property と Value を使用して対象プロパティを指定し値をセットする。Style内に複数指定可能 ResourceDictionary リソースのオブジェクトを生成する。XAMLのファイル指定も可能。MergedDictionarieで複数の辞書を結合できる Style.Triggers トリガー動作するスタイルを指定する。プロパティにイベント、バリューに値を指定。子のSetterで設定指定する ControlTemplate コントロール・テンプレートを作成する。TargetTypeで動作するコントロール。XAMLで挟む内容に視覚要素を書くと良い ContentPresenter この要素が置かれた位置にコントロールの中身（＝Contentプロパティに与えた値）が配置される コントロール・テンプレートがコントロールの表示方法をカスタマイズするものであるのに対して データ・テンプレートはデータの表示方法をカスタマイズするものである ＜トリガーの種類＞ Trigger： 特定のプロパティの値の変化をトリガーとして、Setterを用いてプロパティ値を変更する。 MultiTrigger： Triggerを複数条件に対応させたもの。指定したすべての条件が満たされた場合にトリガーがかかる。 DataTrigger： スタイル適用先のUI要素だけでなく、データ・バインディングされたデータを監視する。 MultiDataTrigger： DataTriggerの複数条件版。 EventTrigger： プロパティ値の変化ではなく、イベントの発生をトリガーとする。また、Setterではなくストーリーボードを使ったアニメーションによりプロパティ値を変化させる。 ＜コントロール・テンプレートの作成＞ ボタンなどのコントロールの基底となるControlクラス（System.Windows.Controls名前空間）は Templateというプロパティを持っていて、このTemplateプロパティにControlTemplateクラス （System.Windows.Controls名前空間）のインスタンスを設定すればよい。 リソースの作成例： Window.Resources ResourceDictionary ResourceDictionary.MergedDictionaries ResourceDictionary Source="Dictionary1.xaml" / ResourceDictionary Style TargetType="Button" Setter Property="Background" Value="BlanchedAlmond" /Setter Setter Property="FontSize" Value="30" /Setter /Style /ResourceDictionary /ResourceDictionary.MergedDictionaries /ResourceDictionary /Window.Resources トリガーの作成例： StackPanel.Resources Style TargetType="TextBox" Setter Property="Background" Value="LightGray"/ Style.Triggers Trigger Property="IsMouseOver" Value="True" Setter Property="Background" Value="LightBlue"/ /Trigger Trigger Property="IsFocused" Value="True" Setter Property="Background" Value="LightPink"/ /Trigger /Style.Triggers /Style /StackPanel.Resources コントロール・テンプレートの作成例： Window.Resources Style TargetType="Button" Setter Property="Template" Setter.Value ControlTemplate TargetType="Button" Grid Ellipse Width="100" Fill="{TemplateBinding Background}" / ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/ /Grid /ControlTemplate /Setter.Value /Setter /Style /Window.Resources StackPanel Button Content="ABC" Background="Aqua" Height="50"/ Button Content="DEF" Background="Crimson"/ /StackPanel ＜利用頻度の高いXAML＞ VisualStudio上のXAMLはコードで書いた方がスムーズに作業できる。 コードの入力方法が分らない際、プロパティウインドウをヘルプ的に利用してもよいが煩雑なので基本的にコード作業推奨 インテリセンスが利用できない事柄。以下の状況ではまったくインテリセンスが働かないバインディングの際のElementNameのキー値指定やリソースのキー値指定 ルーティングイベントのハンドラの記述（資料） 以上の理由からバインディングの割り当てやリソース値の作成や割り当てはプロパティウインドウを利用するのがやりやすい XAML は大文字と小文字を区別する プロパティ属性値は文字列で設定する。 この文字で指定されたプロパティの値は適切な型変換されなければならない（WFPは既定で特定の型変換のクラスを持っていてコンパイル時適切に処理されている） 必要であれば型変換を自分で作らなければならない XMLで記述する注意点。XAMLの記述にはXML形式を用いるため「 」「 」「 」「"」などの文字はそのままでは利用できない。これにはCDATAセクションを用いる（「 ![CDATA[」と「]] 」で囲む） xmlns 一意の名前 名前空間の指定（オススメはsrc（ソース）など良さそう） 一意の名前 オブジェクト名 これにより名前空間内のＣＬＲオブジェクト（Ｃ＃のオブジェクト等）にアクセスできる。インスタンスもこれで作成できる !-- Text -- 注釈 x Key 各リソースにキー値、一意の名前を設定します。エレメントに名前を付けたりResourceやStyleやTemplate等さまざまに使用します x Class XAML ページの分離コードを提供するクラスの CLR 名前空間とクラス名を指定します x Code ![CDATA[]] 等と併用すればXAML内にCLRコードなどが埋め込める/ x XData XMLデータアイランドをXAML稼働環境内に配置できるようにします。主にXmlDataProvider の子オブジェクトとして使用される。資料 XmlDataProvider データ バインディングで使用する XML データへの宣言アクセスを有効にします。これによりインライン XML データを埋め込むことができます。プロパティ「XPath」：データ コレクションの生成に使用される XPath クエリを取得または設定します。資料 ＜単語＞ Dependency 依存する XAML Extensible Application Markup Language の略。「拡張アプリケーションマークアップ言語」みたいな意味。CLRにおけるオブジェクトのインスタンス（以降、CLRオブジェクト）を生成するためのマークアップ言語。Metroスタイルでも利用できる。 WPF Windows Presentation Foundation の略 Parser パーサー 型変換のこと コードビハインド（code-behind） XAML 中に記述したGUI要素とＣ＃（ＣＬＲ）で記述したプログラム処理を分離して製作する考え方。デザイナーとプログラマーそれぞれ分けて作業できるようにする仕組み。デザイナーがコードを読まなければいけない時点で仕組み的に、やや無理がある気もする マークアップ拡張 ｛ ｝で囲まれた部分で行う拡張機能の事。例 Text="{Binding ElementName=slider1, Path=Value}"/ リソースの利用時もマークアップ拡張で指定を行う。例 TextBox Text="{DynamicResource String1}" FontSize="{DynamicResource value}" / アトリビュートシンタックス（Attribute Syntax） プロパティをセットする構文 例＜Window Title="MainWindow" Height="350" Width="525" プロパティエレメントシンタックス（Property Element Syntax） プロパティ要素構文。同じくプロパティをセットするがエレメントのような扱いで構文を書く 例 TextBox Width="80" Binding ElementName="slider1" Path="Value"/ /TextBox 少し手の込んだ階層構造のプロパティはこちらの構文でないと書けないものがある URI (Uniform Resource Identifier) インターネット上やローカルのハードディスク内にあるファイルを参照できる仕組み Loose XAML CLRを含まずXAMLのみで動くプログラムの事。IEやfireFox等で動く ＜ファイル構成＞ App.xaml この XAML ファイルでは、WPF アプリケーションとすべてのアプリケーション リソースを定義します。 Application.Resources タグ内で指定する。リソースのコードを書く位置に注意 利用するオブジェクトのコードより上（先に宣言しておく必要がある）に書かれている必要がある ＜データバインドの要点＞ データーバインディングの概念とデータフローの方向 IC9060.png データバインドの具体的なコード例はWPF_サンプルを参照 こちらも詳しい資料：WPFの「データ・バインディング」を理解する－＠IT ＜利用頻度の高いCLRクラス＞ ObservableCollection T 通知アリのデータコレクション IValueConverter 型コンバータを作成する際に利用するクラス。ValueConversion属性も合わせて利用するらしい ＜図形＞ Rectangle 矩形（四角） Ellipse 円 Polygon 多角形 Line 線 型変換 XAMLプロセッサにとって全てはテキスト文字列として受け取られている 最終的にテキストはプロパティの値の型に変換される必要がある たとえば、 LinearGradientBrush StartPoint="0,0" EndPoint="1,1" のように指定した場合 XAMLプロセッサは既定の設定により"0,0"というstringをPoint.X=0,Point.Y=0という風に型変換している これにはPointConverterクラスが利用されている ＜PointConverterの例＞ PointConverter a = new PointConverter(); string str = "12,24"; Point test = (Point)a.ConvertFrom(str); string test2 = (string)a.ConvertTo(test, typeof(string)); これにより文字列"12,24"がPoint型のx=12,y=24に変換される 最後の行ではPoint変換された値を、またもとのstringに変換している ConvertFrom()はXAMLのコンパイル時の型変換に利用され、ConvertTo()はシリアライズに利用される このような仕組みを利用してカスタムな型変換処理を組み込むことができる 詳細は資料：TypeConverters および XAMLを参照 Ｃ＃（CLR）で書いたクラスをWPFのXAML上でインスタンス化したい場合、まずXAMLのカスタムプレフィクスを定義してアセンブリの型を XAML で参照できるようにする必要がある XAML要素としてのカスタム クラスの要件 カスタム クラスがパブリックであり、既定の (パラメーターなしの) パブリック コンストラクターがサポートされている カスタム クラスが入れ子になっていない。入れ子になったクラスや、そのクラスの一般的な CLR で使用される構文の "ドット" は、添付プロパティなどの他の WPF または XAML の機能に干渉します。 資料：XAML のカスタム プレフィックスとカスタム型 資料：WPF における XAML とカスタム クラス ＜例＞ Page x Class="WpfApplication1.Page1" xmlns src="clr-namespace WpfApplication1" これで参照が通っているのでＣ＃内のコードで書かれたPersonクラスをインスタンス化したい場合 Page.Resources src Person x Key="test" Name="このようにプロパティもセットできる"/ /Page.Resources のように一意のキーを指定した上でインスタンス化する。この際プロパティを使って値をセットできる。この場合、以後XAML内で「test」の名前でこのオブジェクトにアクセスできる セットできるプロパティの値は自動的にIDEに識別される。intやstringはもちろんPoint等（Point="12,24"みたいに）も可能。これは正確に言うと型変換されている カスタムクラスのインスタンス化はエレメントのリソース内でしか出来ない（この場合 Page.Resources 内）。たとえばコントローラー内で同じ宣言をするとエラーが出る 「CLR内のオブジェクト」はビルドが通ってはじめてアセンブリとして認識されるので、どこまでＩＤＥがオブジェクトを認識しているか状況把握しておく事（未ビルドで書いたばかりのコードはＩＤＥからみて認識されていない！） 「XAML内のリソース」も同様で未ビルドではＩＤＥに存在を認識されていない。注意する事！ 作成したインスタンスは属するエレメントのリソース部によりStaticResourceとして扱われる（上記の例の場合、PageのStaticResourceとして扱われる） インスタンスからプロパティを経由してデータを取り出したい場合はデータバインディングを使用する。以下例 Grid TextBox Text="{Binding Name, Source={StaticResource test}}"/ /Grid List Person のようなコレクションもインスタンス化出来る。C#側は class PesonList List Person {} のような形で宣言しておいてXAML側は以下のようにします Window.Resources src PesonList x Key="ListTest" src Person Name="test1" ID="1"/ src Person Name="test2" ID="2"/ src Person Name="test3" ID="3"/ /src PesonList /Window.Resources この2行は何をしているか？について xmlns="http //schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns x="http //schemas.microsoft.com/winfx/2006/xaml" Ｃ＃におけるusingのクラスライブラリの読み込みみたいなものらしい 詳しくはXAML ルート要素と XAML 名前空間を参照 using System.Linq; using System.Text; こんな感じでXAMLで利用するセットを名前空間で設定している（・・・クラスライブラリの外部サーバーへの配置。クラウド化みたいな考えで良いのかな？） この部分は何をしているか？について xmlns System="clr-namespace System;assembly=mscorlib" x Class="WpfApplication1.MainWindow" ここで読み込まれている mscorlib.dll（DLLファイル）には、.NET Frameworkの基本的なクラス・ライブラリのアセンブリが含まれており これらのサービスを利用できるようにSystemという名前のキーにセットしている。利用したい場合は以下の例のように使う Button System DateTime 2004/3/4 13 6 55 /System DateTime /Button x Class属性には分離コードで実装するクラス名、上記の場合「WpfApplication1」名前空間のMainWindowクラスに分離コードを置く事を指定している （「ビュー・モデルビュー・モデル」で言えば「モデルビュー・モデル」のコード（Ｃ＃のＣＬＲ）を置く場所を指定している） x Name属性にはフィールド名を指定する XAML内のクラスのインスタンスの作成は FrameworkElement.Resources プロパティ によって行う object object.Resources oneOrMoreResourceElements /object.Resources /object object オブジェクト名 oneOrMoreResourceElements ここにリソース作成の為のコードを書く Ｃ＃からは public ResourceDictionary Resources { get; set; } で拾える。以下Ｃ＃のＣＬＲの例。（どのエレメントに属したリソースかが重要でコードの位置によって「this」等が必要な事に注意する） LinearGradientBrush a = (LinearGradientBrush)this.Resources["backgroundBrush1"]; この場合、backgroundBrush1 がXAML側で設定したキー
https://w.atwiki.jp/atachi/pages/40.html
タブアイテムへの画像表示 [#wa1225f9] コントロールテンプレート [#b6535a37] TabItemへの適応 [#de80e20b] グラデーション化とリソース化 [#jf8dcc28] タブアイテムへの画像表示 Window x Class="TabControlTutorial.Window1" xmlns="http //schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns x="http //schemas.microsoft.com/winfx/2006/xaml" Title="WPF Tabs" Height="281" Width="454" Grid TabControl TabItem TabItem.Header StackPanel Orientation="Horizontal" Image Height="18" Source="cheese.jpg" / TextBlock Text="Cheese" Margin="2,0,0,0" VerticalAlignment="Center" / /StackPanel /TabItem.Header /TabItem TabItem TabItem.Header StackPanel Orientation="Horizontal" Image Height="18" Source="pepperoni.jpg" / TextBlock Text="Pepperoni" Margin="2,0,0,0" VerticalAlignment="Center" / /StackPanel /TabItem.Header /TabItem TabItem TabItem.Header StackPanel Orientation="Horizontal" Image Height="18" Source="mushrooms.jpg" / TextBlock Text="Mushrooms" Margin="2,0,0,0" VerticalAlignment="Center" / /StackPanel /TabItem.Header /TabItem /TabControl /Grid /Window コントロールテンプレート TabItemへの適応 タブコントロールに表示されるタブの部分(TabItem)のテンプレートを定義します。 #ref error ：ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (TabItemControlTemplate1.png) Style TargetType="{x Type TabItem}" Setter Property="Template" Setter.Value ControlTemplate TargetType="{x Type TabItem}" Grid !-- タブの枠(ボーダー)の設定 -- Border Name="Border" Background="LightBlue" BorderBrush="#2E7992" BorderThickness="1,2,1,2" CornerRadius="6,6,0,0" ContentPresenter x Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" / /Border /Grid !-- トリガー -- ControlTemplate.Triggers !-- 「TabItem.IsSelected == True」の場合 -- Trigger Property="IsSelected" Value="True" !-- TargetNameは上で定義したBorder要素を指す -- Setter TargetName="Border" Property="Background" Value="LightBlue" / /Trigger !-- 「TabItem.IsSelected == False」の場合 -- Trigger Property="IsSelected" Value="False" Setter TargetName="Border" Property="Background" Value="LightGray" / /Trigger /ControlTemplate.Triggers /ControlTemplate /Setter.Value /Setter /Style グラデーション化とリソース化 このセクションではTabItemの背景をグラデーションに塗りつぶし、複数箇所で使用しても使いやすいようにブラシをリソースとして定義します。 #ref error ：ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (TabItemControlTemplate2.png) 最初にある「SelectableTabItemBackgroundBrush」と「DisabledTabItemBackgroundBrush」は線形グラデーションのブラシです。 LinearGradientBrush x Key="SelectableTabItemBackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1" GradientBrush.GradientStops GradientStop Color="LightBlue" Offset="0.0"/ GradientStop Color="White" Offset="1.0"/ /GradientBrush.GradientStops /LinearGradientBrush LinearGradientBrush x Key="DisabledTabItemBackgroundBrush" StartPoint="0.5,0" EndPoint="0.5,1" GradientBrush.GradientStops GradientStop Color="LightBlue" Offset="0.0"/ GradientStop Color="Gray" Offset="1.0"/ /GradientBrush.GradientStops /LinearGradientBrush Style TargetType="{x Type TabItem}" Setter Property="Template" Setter.Value ControlTemplate TargetType="{x Type TabItem}" Grid !-- タブの枠(ボーダー)の設定 -- Border Name="Border2" BorderBrush="#2E7992" Background="{StaticResource SelectableTabItemBackgroundBrush}" BorderThickness="1,2,1,2" CornerRadius="6,6,0,0" ContentPresenter x Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2" / /Border /Grid !-- トリガー -- ControlTemplate.Triggers Trigger Property="IsSelected" Value="True" Setter TargetName="Border2" Property="Background" Value="{StaticResource SelectableTabItemBackgroundBrush}" / /Trigger Trigger Property="IsSelected" Value="False" Setter TargetName="Border2" Property="Background" Value="{StaticResource DisabledTabItemBackgroundBrush}" / /Trigger /ControlTemplate.Triggers /ControlTemplate /Setter.Value /Setter /Style
https://w.atwiki.jp/mini98/pages/31.html
DataGridにデータを代入するには、ListDataProviderを利用する。ListDataProvider#getList でList T を取得できる。 参考
https://w.atwiki.jp/atachi/pages/31.html
スタイルの使用方法 [#a5912b9b] 特定の要素にスタイルを適応 [#u3f765b2] スタイルを継承 [#f923f2e2] テンプレート [#c1ac1a97] データテンプレート [#v289532d] データテンプレートをクラスに適応させる [#x6c68de8] テンプレート内にリソースを適応させる [#e9d96c52] DataTemplateとバインドソース [#o6d284ae] コントロールテンプレート [#j961ba65] トリガー [#pb4f2efd] WPFのスタイルは、スタイルという名前ですがデザインやカラー設定を行うためだけの機能ではありません。 スタイルを定義するにはStyle要素を使用します。Style要素内ではコンポーネントのプロパティ値の設定やデータのプロパティ値の設定ができます。 データテンプレートでは再利用可能なデータバインディングを持ったスタイルを定義します。 コントロールテンプレートでは既存のコントロールのUIデザインを定義できます。 スタイルの使用方法 スタイルはXAMLのResourcesに記述します。 Style.TargetType属性の指定し、XAMLデザイナがSetter要素のPropertyの値を検証するためにも使用します。 Setter要素の値はValue属性に記述することもできますし、次のようにプロパティ要素として記述することもできます。 Setter Property="PropertyA" Setter.Value プロパティ要素 /Setter.Value /Setter 次のコードはXAML内のすべてのTextBlock要素にスタイルが適応されます。 Window.Resources Style TargetType="TextBlock" Setter Property="HorizontalAlignment" Value="Center" / Setter Property="FontSize" Value="14" / Setter Property="FontFamily" Setter.Value Comic Sans MS /Setter.Value /Setter /Style /Window.Resources Grid TextBlock Text="ようこそ。" / TextBlock Text="今日は12月8日です。" / /Grid スタイルだけを先に定義し、各VisualObjectからスタイルを参照したい場合、Style.TargetStyle属性を使用せずにx Key属性を使ってスタイルの定義だけを行います。 Window.Resources Style x Key="MyStyle" Setter Property="TextBlock.HorizontalAlignment" Value="Center" / Setter Property="TextBlock.FontSize" Value="14" / Setter Property="TextBlock.FontFamily" Value="Comic Sans MS" / /Style /Window.Resources 特定の要素にスタイルを適応 Style要素の定義時にx Key要素でスタイルに名前をつけた場合、スタイルが適応されるには明示的にスタイル名を指定する必要があります。 次の例では2つのTextBlockのうち、1番目のTextBlockだけにスタイルが適応されます。 Window.Resources Style x Key="MyStyle" TargetType="TextBlock" Setter Property="HorizontalAlignment" Value="Center" / Setter Property="FontSize" Value="14" / Setter Property="FontFamily" Value="Comic Sans MS" / /Style /Window.Resources Grid TextBlock Text="ようこそ。" Style="{StaticResource MyStyle}" / TextBlock Text="今日は12月8日です。" / /Grid スタイルを継承 Style.BaseOn属性を使用してスタイルを継承し、そこから設定済みプロパティの再設定やプロパティの追加が行えます。 Window.Resources Style TargetType="TextBlock" Setter Property="FontSize" Value="20"/ /Style Style x Key="MyColorStyle" TargetType="TextBlock" BasedOn="{StaticResource {x Type TextBlock} }" Setter Property="Foreground" Value="#FFC13B3B" / /Style /Window.Resources Grid StackPanel Height="100" HorizontalAlignment="Left" Name="stackPanel1" VerticalAlignment="Top" Width="200" TextBlock Height="23" Name="textBlock2" Text="TextBlock" / TextBlock Height="70" Name="textBlock1" Text="よだー" Style="{StaticResource MyColorStyle}"/ /StackPanel /Grid MyColorStyleは既存のTextBlockのスタイルを継承しています。 テンプレート データテンプレート コントロールテンプレート それぞれUIの描画スタイルを設定する手法で、再利用可能なことからテンプレートと呼ばれている。 データテンプレートとは主にコレクションをアイテムとして表示するコントロール(ListBox、ListView、TreeView、DataGrid、その他)で、そのアイテムを描画するためのUIを定義したものです。 コントロールテンプレートとはUIの描画そのものを再定義するものです。Buttonコントロールは1つのコントロールに見えますが内部ではGridやTextBlockを組み合わせて1つのコントロールとして描画しています。 データテンプレート VisualObjectを持つスタイルをデータテンプレートと呼びます。 データテンプレートではデータを表示する為のオブジェクト要素構造をテンプレート化し、UIデザインとデータの両方の再利用を実現できます。 テンプレート化したオブジェクト要素構造は、バインディングによって動的に表示内容を変更するように設計します。 次のサンプルでは、ListBoxに設定したデータソースの要素を描画する際に、各要素を描画するためのテンプレートを定義しています。 ListBox Width="400" Margin="10" ItemsSource="{Binding Source={StaticResource myTodoList} }" ListBox.ItemTemplate DataTemplate StackPanel TextBlock Text="{Binding Path=TaskName}" / TextBlock Text="{Binding Path=Description}"/ TextBlock Text="{Binding Path=Priority}"/ /StackPanel /DataTemplate /ListBox.ItemTemplate /ListBox データテンプレートはリソースとして定義できます。次のように予めリソースとして定義しておきx Key属性で指定した名前を定義しておけば、データテンプレートの再利用が可能です。 ListBox.ItemTemplateへはStaticResourceを使用してリソースを呼び出します。 Window xmlns local="clr-namespace my" Window.Resources ObjectDataProvider x Key="myTodoList" ObjectType="{x Type local Tasks}"/ DataTemplate x Key="myTemplate" StackPanel TextBlock Text="{Binding Path=TaskName}" / TextBlock Text="{Binding Path=Description}"/ TextBlock Text="{Binding Path=Priority}"/ /StackPanel /DataTemplate /Window.Resources !-- リソースに定義した「myTemplate」をデータテンプレートに使用する -- ListBox Width="400" Margin="10" ItemsSource="{Binding Source={StaticResource myTodoList} }" ItemTemplate="{StaticResource myTemplate" / /Window namespace my { public class Tasks ObservableCollection Task { public Tasks() { this.Add(new Task{TaskName="テレビを見る", Description="水戸黄門", Priority=3}); this.Add(new Task{TaskName="電話", Description="佐藤さんに電話", Priority=10}); this.Add(new Task{TaskName="勉強", Description="C#の勉強に明け暮れる", Priority=5}); } } public class Task { public string TaskName { get; set; } puiblic string Description { get; set; } public int Priority { get; set; } } } データテンプレートをクラスに適応させる DataTemplate.DateType を使用すると特定のオブジェクトすべてにデータテンプレートを適用することができます。 この仕組みは 非常に重要 で、任意のC#コードで記述されたクラスに対してXAMLによるUIのデザインを設定できます。 次のサンプルではListBox.ItemTemplateへデータテンプレートの設定を行っていません。しかし、正常に動作します。 これはListBoxがTaskオブジェクトを表示する際に、DataTemplateによって設定されたデータテンプレートが使用されている為です。 Window xmlns local="clr-namespace my" Window.Resources ObjectDataProvider x Key="myTodoList" ObjectType="{x Type local Tasks}"/ DataTemplate DataType="{x Type local Task}" StackPanel TextBlock Text="{Binding Path=TaskName}" / TextBlock Text="{Binding Path=Description}"/ TextBlock Text="{Binding Path=Priority}"/ /StackPanel /DataTemplate /Window.Resources ListBox Width="400" Margin="10" ItemsSource="{Binding Source={StaticResource myTodoList} }" / /Window テンプレート内にリソースを適応させる ComboBoxなどアイテムソースを受け取るコントロールでは、表示させるアイテムをItemsSourceプロパティなどに設定します。 通常はItemsSourceプロパティにはバインディングやリソースを行って項目を指定します。 しかし、データテンプレート内でバインディングを指定する場合には注意が必要です。 バインディングを使用する場合、バインドソースはデータテンプレートに与えられたアイテムになります。(ItemsSourceに設定されたコレクションの各要素がバインドソースとなる) データテンプレート内ですべてのComboBoxに同じ選択肢を表示したい場合には StaticResourceマークアップ拡張 を使用します。 Window.Resources src MyList x Key="myList" / col ArrayList x Key="MyDataSource" sys DateTime 1/2/2003 5 00 00 /sys DateTime sys DateTime 4/5/2006 13 13 13 /sys DateTime sys DateTime 7/8/2009 23 59 59 /sys DateTime /col ArrayList /Window.Resources Grid ListView ItemsSource="{StaticResource MyDataSource}" ListView.View GridView GridViewColumn Header="月" DisplayMemberBinding="{Binding Month}" / GridViewColumn Header="日" DisplayMemberBinding="{Binding Day}" / GridViewColumn Header="日付" DisplayMemberBinding="{Binding DayOfWeek}"/ GridViewColumn GridViewColumn.Header TextBlock Text="何か選択" / /GridViewColumn.Header GridViewColumn.CellTemplate DataTemplate ComboBox Name="comboBox1" Width="100" ItemsSource="{StaticResource ResourceKey=myList}" / /DataTemplate /GridViewColumn.CellTemplate /GridView /ListView.View /ListView /Grid class MyList List string { public MyList() { this.Add("日本"); this.Add("韓国"); this.Add("北朝鮮"); this.Add("中国"); this.Add("台湾"); this.Add("フィリピン"); this.Add("タイ"); this.Add("ベトナム"); } } DataTemplateとバインドソース ContentPresenter Name="stp1" Content="WPFは複雑" Grid.Row="1" Grid.Column="1" Height="22" Margin="9,0,0,0" ContentPresenter.ContentTemplate DataTemplate TextBlock Text="{Binding}" / /DataTemplate /ContentPresenter.ContentTemplate /ContentPresenter 親要素のContentが参照される この例では、TextBlockは「WPFは複雑」と表示されます。 理由は純粋に、ContentプロパティがInhert属性のプロパティなので、ContentPresenterがテンプレートを使ってビジュアルツリーを構築する際に、TextBlock.ContentもContentPresenter.Contentを参照します。 コントロールテンプレート コントロールテンプレートではコントロールの構造と外観を定義します。 スタイルとしてコントロールテンプレートを適応することで、コントロールの構造や外観を再定義することができます。 コントロールテンプレートはControlクラスを継承した多くのコントロールに対して適応できます。 参考 MSDN コントロールテンプレートを適応するというのは、そのコントロールのビジュアルツリーを書き換えることを意味します。 ただし、コントロールのビジュアルツリーの一部だけを書き換えることはできません。 カスタムコントロールテンプレート例 タブ トリガー プロパティの値を判断し、動的に任意のプロパティ値を設定することができる。 if構文と違い、判断するデータソースや設定可能なデータソースは限られている。 データテンプレートで使用する場合は、そのデータがデータソースとなる。(ItemsSource属性を持つComboBoxやListBoxの場合、各要素をデータテンプレートを使って表示する際の各要素がデータソースとなる) よって、プログラマが自由なデータソースを指定し、その値を動的に評価して処理を分岐するといったif構文のような処理は行えない。