WPF の Style に挑戦

はじめに

先日 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>