WIXLIB

XAML Do-It-Yourself シリーズ第 1 回 XAML 概要－1－

XAML Do-It-Yourself第 1 回 XAML 概要 はじめに－ XAML Do-It-Yourself について本 XAML Do-It-Yourself シリーズでは、13 回にわたって XAML (Extensible Application MarkupLanguage) �的は、初めて XAML を学ぶプログラマが、XAML を利用する WPF ゕプリケーション (スタンドゕロンで実行可能) や、Silverlight ゕプリケーション (ブラウザーで実行可能) ��を紹介し、XAML ML ��回は XAML の概要を紹介するとともに、Visual Studio 2010 を使った XAML �ます。次回以降は、実際に XAML を記述して �XAML の記述方法や XAML �きます。 実行環境について本書では、XAML �る環境として、Visual Studio 2010 ExpressEdition 以上を前提にしています。XAML のコードを記述したフゔ ルは通常のテキスト フゔ ルですので、実際には Microsoft Windows SDK とテキスト エデゖターがあれば WPF �慮して、Visual Studio 2010 を用います。無償で利用が可能な Visual Studio 2010Express Edition はこちら ss/) からダウンロードできます。Visual Studio 2010 では、従来の Windows フォーム �ールをウゖンドウにドラッグ ゕンド ドロップして配置することで WPF ゕプリケーションを作成でき、XAML �しかし、WPF ゕプリケーションでユーザー ンターフェ スの定義を担う XAML フゔ �的な WPF ゕプリケーション開発が可能です。 XAML とはXAML とは 、ユ ーザ ー ン ター フェ ス を記 述する ため のマ ーク ゕッ プ言 語で 、 WPF(WindowsPresentation Foundation) ゕプリケーション や Silverlight �れます。WPF は .NET Framework 3.0 �、2D および 3D ��でき、今までにないユーザー �の画面は、WPF ��

XAML は WPF ゕプリケーションのユーザー ンターフェ ��で示した WPF ゕプリケーションの XAML �す (一部を抜粋)。 Window x:Class "PhotoDemo.Window1"xmlns entation"xmlns:x e "PhotoDemo"xmlns:pd "clr-namespace:PhotoDemo"WindowState "Maximized"Loaded "WindowLoaded" Viewbox VerticalAlignment "Top" Stretch "Uniform" Grid Margin "20" Width "620" ShowGridLines "False" Grid.RowDefinitions RowDefinition Height "Auto" / RowDefinition Height "120" / RowDefinition Height "Auto" / RowDefinition Height "250" / －3－

RowDefinition Height "15" / RowDefinition Height "Auto" / RowDefinition Height "*" / /Grid.RowDefinitions Grid.ColumnDefinitions ColumnDefinition/ ColumnDefinition Width "400" / ColumnDefinition Width "160" / /Grid.ColumnDefinitions TextBlock Grid.Row "0" Grid.ColumnSpan "3" Style "{DynamicResource TitleText}" Span Order Prints and Gifts /Span /TextBlock ListBox Style "{DynamicResource PhotoListStyle}"Grid.Row "1"Grid.ColumnSpan "3"Name "PhotoListBox"Margin "0,0,0,20"DataContext "{Binding Source {StaticResource Photos}}"SelectionChanged "PhotoListSelection"ItemsSource "{Binding }"ItemContainerStyle "{DynamicResource PhotoListItem}"SelectedIndex "0" / このように、XAML は マークゕップ言語である XML をベースにしており、要素 (Element) と属性(Attribute) を XML と同様のタグ " " を用いて記述します。ただし XAML では、XML 宣言である「 ?xml version "1.0" encoding "utf-8"? �。 XAML の特徴XML でユーザー ンターフェ スを記述する XAML �特徴があります。 ユーザー �も大きな特徴は、ユーザー ンターフェ スのデザ �で効果的なユーザー ンターフェ �は大きなメリットです。C# や Visual Basic などを用いた これまでの Windows フォーム �ムなどのユーザー ンターフェ � フゔ �高度なユーザー ンターフェ スのデザ ン作業では、専門的なデザ ナーの協力が欠か－4－

�ありませんでした。これに対し XAML �ユーザー ンターフェ スを定義する XAMLフゔ �記述するソース フゔ ル（コード ビハ ンド フゔ ル）が分離されています。XAML にはユーザー ンターフェ スのデザ ン要素が集約されているため、デザ ナーは XAML フゔ ルを作成してユーザー ンターフェ ウスの移動といったユーザー ンターフェ ス関連の処理は XAML フゔ ルとは別のソース フゔ ルに記述します。 統一されたプログラミングもう 1 つの XAML ��す。これは、厳密には XAML というより WPF の特徴ですが、WPF の機能を実現するための記述を XAML で行うという点で、ここでは XAML ��ルの描画はコモンコントロール (User32) を用い、線や矩形の描画は GDI (GDI ) を、3D グラフゖックスを描画するには DirectX �場合は、DirectShow ��がありました。それぞれの API のスタ ��グ作業は複雑です。しかし XAML �り扱い可能であり、また 2D / 3D �。 �ベクター ��す。表示内容を拡大 / �るのが特徴です。 カスタマイズの柔軟性XAML では、ボタンやリスト �カスタマ �す。これまではカスタム コントロールを作成してラ ��は、XAML ��す。また XAML でツリー状 (階層的) � ンターフェ ��ンを付加したものです。－5－

WPF アプリケーションの作成XAML �際に Visual Studio 2010 を使って WPF �を見てみることにしましょう。Visual Studio 2010 から「WPF ゕプリケーション」プロジェクト �クトを作成し、WPF �されるプロジェクトに含まれるフゔ ルのうち、次の 4 つのフゔ �グラミング言語として C# ゔ ルのうち、拡張子が示すように XAML フゔ ルは 2 つで、ほかの 2 つは C# のソースコードです。まず App.xaml は、ゕプリケーションの定義を行う XAML フゔ ルで、WPF �して Window1.xaml がゕプリケーションのユーザー ンターフェ �ちらが今回のドキュメントで扱う XAML の中心となるフゔ ルです。.cs フゔ ルはコード ビハ ンドと呼ばれる、ユーザー ンターフェ �フゔ ルです。コード ビハ ンドについては「第 3 回 �予定です。さて、Visual Studio の統合開発環境から Windows1.xaml を開くと、XAML フゔ ルを編集するためのデザ ナー ウゖンドウ (WPF デザ ナー) が開きます。このウゖンドウの下部 (XAML ビュー) に表示されているコード (画面の赤枠部分) が XAML ��ールをドラッグ ゕンド ドロップしてユーザー ンターフェ �書では XAML ビューから直接 XAML を記述することでウゖンドウのデザ ンを行っていきます。WPF デザ ナーでは、XAML の記述に応じてデザ ン �した XAML ��

プロジェクト テンプレートから生成された Windows1.xaml �。すでに説明したように、XML �のが分かります。 Window x:Class "WpfApplication1.MainWindow"xmlns entation"xmlns:x e "MainWindow" Height "350" Width "525" Grid /Grid /Window XAML �、試しに Grid タグと /Grid タグの間の空行の部分に、 Button Width "100" Height "40" はじめまして /Button －7－

��ボタンがデザ ン ��り、525 350 ピクセルのウゖンドウの中央に、100 40 �ています。 XAML �ト ボックスといったコントロールを XAML �ョンのユーザー ンターフェ �別のプログラミングに進む前に、XAML �ょう。すでに述べたように、XAML には XML � UTF-8 です。また XML �す。 ルート要素と名前空間XAML は XML をベースにしていますので、要素 (タグ) が階層的に記述されます。WPF ��うに Window �も Application や Page (Silverlight、ブラウザー ベースのゕプリケーションの場合) など、XAML �。WPF ゕプリケーションの場合の Window タグをもう一度見てみましょう。 Window x:Class "WpfApplication1.MainWindow"－8－

xmlns entation"xmlns:x e "MainWindow" Height "350" Width "525" /Window まず Windows タグには名前空間 (xmlns) が 2 つ定義されています。1 つは既定の (WPF) 名前空間を指定するも resentation) 、もう 1 つはXAML schemas.microsoft.com/winfx/2006/xaml)。XAML の名前空間には "x: " �ます。XAML の名前空間を使用する場合は、この "x: " �では「x:Class " �ますが、これは、この XAML フゔ �スの名前空間が WpfApplication1、クラス名がWindow1 であることを示しています。XAML における 2 つの名前空間は、 XAML �。そのほかの、Title、Height、Width �うに、表示されるウゖンドウのタ �います。そして Windows 要素は、終了タグである /Windows で閉じられています。 XAML �る Window は、WPF のクラス ラ ブラリにある System.Windows 名前空間のWindow クラスに対応します。WPF には Button や TextBox といったクラス (コントロール) �XAML �でしょう (詳細は次回に説明します)。そして Title や Width �に対応します。また、 Window タグの中に Button �要素が表すウゖンドウ領域にボタン �ります。XAML では、属性 (プロパテゖ) �ョンが用意されています。先ほどは Button タグでボタンの大きさ (Width 属性と Height 属性) ��グで囲んで記述しました。 Button Width "100" Height "40" はじめまして /Button Content ��。 Button Width "100" Height "40" Content "はじめまして" /Button �、次のような記述も可能です。 Button －9－

Button.Width 100 /Button.Width Button.Height 100 /Button.Height Button.Content Hello /Button.Content /Button Button.Width という記述は、C# や Visual Basic �テゖングと似ています。XML のルールとしては、 Button タグと Button.Width には何の関係もありませんが、XAML では Button.Width というタグは、上位の Button ませんが、スタ �構文」と呼びます。 マークアップ拡張機能さらに XAML �� " {}" �ドでは、 Button タグの Style �用いられています。 Window x:Class "WpfApplication1.MainWindow"xmlns entation"xmlns:x e "MainWindow" Height "350" Width "525" Window.Resources Style TargetType "Button" x:Key "MyBackground" Setter Property "Background" Value "Yellow"/ /Style /Window.Resources Grid Button Width "100" Height "80" Style "{StaticResource MyBackground}" StyleButton /Button /Grid /Window � 5 回 �。 プロパティの継承XAML が XML をベースにしていることから、XAML で定義するユーザー ンターフェ �め上位の要素に設定した属性 (プロパテゖ) は下位の要素 (コントロール) に継承されます。－10－

�る働きをするパネル (StackPanel) �して文字の大きさ (TextBlock.FontSize) を 20 ��たとします。XAML は次のような内容になります。 StackPanel Height "150" Width "240" TextBlock.FontSize "20" Button Height "50" Button1 /Button Button Height "50" Button2 /Button Label Height "50" これはラベルです /Label /StackPanel 実行すると、StackPanel ように、XAML �ロパテゖだけではなく ベント処理でも発生します。 まとめ今回は XAML の概要を紹介してきました。XAML が XML ベースであること、タグが WPF のクラス (コントロール) て学習します。－11－

本書では、XAML �る環境として、Visual Studio 2010 Express