- 追加された行はこの色です。
- 削除された行はこの色です。
[[Open棟梁Project>http://opentouryo.osscons.jp/]] - [[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]
-[[戻る>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:」プレフィックスの直後の文字列トークンによって識別される。
-XAMLに実装されたマークアップ拡張
|項番|文字列トークン|説明|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固有のマークアップ拡張」を一覧する。~
こちらは、プロパティ値に「データ バインディング」や、「リソース」への参照を指定できる。
-XAMLに実装されたマークアップ拡張
|項番|文字列トークン|説明|h
|~|~|構文 ※ 「[[プロパティ属性構文>#q550d6b3]]」と「[[プロパティ要素構文>#fa957fd3]]」については、後述する。|h
|1|{Binding&br;・・・|Bindingオブジェクトに「バインディング ターゲット」のプロパティを設定することで、「データ バインディング」を実装する。&br;MSDN > WPFの基礎 > WPFのXAML > WPF XAML拡張機能 > バインディングのマークアップ拡張機能&br;http://msdn.microsoft.com/ja-jp/library/ms750413.aspx|
|~|~|具体例は、「[[データ バインディングの基礎>#bbd76ce0]]」を参照のこと。|
|2|{StaticResource&br;・・・|既に定義されたリソースに対する参照を検索し、任意のXAMLプロパティ属性の値を設定する。|
|~|~|具体例は、「[[リソースとのデータ バインディング>#ac5a7f33]]」を参照のこと。&br;&br;プロパティ属性構文:&br;<object property="{StaticResource key}" .../>&br;&br;なお、「データ バインディング」で使用する場合は、次のようになる。&br;<object property="{Binding Source={StaticResource key} ...}" .../>&br;&br;プロパティ要素構文:&br;<object>&br; <object.property>&br; <StaticResource ResourceKey="key" .../>&br; </object.property>&br;</object>|
|3|{DynamicResource&br;・・・|リソースが変化したときに、任意のXAMLプロパティ属性の値を設定する。&br;keyには、x:Key属性によって指定された既存の「リソース」に対応するキーを指定する。|
|~|~|具体例は、「[[リソースとのデータ バインディング>#ac5a7f33]]」を参照のこと。&br;&br;プロパティ属性構文:&br;<object property="{DynamicResource key}" .../>&br;&br;なお、「データ バインディング」で使用する場合は、次のようになる。&br;<object property="{Binding Source={DynamicResource key} ...} " .../>&br;&br;プロパティ要素構文:&br;<object>&br; <object.property>&br; <DynamicResource ResourceKey="key" .../>&br; </object.property>&br;</object>|
|4|{RelativeSource&br;・・・|Binding.RelativeSourceを指定する。詳しくは、下記のURLを参照のこと。&br;また、次ページで例を挙げて説明する。&br;&br;MSDN > WPFの基礎 > WPFのXAML > WPF XAML拡張機能 > RelativeSourceのマークアップ拡張機能&br;http://msdn.microsoft.com/ja-jp/library/ms743599.aspx|
|~|~|具体例は、次ページを参照のこと。&br;&br;プロパティ属性構文:&br;<Binding RelativeSource="{RelativeSource modeEnumValue}" .../>&br;&br;なお、「データ バインディング」で使用する場合は、次のようになる。&br;<object property="{Binding RelativeSource={RelativeSource modeEnumValue} ...}" .../>&br;&br;プロパティ要素構文:&br;<Binding>&br; <Binding.RelativeSource>&br; <RelativeSource Mode="modeEnumValue"/>&br; </Binding.RelativeSource>&br;</Binding>&br; OR &br;<Binding>&br; <Binding.RelativeSource>&br; <Relative&br; Mode="FindAncestor"&br; AncestorType="{x:Type typeName}"&br; AncestorLevel="intLevel"/>&br; </Binding.RelativeSource>&br;</Binding>|
|5|{TemplateBinding&br;・・・|親コントロールに適用したプロパティ値を「テンプレート」に反映させる。&br;MSDN > WPFの基礎 > WPFのXAML > WPF XAML拡張機能 > TemplateBindingのマークアップ拡張機能&br;http://msdn.microsoft.com/ja-jp/library/ms742882.aspx|
|~|~|具体例は、「[[テンプレート>#bb58b780]]」を参照のこと。&br;&br;プロパティ属性構文:&br;<object property="{TemplateBinding TargetProperty }" .../>|
|6|{ThemeDictionary&br;・・・|カスタム コントロールの作成者やサードパーティ製のUIコンポーネントの、&br;コントロールの「スタイル」をアプリケーションの「リソース」から読み込む。&br;&br;MSDN > WPFの基礎 > WPFのXAML > WPF XAML拡張機能 > ThemeDictionaryのマークアップ拡張機能&br;http://msdn.microsoft.com/ja-jp/library/ms752067.aspx|
|~|~|-|
※ keyには、x:Keyディレクティブによって指定された既存のリソースに対応するキーを指定する。
***RelativeSourceの例 [#z2d77bd5]
以下、RelativeSourceの「マークアップ拡張」について、XAMLサンプルを用いて説明する。~
なお、Button.Template以下の要素(→ 「[[テンプレート>#bb58b780]]」)については、「[[テンプレート>#bb58b780]]」を参照のこと。
-RelativeSourceの例
<StackPanel>
<TextBlock Text="{Binding RelativeSource
={RelativeSource Self}, Path=FontFamily}" />・・・(1)
<Border Background="Black" Height="5"/>
<TextBlock Text="{Binding RelativeSource
={RelativeSource AncestorType={x:Type StackPanel}},Path=Orientation}" />・・・(2)
<Border Background="Black" Height="5"/>
<Button Content="Hello world">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<ContentPresenter Content="{Binding RelativeSource
={RelativeSource TemplatedParent}, Path=Content}" />・・・(3)
</ControlTemplate>
</Button.Template>
</Button>
</StackPanel>
-レンダリング結果
#ref(RenderingResult.png,left,nowrap,レンダリング結果)
-(1)では、TextBlock要素自身のFontFamilyプロパティを取得して、自身のTextプロパティに設定している。
-(2)では、親要素(AncestorType 属性に指定されているStackPanel型)を検索し、Orientationプロパティを取得して、自身のTextプロパティに設定している。
-(3)では、TemplatedParent 属性により、テンプレートを適用しているControlTemplate(ここでは、ControlTemplateであるButton要素)の~
Contentプロパティを取得し、ContentPresenterクラスのContentプロパティに設定している。
-MSDN > WPFの基礎 > WPFのXAML > WPF XAML拡張機能~
http://msdn.microsoft.com/ja-jp/library/ms747180.aspx
*プロパティの設定方法 [#s1a3f3e9]
プロパティの設定方法として、
-プロパティ属性構文:~
要素の属性にテキストを使用して設定する。
-プロパティ要素構文:~
要素のinnerText・innerXMLを使用してプロパティを設定する。
の2つの構文について説明する。
以下、TextBox要素に対して、同等の属性を設定する~
「[[プロパティ属性構文>#q550d6b3]]」と「[[プロパティ要素構文>#fa957fd3]]」の例を示す。
**プロパティ属性構文 [#q550d6b3]
要素の属性にテキストを使用してプロパティを設定する方法
-プロパティ属性構文の例
<TextBox
Width = "100"
FontSize = "30"
Text = "text1"
Background = "White"
Foreground = "Blue" />
**プロパティ要素構文 [#fa957fd3]
要素のinnerText・innerXMLを使用してプロパティを設定する方法
-プロパティ要素構文の例
<TextBox>
<TextBox.Width>100</TextBox.Width>
<TextBox.FontSize>30</TextBox.FontSize>
<TextBox.Background>
<SolidColorBrush Color="White"/>
</TextBox.Background>
<TextBox.Foreground>
<SolidColorBrush Color="Blue"/>
</TextBox.Foreground>
<TextBox.Text>text1</TextBox.Text>
</TextBox>
なお、子要素のコレクションを設定する「[[プロパティ要素構文>#fa957fd3]]」である
-Panel.Childrenプロパティ
-ItemsControl.Itemsプロパティ
などは、暗黙的に使用されるため明記が不要のものもある。
**型コンバータ [#ea68ba77]
XAMLパーサは、XAMLの「[[プロパティ属性構文>#q550d6b3]]」として指定された各属性テキストを、~
プリミティブ型に変換できるリテラル文字列として解釈するか、「型コンバータ」を使用してオブジェクトに変換する。
なお、「型コンバータ」(と、そのベース クラスであるTypeConverterクラス)は、~
.NETのコンポーネントとコントロールのデザイン時・実行時の動作を実装する一般的なクラスであり、WPF独自のクラスではない。~
しかし、XAMLの「[[プロパティ属性構文>#q550d6b3]]」からのCLRプロパティ設定を多用するWPF / Silverlight開発では、その存在を認識しておいたほうが良い。
XAMLパーサは通常、プロパティの型(CLRクラス)にTypeConverterAttribute属性 が付与されているかを調べる。~
付与されている場合は、この属性値に基づいた「型コンバータ」を使って、TypeConverter.ConvertFromメソッド により文字列をプロパティ値に変換する。
以下は、ユーザ コントロールに、MyPointというカスタムの型を取るCLRプロパティを実装しXAMLに公開、~
XAMLの「[[プロパティ属性構文>#q550d6b3]]」として指定された各属性テキストを、カスタムの型に変換する「型コンバータ」を実装した例である。
***カスタム型 [#t4801c54]
MyPointというカスタム型(型コンバータを実装)
/// <summary>
/// カスタム型(型コンバータを実装)
/// </summary>
[TypeConverter(typeof(MyPointConverter))]
public class MyPoint {
public MyPoint(int x, int y) {
this._x = x;
this._y = y;
}
private int _x;
public int X {
set { this._x =value; }
get { return this._x; }
}
private int _y;
public int Y {
set { this._y = value; }
get { return this._y; }
}
}
***型コンバータ [#qcb8e5cf]
/// <summary>カスタム型の型コンバータ</summary>
public class MyPointConverter : TypeConverter {
/// <summary>CanConvertFrom(変換可能かチェックする)</summary>
public override bool CanConvertFrom(
ITypeDescriptorContext context, Type sourceType) {
if (sourceType == typeof(string)) {
return true;
}
return base.CanConvertFrom(context, sourceType);
}
/// <summary>指定された文字列をカスタム型(MyPoint)に変換する</summary>
public override object ConvertFrom(
ITypeDescriptorContext context,
CultureInfo culture, object value) {
if (value is string) {
string[] v = ((string)value).Split(new char[] { ',' });
return new MyPoint(int.Parse(v[0]), int.Parse(v[1]));
}
return base.ConvertFrom(context, culture, value);
}
/// <summary>指定されたカスタム型(MyPoint)を文字列に変換する</summary>
public override object ConvertTo(ITypeDescriptorContext context,
CultureInfo culture, object value, Type destinationType) {
if (destinationType == typeof(string)) {
return ((MyPoint)value).X + "," + ((MyPoint)value).Y;
}
return base.ConvertTo(context, culture, value, destinationType);
}
}
***ユーザ コントロール [#mfa54c4b]
MyPointというカスタム型のCLRプロパティを実装
/// <summary>
/// UserControl1.xaml の相互作用ロジック
/// </summary>
public partial class UserControl1
: UserControl {
// CLRプロパティの定義(XAML属性に公開可能)
private MyPoint _myLocation;
public MyPoint MyLocation {
set { this._myLocation = value; }
get { return this._myLocation; }
}
・・・
***型コンバータの使用例 [#t865d3ca]
上記のユーザ コントロールのカスタムの型を取るCLRプロパティを、以下のようにXAMLの「[[プロパティ属性構文>#q550d6b3]]」として指定された各属性テキストから初期化できる。
<uc:UserControl1 x:Name="userControl1" MyLocation="10,20"/>
ただし、(当然ながら、)文字列からの変換をサポートしているだけで、すべてのプロパティ値をサポートすることはできない。~
文字列で表現できないプロパティ値は、「[[プロパティ属性構文>#q550d6b3]]」ではなく「[[プロパティ要素構文>#fa957fd3]]」として記述する方法を取る。
-MSDN > WPFの基礎 > WPFのXAML > TypeConverters及びXAML~
http://msdn.microsoft.com/ja-jp/library/aa970913.aspx
*コンテンツ構文 [#v6b58154]
「コンテンツ構文」とは、Contentプロパティ(またはItemsコレクション プロパティ)に要素を設定する構文である。~
ContentPropertyAttributeを付けることで、通常、属性に指定されるContentプロパティを、要素のinnerText・innerXMLとして記述できるようになる。
-MSDN > .NET Frameworkクラス ライブラリ > System.Windows.Markup.ContentPropertyAttributeクラス~
http://msdn.microsoft.com/ja-jp/library/system.windows.markup.contentpropertyattribute.aspx
--[ContentPropertyAttribute("Content")]→ Contentプロパティ
--[ContentPropertyAttribute("Items")]→ Itemsコレクション プロパティ
-コンテンツ構文
--プロパティ属性構文
<Button Content="Click Here" />
--プロパティ要素構文
<Button>Click Here</Button>
なお、WindowsフォームやWebフォーム(HTML)などで、~
UIコントロールの表示のカスタマイズをするには、~
UIコントロールの「スタイル」属性の指定による方法のみサポートされていた。
これに対し、WPFのUIコントロールは「スタイル」属性の指定による方法だけでなく、~
Contentプロパティ(またはItemsコレクション プロパティ)に任意の型の子要素を設定することができるため、~
コントロールの「外観」を自由に変更でき、柔軟性が非常に高くなっている。
-補足:Windowsフォームの外観の変更
--Windowsフォームの「外観」を変更するには、コントロールを自前で描画する「オーナー描画」と呼ばれる方法が用意されていた。~
しかしながら、「オーナー描画」はグラフィックス メソッドなどを使用して、すべての描画を独自に行わなければならないため、コントロールに対する深い知識と多量のコードが必要であった。
--関連資料
---[[.NETコントロールのカスタマイズ方法]]
**Contentプロパティ [#p8c8ba55]
WPFのContentControlは、Contentプロパティに任意の型の子要素を設定することができるため、コントロールの「外観」を自由に変更できる。
***文字列のコンテンツ要素を格納 [#c30d2d82]
#ref(ContentString.png,left,nowrap,レンダリング結果)
ContentControlのButtonコントロールを例にしてContentプロパティへ要素を設定する例を示す。
-プロパティ属性構文:
<Button Width="200" Height="200" Content="ボタン"/>
-プロパティ要素構文:
<Button Width="200" Height="200">ボタン</Button>
***イメージのコンテンツ要素を格納 [#s73b20d0]
#ref(ContentImage.png,left,nowrap,レンダリング結果)
Contentプロパティには、Imageオブジェクトなどの任意の型の要素も設定できる。
<Button Width="200" Height="200">
<Button.Content>
<Image Source=".\Blue hills.jpg"/>
</Button.Content>
</Button>
***パネルに纏めた複数のコンテンツ要素を格納 [#a31e6bf2]
#ref(ContentStringAndImage.png,left,nowrap,レンダリング結果)
-2つ以上の要素を設定したい場合は、パネル要素を使用する。
<Button Width="200" Height="200">
<Button.Content>
<StackPanel Orientation="Vertical">
<Image Source=".\Blue hills.jpg" Margin="5" />
<TextBlock Text="ボタン" HorizontalAlignment="Center" Margin="5"/>
</StackPanel>
</Button.Content>
</Button>
-なお、<Object.Content>タグは省略することもできる。
<Button Width="200" Height="200">
<StackPanel Orientation="Vertical">
<Image Source=".\Blue hills.jpg" Margin="5" />
<TextBlock Text="ボタン" HorizontalAlignment="Center" Margin="5"/>
</StackPanel>
</Button>
**Itemsプロパティ [#gb58344b]
WPFのItemsControlは、Itemsコレクション プロパティに任意の型の子要素を設定することができるため、コントロールの「外観」を自由に変更できる。
***複数のパネルに纏めた複数のコンテンツ要素を格納 [#u9bc4c88]
ItemsControlのItemsコレクション プロパティへは、複数のコンテンツを追加できる。~
以下、ListBoxコントロールを例にしてItemsコレクション プロパティへ子要素の設定する例を示す。
#ref(ItemsControl.png,left,nowrap,レンダリング結果)
-複数のパネルに纏めた複数のコンテンツ要素を格納
<Grid>
<ListBox>
<Border BorderBrush ="Black" BorderThickness ="1" Margin="5">
<StackPanel Orientation="Horizontal" Height="120" Width="250" Margin="5">
<Image Source=".\Blue hills.jpg" Height="100"/>
<TextBlock Text="Blue hills" VerticalAlignment="Center"/>
</StackPanel>
</Border>
<Border BorderBrush ="Black" BorderThickness ="1" Margin="5">
<StackPanel Orientation="Horizontal" Height="120" Width="250" Margin="5">
<Image Source=".\Sunset.jpg" Height="100"/>
<TextBlock Text="Sunset" VerticalAlignment="Center"/>
</StackPanel>
</Border>
<Border BorderBrush ="Black" BorderThickness ="1" Margin="5">
<StackPanel Orientation="Horizontal" Height="120" Width="250" Margin="5">
<Image Source=".\Water lilies.jpg" Height="100"/>
<TextBlock Text="Water lilies" VerticalAlignment="Center"/>
</StackPanel>
</Border>
<Border BorderBrush ="Black" BorderThickness ="1" Margin="5">
<StackPanel Orientation="Horizontal" Height="120" Width="250" Margin="5">
<Image Source=".\Winter.jpg" Height="100"/>
<TextBlock Text="Winter" VerticalAlignment="Center"/>
</StackPanel>
</Border>
</ListBox>
</Grid>
-Itemsコレクション プロパティに子要素を設定する場合は、~
innerText・innerXMLを使用する「[[プロパティ要素構文>#fa957fd3]]」を使用する。
-また、この際に<Object.Items>タグは省略することもできる。
-ちなみに、上記を「データ バインディング」で実装することもできる。~
これについては、「[[データ バインディングの基礎>#bbd76ce0]]」を参照のこと。
*リソース [#ea30adb6]
ここでは、
-「リソース」の定義方法と、
-前述の各「マークアップ拡張」を使用し、~
プロパティ値に「リソース」への参照を指定する方法
について説明する。
※「リソース」の「データ バインディング」については、~
「[[リソースとのデータ バインディング>#ac5a7f33]]」を参照のこと。
-参考
--MSDN > WPFの基礎 > リソース~
http://msdn.microsoft.com/ja-jp/library/ms742538.aspx
**リソースの定義 [#l529fcbc]
「リソース」とは、ResourceDictionary 型のオブジェクトであり、
-ApplicationオブジェクトのResources プロパティ
-各UI要素(FrameworkElement or FrameworkContentElement)のResources プロパティ
に「プロパティ要素構文」を使用して定義できる。
-MSDN > .NET Frameworkクラス ライブラリ
-- > System.Windows.ResourceDictionaryクラス~
http://msdn.microsoft.com/ja-jp/library/system.windows.resourcedictionary.aspx
-- > System.Windows.Application.Resourcesプロパティ~
http://msdn.microsoft.com/ja-jp/library/system.windows.application.resources.aspx
-- > System.Windows.FrameworkElement.Resourcesプロパティ~
http://msdn.microsoft.com/ja-jp/library/system.windows.frameworkelement.resources.aspx
-- > System.Windows.FrameworkContentElement.Resourcesプロパティ~
http://msdn.microsoft.com/ja-jp/library/system.windows.frameworkcontentelement.resources.aspx
このため、任意のUI要素に定義可能であるが、~
通常はルート要素(Window or Page)上に定義する。~
また、「リソース」は、定義場所により以下のような呼称・特徴がある。
***リソースの定義場所 [#hb775259]
-アプリケーション リソース~
ApplicationオブジェクトのResourcesプロパティに定義された「リソース」を~
「アプリケーション リソース」と呼び、全体から(つまりどこからでも)参照できるという特徴を持っている。
-ウィンドウ ページ リソース~
Window・PageオブジェクトのResourcesプロパティに定義された「リソース」を~
「アプリケーション リソース」と呼び、そのWindow・Pageと、その子要素から参照できるという特徴を持っている。
-イミディエイト リソース~
各UI要素(FrameworkElement or FrameworkContentElement)の~
Resourcesプロパティに定義された「リソース」を「イミディエイト・リソース」と呼び、~
「リソース」を定義した要素と、その子要素から参照できるという特徴を持っている。
***リソースの定義例 [#g3a19d9e]
-「リソース」には、前述のx:Key ディレクティブを使用して一意のキーを持たせて定義する必要がある。~
<Window.Resources>
<x:Array x:Key="List" Type="{x:Type sys:String}">
<sys:String>A</sys:String>
<sys:String>B</sys:String>
<sys:String>C</sys:String>
</x:Array>
</Window.Resources>
>※ 先頭で、String型のインポートが必要
xmlns:sys="clr-namespace:System;assembly=mscorlib"
-補足:ジェネリック コレクションのリソース~
ジェネリック コレクションを「リソース」に定義するには、x:TypeArgumentsのディレクティブを使用して、~
ObservableCollection<T>コレクション クラスなどのジェネリック型のコンストラクタに渡す必要があるが、~
これは、XAML2009 からのサポートとなる。
***リソースの使用方法 [#j614fac9]
「リソース」を定義したら、各種「マークアップ拡張」を使用して、~
プロパティ値に「データ バインディング」や、「リソース」への参照を指定できる。
この時、参照する側からx:Key ディレクティブを使用して割り当てたキーを「リソース」検索のキーとして指定できる。
なお、「スタイル」や「テンプレート」などは、キーを定義せず、TargetType 属性のみ使用して、~
指定の型のオブジェクトに「スタイル」や「テンプレート」を適用することもできる。~
これについては、「[[スタイルとテンプレート>#q002601b]]」を参照のこと。
-MSDN > .NET Frameworkクラス ライブラリ
-- > System.Windows.Style.TargetType プロパティ~
http://msdn.microsoft.com/ja-jp/library/system.windows.style.targettype.aspx
-- > System.Windows.Controls.ControlTemplate.TargetTypeプロパティ~
http://msdn.microsoft.com/ja-jp/library/system.windows.controls.controltemplate.targettype.aspx
**リソースの定義と参照 [#e615c6b1]
以下、「リソース」の定義と、プロパティ値に「リソース」への参照を指定する例を示す。
***StaticResource参照の例 [#l3a2e61a]
StaticResource参照では、
-コンパイル時に「リソース」検索が行われ、各「リソース」に指定されたキーが存在するかどうかが確認される。
-「リソース」検索により、「リソース」が発見できなかった場合は、コンパイル時にエラーとなる。
以下は、StaticResourceの定義と参照例。
-StaticResourceの定義と参照例(1)~
以下は、「マークアップ拡張」を使用して、「プロパティ属性構文」でStaticResource参照した例である。~
また、属性名を省略すると自動的にコンストラクタに渡される動作を利用して、~
ResourceKey属性に指定の値を渡す旨を指示する「ResourceKey=」という記述を省略することができる。
>
<Window.Resources>
<SolidColorBrush x:Key="BlueBrush" Color="Blue"/>
</Window.Resources>
<Grid>
<Ellipse Fill="{StaticResource ResourceKey=BlueBrush}" Height="150" Width="150"/>
</Grid>
>↓ 「ResourceKey =」という記述を省略
>
<Window.Resources>
<SolidColorBrush x:Key="BlueBrush" Color="Blue"/>
</Window.Resources>
<Grid>
<Ellipse Fill="{StaticResource BlueBrush}" Height="150" Width="150"/>
</Grid>
#ref(StaticResource.png,left,nowrap,StaticResourceの定義と参照例(1))
-StaticResourceの定義と参照例(2)~
以下は、一般的ではないが「プロパティ要素構文」を使用してStaticResource参照した例である。~
なお、WPFのみ、StaticResource参照を「プロパティ要素構文」で記述可能である。
>
<Window.Resources>
<SolidColorBrush x:Key="BlueBrush" Color="Blue"/>
</Window.Resources>
<Grid>
<Ellipse Height="150" Width="150">
<Ellipse.Fill>
<StaticResource ResourceKey="BlueBrush"/>
</Ellipse.Fill>
</Ellipse>
</Grid>
***DynamicResource参照の例 [#f59cc5ff]
-DynamicResource参照では、アプリケーションの起動時に、~
後で「リソース」検索を行う際に使用する一時的な式が作成され、~
アプリケーションの実行後、「リソース」が必要になった際に都度、「リソース」検索が行われる。
-このためDynamicResource参照は、
--主に「リソース」の値が変更される場合、StaticResource参照に代替して使用する。
--「リソース」検索により、「リソース」が発見できなかった場合は、デフォルト値が設定される。
-なお、DynamicResource参照は、WPFでのみ利用可能で、「Silverlight」では利用不可である。
以下は、DynamicResourceの定義と参照例。
-以下は、リソースがアプリケーション外部から変更される場合の例~
以下は、デスクトップ画面のテーマの変更(Windows XP → Windowsクラシック)を反映する例である。~
>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Ellipse Grid.Row="0"
Fill="{StaticResource ResourceKey={x:Static SystemColors.HighlightBrushKey}}"/>
<Ellipse Grid.Row="1"
Fill="{DynamicResource ResourceKey={x:Static SystemColors.HighlightBrushKey}}"/>
</Grid>
#ref(DynamicResource.png,left,nowrap,DynamicResourceの定義と参照例(リソースがアプリケーション外部から変更される場合))
-以下は、リソースがアプリケーション内部から変更される場合の例~
以下は、アプリケーションからの「リソース」の動的な変更を反映する例である。~
なお、「リソース」の動的な変更は、FrameworkElement.Resourcesプロパティで変更できる。
--XAML
<Window.Resources>
<SolidColorBrush x:Key="MyBrush" Color="Blue"/>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition Height="23"/>
</Grid.RowDefinitions>
<Ellipse Grid.Row="0" Fill="{StaticResource MyBrush}"/>
<Ellipse Grid.Row="1" Fill="{DynamicResource MyBrush}"/>
<StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Center">
<Button Content="青" Height="23" Name="button1" Width="75" Click="button1_Click" />
<Button Content="赤" Height="23" Name="button2" Width="75" Click="button2_Click" />
</StackPanel>
</Grid>
--コードビハインド
private void button1_Click(object sender, RoutedEventArgs e) {
this.Resources["MyBrush"] = Brushes.Blue;
}
private void button2_Click(object sender, RoutedEventArgs e) {
this.Resources["MyBrush"] = Brushes.Red;
}
#ref(DynamicResource2.png,left,nowrap,DynamicResourceの定義と参照例(リソースがアプリケーション内部から変更される場合)
***StaticResource参照 + ディクショナリ ファイルの例 [#y106473c]
ResourceDictionaryは、「ディクショナリ ファイル」に定義することもできる。
「ディクショナリ ファイル」を追加する際は、
+プロジェクト ファイルを右クリックし、
+[追加] → [リソース ディクショナリ]を選択するか、~
[追加] → [新しい項目]を選択し、表示されるテンプレートから[リソース ディクショナリ(WPF)]を選択する。
#ref(AddDictionary.png,left,nowrap,ディクショナリ ファイルの追加)
-前述のStaticResource参照の例を、~
「ディクショナリ ファイル」を使用するように書き直した例を以下に示す。
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="BlueBrush" Color="Blue"/>
</ResourceDictionary>
''ディクショナリ ファイルの定義例 (Dictionary1.xaml)''
-「ディクショナリ ファイル」を「イミディエイト・リソース」にロードする。
<Window.Resources>
<ResourceDictionary Source="Dictionary1.xaml"/>
</Window.Resources>
<Grid>
<Ellipse Fill="{StaticResource BlueBrush}" Height="150" Width="150"/>
</Grid>
>
#ref(StaticResourceAndDictionary.png,left,nowrap,StaticResource参照 + ディクショナリ ファイルの使用例)
''StaticResource参照 + ディクショナリ ファイルの使用例''
***DynamicResource参照 + ディクショナリ ファイルの例 [#dd9e73b0]
-DynamicResource参照とResourceDictionaryを組み合わせ、
-ResourceDictionaryを、Application.LoadComponentで動的にロード、
-Application.Current.Resourcesに設定することにより、
-「スタイル」(スキン )などの設定をアプリケーションから動的に変更することが可能である。
以下の、その例を示す。
-Dictionary
--Dictionary1.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="MyBrush" Color="Blue"/>
</ResourceDictionary>
--Dictionary2.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<SolidColorBrush x:Key="MyBrush" Color="Red"/>
</ResourceDictionary>
-XAML
<StackPanel>
<Ellipse Fill="{DynamicResource MyBrush}" Height="150" Width="150"/>
<Button Content="青" Height="23" Name="button1" Width="75" Click="button1_Click" />
<Button Content="赤" Height="23" Name="button2" Width="75" Click="button2_Click" />
</StackPanel>
-コードビハインド
public partial class Window1 : Window {
public Window1() {
InitializeComponent();
this.LoadResourceDictionary("Dictionary1.xaml");
}
private void button1_Click(object sender, RoutedEventArgs e) {
this.LoadResourceDictionary("Dictionary1.xaml");
}
private void button2_Click(object sender, RoutedEventArgs e) {
this.LoadResourceDictionary("Dictionary2.xaml");
}
private void LoadResourceDictionary(string name) {
ResourceDictionary dictionary =
(ResourceDictionary)Application.LoadComponent(new Uri(name, UriKind.Relative));
if (dictionary != null) Application.Current.Resources = dictionary;
}
}
>
#ref(DynamicResourceAndDictionary.png,left,nowrap,DynamicResource参照 + ディクショナリ ファイルの使用例)
''DynamicResource参照 + ディクショナリ ファイルの使用例''
*データ バインディング [#e915d7ec]
様々なソースと「データ バインディング」するサンプルを示す。
なお、サンプルのXAMLソースを読むためには、以下の、~
Bindingプロパティの設定方法を理解しておく必要がある。
''Bindingプロパティの設定方法''
|項番|プロパティ|説明|h
|1|Mode|OneTime、OneWay、TwoWay のいずれかの「バインディング モード」を指定する。|
|2|Source|「バインディング ソース」を指定する。「バインディング ソース」は、&br;「[[リソース>#ea30adb6]]」に定義し、[[StaticResourceの「マークアップ拡張」>#f8bba188]]を使用して「データ バインディング」するか、&br;FrameworkElement.DataContextから、「データ バインディング」する。|
|3|ElementName|UI要素名を使用して「バインディング ソース」を指定する。|
|4|RelativeSource|「バインディング ターゲット」からの相対位置で「バインディング ソース」を指定する。&br;※ Self、TemplatedParent、AncestorType、AncestorLevel属性などを使用して指定する。|
|5|Path|「バインディング ソース」のプロパティ名を指定する(名前空間のフルパスで指定可)。&br;なお、インデクサなどの指定も可能である。詳細は、以下のURLを参照のこと。|
|6|XPath|「バインディング ソース」として、XMLデータソースのXML DOMへのパスを表す文字列を指定する。|
|7|TargetNullValue|ソース値が null のときに返される値を指定する。|
|8|Converter|「[[値コンバータ>WPFのアーキテクチャ#nf7e2b6a]]」を指定する。&br;「[[値コンバータ>WPFのアーキテクチャ#nf7e2b6a]]」は、インスタンス化が可能であり、ResourceDictionaryに配置できる。&br;「[[値コンバータ>WPFのアーキテクチャ#nf7e2b6a]]」は「[[StaticResource>#ea30adb6]]」に定義し[[StaticResourceの「マークアップ拡張」>#f8bba188]]を使用して参照するようにする。|
|9|ConverterCulture|「[[値コンバータ>WPFのアーキテクチャ#nf7e2b6a]]」で使用するカルチャを指定する。|
|10|ConverterParameter|「[[値コンバータ>WPFのアーキテクチャ#nf7e2b6a]]」の変換ロジックで使用するパラメタを指定する。|
-MSDN > ・・・ > バインディングのマークアップ拡張機能~
http://msdn.microsoft.com/ja-jp/library/ms750413.aspx
--MSDN > ・・・ > PropertyPathのXAML構文~
http://msdn.microsoft.com/ja-jp/library/ms742451.aspx
--MSDN > ・・・ > 方法:XMLDataProviderとXPathクエリを試用してXMLデータにバインドする~
http://msdn.microsoft.com/ja-jp/library/ms749287.aspx
**データ バインディングの基礎 [#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]
*XAMLのサンプル [#w4e8eae9]
**[[WPFのサンプル>http://opentouryo.osscons.jp/index.php?Github%E4%B8%8A%E3%81%AE%E6%88%90%E6%9E%9C%E7%89%A9#g0ce9c8a]] [#d3fbfc29]
----
Tags: [[:WPF/Silverlight, XAML]]