WPF Theme

C#

Style を利用すれば、同じ種類のコントロールのデザインをまとめて変更することができます。しかし、デザインが統一された UI を作るとなると、利用しているコントロール一つ一つに Style を用意する必要があります。この手間は大変。

WPF Toolkit では UI のデザインをまとめて変更するための「Theme」が提供されています。

Theme を使った UI は次の通り。

f:id:griefworker:20090817160536p:image

ExpressionDark というテーマを使っています。Expression Blend みたいな配色ですね。ToolBar 内に配置したコントロールの Style が変になっていますが、他の Theme の中には綺麗に表示されているものもありました。

Theme の使い方は次の通り。

<Window x:Class="ThemeSample.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:theme="clr-namespace:System.Windows.Controls.Theming;assembly=System.Windows.Controls.Theming.ExpressionDark"
    Title="Window1" Height="300" Width="300">
    <!--Window 直下にテーマを配置する-->
    <theme:ExpressionDarkTheme>
        <!--テーマの中にレイアウトパネルを配置する-->
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            <Menu Grid.Row="0">
                <MenuItem Header="ファイル(_F)"></MenuItem>
                <MenuItem Header="編集(_E)"></MenuItem>
            </Menu>
            <ToolBarTray Grid.Row="1">
                <ToolBar>
                    <Button Content="新規作成"/>
                    <Label Content="URL:"/>
                    <ComboBox Width="120" IsEditable="True" />
                </ToolBar>
            </ToolBarTray>
            <TabControl Grid.Row="2">
                <TabItem Header="サンプル1"></TabItem>
                <TabItem Header="サンプル2"></TabItem>
            </TabControl>
            <StatusBar Grid.Row="3">
                <Label Content="テスト"/>
            </StatusBar>
        </Grid>
    </theme:ExpressionDarkTheme>
</Window>

レイアウトパネルとコントロールの間に Theme を挟むだけ。簡単です。