本格的に WPF に挑戦！
Tech-Ed に行ってから、無性に WPF が触りたくなりました。
教科書を適当に見繕って、れっつ・ちゃれんじ。
まずは実行画面
最初に結果をお見せします。
PC にインストールしているランチャの設定画面をモデルにしました。
XAML を晒す
上図のようなウィンドウを作成するために苦労して書いたのが下のコード。
<Window x:Class="WpfSample.EditDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="EditDialog" Height="400" Width="400">
<DockPanel LastChildFill="True">
<StackPanel DockPanel.Dock="Bottom" Height="30" Orientation="Horizontal" FlowDirection="RightToLeft">
<Button Width="100" Content="キャンセル"/>
<Button Width="100" Content="OK"/>
</StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="名前" />
<Label Grid.Column="0" Grid.Row="1" Content="ファイル名" />
<Label Grid.Column="0" Grid.Row="2" Content="パラメータ" />
<Label Grid.Column="0" Grid.Row="3" Content="作業フォルダ"/>
<Label Grid.Column="0" Grid.Row="4" Content="実行時の大きさ"/>
<Label Grid.Column="0" Grid.Row="5" Content="ツールチップ"/>
<Label Grid.Column="0" Grid.Row="6" Content="ショートカットキー" />
<Label Grid.Column="0" Grid.Row="7" Content="ホットキー"/>
<TextBox Grid.Column="1" Grid.Row="0" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="1" Grid.Row="1"/>
<TextBox Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2"/>
<TextBox Grid.Column="1" Grid.Row="3" Grid.ColumnSpan="2"/>
<ComboBox Grid.Column="1" Grid.Row="4" Grid.ColumnSpan="2" SelectedIndex="0">
<ComboBoxItem Content="通常のウィンドウ" />
<ComboBoxItem Content="最大化" />
<ComboBoxItem Content="最小化" />
</ComboBox>
<TextBox Grid.Column="1" Grid.Row="5" Grid.ColumnSpan="2" />
<TextBox Grid.Column="1" Grid.Row="6" />
<TextBox Grid.Column="1" Grid.Row="7" />
<Button Grid.Column="2" Grid.Row="1" Content="参照"/>
<Button Grid.Column="2" Grid.Row="6" Content="クリア"/>
<Button Grid.Column="2" Grid.Row="7" Content="クリア"/>
</Grid>
</DockPanel>
</Window>今回の方針として、コントロールの配置はすべてレイアウトパネルで行っています。
- 入力欄はきれいに位置を揃えたいので Grid
- OK とキャンセルのボタンは StackPanel で右から左へ順に並べる
- この２つのレイアウトパネルを DockPanel に乗っけて位置関係を指定
作ったサンプルはイベント処理とか全く記述していません。レイアウトのみ。これだけでも1時間以上かかりました。
一番工夫した部分は、Grid の Button が無い行に ColumnSpan を指定して、2列目と3列目を結合したところかな。「大した工夫じゃないよw」というツッコミはご勘弁を。
最後に
次は Style に挑戦予定。ちなみに今回は Expression Blend や Visual Studio のデザイナなんて使っていません。
漢は黙って、XAML を直書き！