[[Open棟梁Project>http://opentouryo.osscons.jp/]] - [[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]] -[[戻る>XAML]] -[[WPFのアーキテクチャ]] --[[XAML]] ---[[XAMLのサンプル]] * 目次 [#i1942657] #contents *概要 [#u34be5f5] XAMLは、XMLをベースとしており、XAMLの各要素からCLRオブジェクトをインスタンス化し、「要素ツリー」を構築できる。 ここでは、WPFのXAMLの書き方を通して、 -XAMLの基礎 -XAMLによるUI設計方法 -XAMLによるUI開発方法 を説明する。 *名前空間 [#t16cd178] XAMLにおける各種の名前空間の宣言は、xmlns属性を使用したXML名前空間にて行う。~ ここでは、以下の既定の名前空間の宣言を例にとって説明する。 -名前空間の宣言 <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" -XML名前空間の簡単な説明~ http://www.kanzaki.com/docs/sw/names.html **WPF名前空間 [#hda52e9d] 2行目のXML名前空間の宣言(xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation")では、WPFフレームワーク(PresentationFramework.dll)のアセンブリ内に同梱されるURIにマップされたCLR名前空間(System.Windows.Controls、System.Windows.Dataなど)を、既定のXML名前空間(プレフィックスなし)として割り当てている。そのため、既定でXAMLからWPFフレームワークのCLRオブジェクトを利用できる。 **XAML名前空間 [#s157df62] 3行目のXML名前空間の宣言(xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml")では、URIにマップされた共通的なXAMLの言語機能がXML名前空間(x)として割り当てられている。これにより、「x:」というプレフィックスを使用することで、「[[言語機能>#n6cf5f58]]」で説明する、XAMLの言語機能を使用できるようになる。 **CLR名前空間 [#g26a2ab6] CLR名前空間について以下を例にとって説明する。 ***(1) [#ne84959f] -CLR名前空間の宣言 <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:igDP="http://infragistics.com/DataPresenter" <--- 名前空間の宣言(追加 Title="Window1" Height="300" Width="300"> <Grid> <igDP:XamDataGrid Name="xamDataGrid1"/> <--- 名前空間の使用例 </Grid> </Window> Infragistics社製のNetAdvantageなど、XmlnsDefinitionアセンブリ属性でURIとCLR名前空間のマップが指定されたサードパーティ製のUIコンポーネントをD&DでVSデザイナから追加した場合、上記の例のように自動的にXML名前空間の宣言が追加される。 -MSDN > .NET Frameworkクラス ライブラリ > System.Windows.Markup.XmlAttributeProperties.XmlnsDefinitionプロパティ~ http://msdn.microsoft.com/ja-jp/library/system.windows.markup.xmlattributeproperties.xmlnsdefinition.aspx なお、XML名前空間には一意の名前を自由に付与でき(上記の例ではigDP)、このプレフィックスを使用することで、XAMLからUIコンポーネントのCLRオブジェクトを利用できる。 ***(2) [#z789b34c] この他に、URIとしてCLR名前空間とアセンブリを直接指定する方法もある。 -CLR名前空間の宣言 xmlns:sys="clr-namespace:(CLR名前空間);assembly=(アセンブリ名)" --例1:サードパーティ製品 <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:igDP="clr-namespace:Infragistics.Windows.DataPresenter;assembly=Infragistics3・・・" <--- 名前空間の宣言 Title="Window1" Height="300" Width="300"> <Grid> <igDP:XamDataGrid Name="xamDataGrid1"/> <--- 名前空間の使用例 --例2:.NET Framework <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:sys="clr-namespace:System;assembly=mscorlib" <--- 名前空間の宣言 Title="Window1" Height="300" Width="300"> <Window.Resources> <x:Array x:Key="List" Type="{x:Type sys:String}"> <--- 名前空間の使用例 --例3:自作の同一プロジェクトのクラス <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:uc="clr-namespace:WpfApplication1" <--- 名前空間の宣言 Title="Window1" Height="300" Width="300"> <StackPanel Orientation="Vertical"> <uc:UserControl1 x:Name="userControl1"/> <--- 名前空間の使用例 -この方法では、「clr-namespace」、「assembly」などの定義済みトークンを使用する。 --当該プロジェクト中のCLR名前空間を指定する場合は、「assembly」トークンは省略できる。 --XML名前空間には一意の名前を自由に付与でき、このプレフィックスを使用することで、XAMLからUIコンポーネントのCLRオブジェクトを利用できる。 -製品並みのカスタムのUIコントロールを開発・使用するなどの目的を除いて、CLRクラスを開発しXAMLから使用する場合、 --一般的には「clr-namespace、assembly」の定義済みトークンを使用する。 --ただし、この方法は、1つのCLR名前空間に対して、1つのXML名前空間しか割り当てられない --(XmlnsDefinitionアセンブリ属性を使用すると、1つのXML名前空間に複数のCLR名前空間を割り当てられる)。 ***参考 [#q56ac959] -MSDN > WPFの基礎 > WPFのXAML > XAML名前空間およびWPF XAMLの名前空間の割り当て~ http://msdn.microsoft.com/ja-jp/library/ms747086.aspx *言語機能 [#n6cf5f58] XAMLの言語機能である -「[[ディレクティブ>#cd4daa01]]」 -「[[マークアップ拡張>#hc49ac25]]」 について説明する。 -MSDN > .NET Framework XAMLサービスの概念説明のドキュメント > XAML名前空間 (x:) 言語機能~ http://msdn.microsoft.com/ja-jp/library/ms753327.aspx **ディレクティブ [#cd4daa01] XAMLの言語機能が提供する各種ディレクティブについて説明する。 |項番|ディレクティブ|説明|h |~|~|例|h |1|x:Class|XAML上から分離クラス(コードビハインド)のクラス名を定義する。| |~|~|<Window x:Class="WpfApplication1.Window1"| |2|x:Subclass|パーシャル クラスをサポートしない言語で使用する。通常は利用しない。| |~|~|-| |3|x: ClassModifier|クラスのアクセスレベルを変更する。通常は利用しない。| |~|~|-| |4|x:Code|XAML上にインラインコードを実装する場合に使用する。通常は利用しない。| |~|~|<Grid>&br; <x:Code>&br; <![CDATA[&br; void button1_Click(object sender, RoutedEventArgs e) {&br; button1.Content = "Hello World";&br; }&br; ]]>&br; </x:Code>&br; <Button Name="button1" Click="button1_Click">Button</Button>&br;</Grid>| |5|x:FieldModifier|プロパティのアクセスレベルを変更する。通常は利用しない。| |~|~|-| |6|x:Key|XAMLで定義された各種「リソース」を識別する。下記は、x:Keyを使用して「スタイル」の「リソース」をボタンに「データ バインディング」する例。| |~|~|<Window.Resources>&br; <Style x:Key="buttonStyle" TargetType="{x:Type Button}">&br; <Setter Property="Background" Value="LightYellow" />&br; </Style>&br;</Window.Resources>&br;<Grid>&br; <Button Style="{StaticResource buttonStyle}">Hello Style</Button>&br;</Grid>| |7|x:Name|XAMLで生成したCLRオブジェクトに名前を付与する。Name属性と差異は無い。| |~|~|<Button x:Name="button1">&br; Click Here&br;</Button>| |8|x:Shared|静的なリソースを、取得の度に生成する場合に使用する。通常は利用しない。&br;※ true : 静的(全てのインスタンスは同じ)&br; false : 動的(取得の度に生成する)&br; 既定値 : true| |~|~|-| |9|x:TypeArguments|ジェネリックの型引数をコンストラクタに渡す。&br;(.NET Framework 4.0のXAML 2009からのサポート)| |~|~|<!-- XAML 2009 -->&br;<ObservableCollection x:TypeArguments="Employee">&br; <l:Employee FirstName="John" Name="Doe" />&br; <l:Employee FirstName="Tim" Name="Smith" />&br;</ObservableCollection>| |10|x:Uid|ローカライゼーションのプロセスとツールによって使用される一意識別子を指定する 。| |~|~|-| |11|xml:lang|カルチャ情報を宣言する。| |~|~|<Window x:Class="WpfApplication1.Window1"&br; xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"&br; xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"&br; xml:lang="ja-JP"| -MSDN > Windows Presentation Foundation > グローバライズとローカライズ > WPFのグローバリゼーション~ http://msdn.microsoft.com/ja-jp/library/ms745650.aspx **マークアップ拡張 [#hc49ac25] XAMLの言語機能が提供する各種「マークアップ拡張」について説明する。~ 通常、「マークアップ拡張」は、「{」と「}」の2つの中括弧を使用することでXAMLパーサに対し、拡張されたプロパティ指定方法を指示する。 -MSDN > WPFの基礎 > WPFのXAML > マークアップ拡張機能とWPF XAML~ http://msdn.microsoft.com/ja-jp/library/ms747254.aspx ***XAMLで定義されたマークアップ拡張 [#x7d4e60c] 以下、XAMLの機能である「XAMLで定義されたマークアップ拡張」を一覧する。~ これらの種類は、中括弧+「x:」プレフィックスの直後の文字列トークンによって識別される。 |項番|文字列トークン|説明|h |~|~|例|h |1|x:Static|静的プロパティ(定数、静的プロパティ、フィールド、列挙値)を参照する。&br;構文:<object property="{x:Static Member=prefix:typeName.staticMemberName}" .../>| |~|~|<Button &br; Foreground="{x:Static Member=SystemColors.InfoTextBrush}"&br; Background="{x:Static Member=SystemColors.InfoBrush}">&br; Click Here&br;</Button>| |2|x:Null|CLRオブジェクトのプロパティにnull値を設定する(既定値をnullクリアする場合など)。| |~|~|<Button x:Name="button1" Background="{x:Null}" Click="button1_Click">&br; Click Here&br;</Button>| |3|x:Type|CLRクラスの型情報を指定する。| |~|~|詳しくは、下記、項番4の例を参照のこと。| |4|x:Array|IEnumerableを持つArrayオブジェクト(配列)を生成する。| |~|~|<Window.Resources>&br; <x:Array x:Key="List"&br; Type="{x:Type sys:String}">&br; <sys:String>A</sys:String>&br; <sys:String>B</sys:String>&br; <sys:String>C</sys:String>&br; </x:Array>&br;</Window.Resources>&br;<StackPanel>&br; <ListBox ItemsSource="{Binding Source={StaticResource List}}"/>&br;</StackPanel>&br;&br;※ 先頭で、.NET FrameworkのSystem名前空間のインポートが必要&br; xmlns:sys="clr-namespace:System;assembly=mscorlib"&br;&br;※ StaticResourceについては次項で説明する。| ※ x:Arrayは、例外的に中括弧と共に使用しない。 ***WPF固有のマークアップ拡張 [#f8bba188] 以下、WPF の機能である「WPF固有のマークアップ拡張」を一覧する。~ こちらは、プロパティ値に「データ バインディング」や、「リソース」への参照を指定できる。 *プロパティの設定方法 [#s1a3f3e9] **プロパティ属性構文 [#q550d6b3] **プロパティ要素構文 [#fa957fd3] **型コンバータ [#ea68ba77] *コンテンツ構文 [#v6b58154] **Contentプロパティ [#p8c8ba55] **Itemsプロパティ [#gb58344b] *リソース [#ea30adb6] **リソースの定義 [#l529fcbc] **リソースの定義と参照 [#e615c6b1] *データ バインディング [#e915d7ec] **データ バインディングの基礎 [#bbd76ce0] **リソースとのデータ バインディング [#ac5a7f33] *レイアウト [#s77734ce] **レイアウトのプロパティ [#j27354fe] **パネルの種類と使い方 [#v124ba4f] *スタイルとテンプレート [#q002601b] **スタイル [#fa989262] **テンプレート [#bb58b780] *トリガ [#bbe9b16b] **プロパティ トリガ [#ce79c6df] **データ トリガ [#i5478c0f] **イベント トリガ [#mb5243c8] *その他 [#a8b33d4f] **ビルティング ブロック クラス [#y720ef3a] ***Applicationオブジェクト [#bbdb37e4] ***Window画面 [#v51c2bf3] ***ナビゲーション フレームワーク [#f6820b24] ***Win32ダイアログ [#i5cf4c80] **入力支援 [#h12b43f1] ***メニュー・タスクバーとコマンド [#c6479c52] ***ツールチップ [#i36d28e8] ***IME制御 [#n5902de4] **デザイナ向け機能 [#y6378ada] ***様々なシェイプ [#s897a95f] ***グラデーション [#rc7056eb] ***トランスフォーム処理 [#h9e7aefe] ***アニメーション [#d0b80558] **MVVMデザイン パターン [#u05bda3c] **バリデーション [#w1cd4016] ***単項目のバリデーション [#k0141195] ***一覧のバリデーション [#x358d4f2] ***フォーカス制御 [#we3801e7] ***注意事項 [#ae4315b1]