はじめに
先日 WPF で初めてまとも(?)に作成したウィンドウを、スタイルでちょっぴり見栄え良くしてみます。
修正した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" Background="#303030">
<Window.Resources>
<!--ウィンドウ上の全ての TextBox に適用する Style-->
<Style x:Key="{x:Type TextBox}" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="#444444"/>
<Setter Property="Foreground" Value="#F0F0F0"/>
<Setter Property="Margin" Value="2"/>
<Setter Property="Height" Value="28"/>
</Style>
<!--ウィンドウ上の全ての Label に適用する Style-->
<Style x:Key="{x:Type Label}" TargetType="{x:Type Label}">
<Setter Property="Foreground" Value="#F0F0F0"/>
</Style>
<!--ウィンドウ上の全ての Button に適用する Style-->
<Style x:Key="{x:Type Button}" TargetType="{x:Type Button}">
<Setter Property="Margin" Value="2"/>
<Setter Property="Height" Value="28" />
<Setter Property="Foreground" Value="#F0F0F0"/>
<Setter Property="Background" Value="#0593E2"/>
</Style>
<!--OK Button に適用する Style-->
<Style x:Key="okButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Margin" Value="2"/>
<Setter Property="Height" Value="28"/>
<Setter Property="Foreground" Value="#0000FF"/>
<Setter Property="Background" Value="#FFFF00"/>
</Style>
</Window.Resources>
<DockPanel LastChildFill="True">
<StackPanel DockPanel.Dock="Bottom" Orientation="Horizontal" FlowDirection="RightToLeft">
<Button Width="100" Content="キャンセル"/>
<!--Style 属性に指定した方が優先される-->
<Button Width="100" Content="OK" Style="{DynamicResource okButtonStyle}"/>
</StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</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 は1個だけなので、ここでスタイルを記述してみる。-->
<ComboBox.Style>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="Margin" Value="2"/>
<Setter Property="Height" Value="28"/>
<Setter Property="Background" Value="#444444"/>
<Setter Property="Foreground" Value="#F0F0F0"/>
</Style>
</ComboBox.Style>
</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>
今回も大したことはやっていません。スタイルを追加しただけ。
スタイルでは色だけでなくコントロールの高さやマージンも指定しています。
あとトリガーも指定できるんだけど、それはまた今度。
おめかしの結果
おぉぉ。なかなか。
ちなみに配色は某ブログを参考にしました。私はセンス無い人なので…(ToT)
最後に
XAML直書きにも慣れてきて、楽しくなってきたw
デザイナでペタペタとコントロールを貼り付けるよりも性に合ってます。
次はテンプレートに挑戦予定。