読者です 読者をやめる 読者になる 読者になる

しっぽを追いかけて

ぐるぐるしながら考えています

Unity と猫の話題が中心   掲載内容は個人の私見であり、所属組織の見解ではありません

デフォルトのデザインテーマ定義ファイル

Visual Studio のプロパティパネルからシステムリソースを開くとデフォルトのスタイルを選ぶことができます

f:id:matatabi_ux:20140629195439p:plain

デフォルトのデザインの色や設定を確認するために、こういった方法で探すこともできるのですが大量にあるスタイルを1つずつ確認していくことになるのでかなり面倒です

実は下記のファイルを調べることで、もっと手っ取り早くデフォルトの各コントロールのスタイルテンプレートを確認することができます

%ProgramFiles(x86)%\Windows Kits\8.1\Include\winrt\xaml\design\themeresources.xaml

スタイルのキー名称からおおよその使い道はわかるので、簡単なデザインの変更(色の変更や、余白・線幅の変更など)ならばこのファイルから該当するスタイルキーを調べることで手軽に対応できることがあります

例えば SearchBox の検索ボタンの背景色をオレンジ色に変更したいという場合、SearchBox はそのようなプロパティを持っていないのでスタイルテンプレートをカスタマイズしなくてはならないようにも思えます

しかし、上記の themeresources.xaml を探していくと SearchBoxButtonBackgroundThemeBrush というリソースがあります

<Application x:Class="App2.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="using:App2">

    <Application.Resources>
        <SolidColorBrush x:Key="SearchBoxButtonBackgroundThemeBrush" Color="#FFD3703E" />
    </Application.Resources>

</Application>

これを App.xaml に上書きして定義します

#FFD3703E はオレンジ色のカラーコードです

<Page x:Class="App2.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:local="using:App2"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <SearchBox Width="128"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />
    </Grid>
</Page>

そしてページの XAML に SearchBox を置いただけで・・・

f:id:matatabi_ux:20140629201821p:plain

検索ボタンがオレンジ色になりました!

スタイルテンプレートを編集するよりずっと少ないコードでデザインが調整できますね