Visual Studio 2010 自習書 ~ Do-It-Yourself シリーズ ~
|
コントロール名 | 機能 |
Border | 別の要素の周囲に境界線、背景、またはその両方を描画します |
Button | ボタン |
CheckBox | チェック ボックス |
ComboBox | コンボ ボックス |
DataGrid | データを表形式で表示する |
Image | 画像を描画します |
Label | 文字列を表示します |
ListBox | リスト ボックス |
RadioButton | ラジオ ボタン |
TabControl | タブ表示 |
GridSplitter | グリッドを分割してサイズの変更を可能にします |
GroupBox | グループ ボックス |
ListView | リスト ビュー |
MediaElement | オーディオとビデオまたはそのいずれかを含むコントロールを表します |
Menu | メニュー |
PasswordBox | パスワード (マスク) 入力を行うテキスト ボックス |
ProgressBar | プログレス バー |
Rectangle | 矩形を描画します。そのほかの 2D グラフィックス描画として、Ellipse (だ円)、Line (直線)、Path (連続する直線と曲線)、Polygon (多角形)、Polyline (連続する直線)などがあります |
RichTextBox | 書式付きのテキスト入力ボックス |
ScrollBar | スクロール バー |
Separator | メニューなどの項目を区切るために使用します |
Slider | スライダー |
StatusBar | ステータス バー |
TextBox | テキスト入力ボックス |
ToolBar | ツール バー |
ToolBarTray | ToolBar を配置するコンテナー |
TreeView | ツリー ビュー |
WebBrowser | ブラウザーのように HTML ドキュメントをホストする |
WindowsFormsHost | Windows フォーム コントロールを WPF ページ上にホストできるようにします |
表 2-1 XAML (WPF) で利用できる主なコントロール
すでに、Button や TextBox コントロールを使ったサンプルは紹介しました。以降では、典型的なコントロールの記述例として、ListBox、Menu、ToolBar を紹介します。
ListBox (リスト・ボックス)
ListBox では、一覧表示する項目を事前に用意しておく必要があります。これらは <ListBoxItem> タグを使って記述します。XAML では、ListBox の項目に図形や画像を指定することも可能です。例えば次は、文字列の項目「項目#1」と「項目#2」、ビットマップの項目を含むリスト ボックスの例です。
<Window x:Class="WpfApplication2.ListBoxWindow"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Title="ListBox" Height="300" Width="300">
<Grid>
<ListBox Width="240" Height="150">
<ListBoxItem IsSelected="True">項目#1</ListBoxItem>
<ListBoxItem >項目#2</ListBoxItem>
<ListBoxItem >
<Image Width="200" Source="/WpfApplication2;component/Images/Penguins.jpg"/>
</ListBoxItem>
</ListBox>
</Grid>
</Window>
表示は次のようになります。
Menu (メニュー)
メニューは、<Menu> 要素と <MenuItem> 要素を使って記述します。<MenuItem> 要素をネストすることで、階層的なメニューを作ることも可能です。
なお、次のリストで示しているように、ショートカット キーを示す文字は "&" ではなく "_" (アンダースコア) になっています。これは、XML のルールでは "&" を & と記述する必要があるためで、XAML では、より簡単に記述できる "_" に変更されています。また、メニュー項目の間に区切り線 (セパレーター) を入れたい場合は <Separator> 要素を記述します。
<Window x:Class="WpfApplication2.MenuWindow"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Title="MenuWindow" Height="300" Width="500">
<DockPanel>
<Menu DockPanel.Dock="Top" Height="Auto">
<MenuItem Header="ファイル(_F)">
<MenuItem Header="さらにメニュー">
<MenuItem Header="サブメニュー項目#1"/>
<MenuItem Header="サブメニュー項目#2"/>
</MenuItem>
<Separator/>
<MenuItem Header="終了(_X)"/>
</MenuItem>
<MenuItem Header="編集(_E)">
<MenuItem Header="コピー"/>
</MenuItem>
<MenuItem Header="ヘルプ(_H)">
<MenuItem Header="○○○について" />
</MenuItem>
</Menu>
<Grid />
</DockPanel>
</Window>
表示は次のようになります。
ToolBar (ツール バー)
ツール バーは、まず <ToolBarTray> 要素でツール バーの領域を確保しておき、そこに <ToolBar> 要素を使って配置します。1 つの <ToolBar> 要素が、1 つのツール バーのまとまりを示します。次のリストは、2 つのツール バーを作成し、第 1 のツール バーには 2 つのボタンを、第 2 のツール バーにはボタンとテキスト ボックスをそれぞれ配置した例です。
<Window x:Class="WpfApplication2.ToolBarWindow"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Title="ToolBar" Height="300" Width="400">
<Grid>
<ToolBarTray VerticalAlignment="Top">
<ToolBar Name="toolBar1" Band="0" BandIndex="0">
<Button>Toolbar Button1</Button>
<Separator/>
<Button>Toolbar Button2</Button>
</ToolBar>
<ToolBar Name="toolBar2" Band="0" BandIndex="1">
<Button>ToolBar Button3</Button>
<Separator/>
<TextBox Name="textBox1" Width="80" />
</ToolBar>
</ToolBarTray>
</Grid>
</Window>
表示は次のようになります。
ページのトップへ
5. 標準的なウィンドウのレイアウト
今回の総仕上げとして、これまでに紹介したレイアウトやコントロールを使って、メニューやツール バーを備えた一般的なウィンドウ (Windows エクスプローラーのようなウィンドウ) を作成してみましょう。具体的には、レイアウトとして Grid を使用し、内部にメニュー、ツール バー、ステータス バーを配置しています。
<Window x:Class="WpfApplication2.LayoutWindow"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Title="LayoutSample" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<!-- Menu -->
<RowDefinition Height="Auto"/>
<!-- ToolBar -->
<RowDefinition Height="*"/>
<!-- Body -->
<RowDefinition Height="Auto"/>
<!-- StatusBar -->
</Grid.RowDefinitions>
<!-- メニュー -->
<Menu Grid.Row="0">
<MenuItem Header="ファイル(_F)">
<MenuItem Header="さらにメニュー">
<MenuItem Header="サブメニュー項目#1"/>
<MenuItem Header="サブメニュー項目#2"/>
</MenuItem>
<Separator/>
<MenuItem Header="終了(_X)"/>
</MenuItem>
<MenuItem Header="編集(_E)">
<MenuItem Header="コピー"/>
</MenuItem>
<MenuItem Header="ヘルプ(_H)">
<MenuItem Header="○○○について" />
</MenuItem>
</Menu>
<!-- ツールバー -->
<ToolBarTray Grid.Row="1" >
<ToolBar Name="toolBar1" Band="0" BandIndex="0">
<Button>Toolbar Button1</Button>
<Button>Toolbar Button2</Button>
</ToolBar>
<ToolBar Name="toolBar2" Band="0" BandIndex="1">
<Button>ToolBar Button3</Button>
<Separator/>
<TextBox Name="textBox1" Width="80" />
<Button>ToolBar Button4</Button>
</ToolBar>
</ToolBarTray>
<WrapPanel Grid.Row="2" Margin="5,5,5,5" Background="LightGray">
<!-- 本体部分 -->
<TextBlock >ここはウィンドウの本体部分です</TextBlock>
</WrapPanel>
<!-- ステータスバー -->
<StatusBar Grid.Row="3">
<Label>これはステータスバー</Label>
</StatusBar>
</Grid>
</Window>
リスト 2-5 標準的な Windows アプリケーションのレイアウト例
実行すると次のようなウィンドウが表示されます。
もう 1 つ、TreeView コントロールを配置したウィンドウの例を紹介しましょう。基本的なレイアウト用のパネルとして DockPanel を使用します。TreeView の右側のペインにはエクスプローラーと同様、ListView を表示したいところですが、ListView については、「データ バインディング」の回で説明します。
<Window x:Class="WpfApplication2.NewLayoutWindow"
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
Title="LayoutSample" Height="350" Width="525">
<DockPanel>
<!-- メニュー -->
<Menu DockPanel.Dock="Top" >
<MenuItem Header="ファイル(_F)">
<MenuItem Header="さらにメニュー">
<MenuItem Header="サブメニュー項目#1"/>
<MenuItem Header="サブメニュー項目#2"/>
</MenuItem>
<Separator/>
<MenuItem Header="終了(_X)"/>
</MenuItem>
<MenuItem Header="編集(_E)">
<MenuItem Header="コピー"/>
</MenuItem>
<MenuItem Header="ヘルプ(_H)">
<MenuItem Header="○○○について" />
</MenuItem>
</Menu>
<!-- ツールバー -->
<ToolBarTray DockPanel.Dock="Top">
<ToolBar Name="toolBar1" Band="0" BandIndex="0">
<Button>Toolbar Button1</Button>
<Separator/>
<Button>Toolbar Button2</Button>
</ToolBar>
<ToolBar Name="toolBar2" Band="0" BandIndex="1">
<Button>ToolBar Button3</Button>
<Separator/>
<TextBox Name="textBox1" Width="80" />
<Button>ToolBar Button4</Button>
</ToolBar>
</ToolBarTray>
<!-- ステータスバー -->
<StatusBar DockPanel.Dock="Bottom">
<Label>これはステータスバー</Label>
</StatusBar>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TreeView Grid.Column="0" >
<TreeViewItem Header="node #1" IsExpanded="True">
<TreeViewItem Header="child node #2"/>
<TreeViewItem Header="child node #3"/>
</TreeViewItem>
<TreeViewItem Header="node #2" IsExpanded="True">
<TreeViewItem Header="child node #2"/>
<TreeViewItem Header="child node #3"/>
</TreeViewItem>
</TreeView>
<GridSplitter Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Stretch"
Background="Gray"
ShowsPreview="True"
Width="4"
/>
<!-- ListView はデータバインディングの回で -->
<TextBox Grid.Column="2">ListView</TextBox>
</Grid>
</DockPanel>
</Window>
リスト 2-6 Windows エクスプローラー風のウィンドウ
実行すると次のようなウィンドウが表示されます。
ページのトップへ
6. まとめ
今回は、XAML で利用できるレイアウトと、代表的なコントロールについて学習しました。XAML では、パネルを用いることで、ウィンドウ上で絶対的な位置指定をしなくても、柔軟なレイアウトが実現できることがお分かりいただけたでしょう。
次回は、ボタンのクリックやメニュー選択といったコントロール操作に対応するロジックの記述 (イベント処理) について紹介します。
ページのトップへ