[Silverlight] コントロールのテンプレートを書き換える

某所を見て難しいとか面倒とか言われていたので書いとく。

たとえば、「コンボボックスの IsEnabled が false のときの色を変えたい」なんてときはコントロールテンプレートを書き換えてやることになります。
Silverlight の標準のコントロールのテンプレートは MSDN の 「コントロールのスタイルとテンプレート」 にあります。コンボボックスなら 「ComboBox のスタイルとテンプレート」 です。

実際にコンボボックスを例にやってみます。

MSDN の前半に書かれているパーツやら状態やらは単なる説明なのでどうでもいいです。
XAML が書かれているところのちょっと上に使われている名前空間が書いてあります。xmlns:vsm と xmlns:sys を使ってるとあるのでこれらを書き足してやります。
続いて XAML の <Style TargetType=”ComboBox”> と <ControlTemplate x:Key=”ValidationToolTipTemplate”> を <UserControl.Resources> の中にそのままコピー＆ペースト。
必要なのはこれだけです。

<UserControl x:Class="SilverlightApplication1.MainPage"
    ...略...
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    ...略...>

    <UserControl.Resources>
        <ControlTemplate x:Key="ValidationToolTipTemplate">
             ...MSDN の内容をここにペースト...
        </ControlTemplate>

        <Style TargetType="ComboBox">
             ...MSDN の内容をここにペースト...
        </Style>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White">
        <ComboBox ...略 .../>
    </Grid>
</UserControl>

一つだけ注意があります。
MSDN 上では先に <Style ...> が書かれていますが、このスタイルの中で後に出てくる <ControlTemplate x:Key=”ValidationToolTipTemplate”> を使っています。この場合、実際の XAML では <ControlTemplate ...> を先に書いておかないとエラーになってしまいます。

あとはこの XAML を好きなように書き換えれば OK です。
上から眺めていけば

<vsm:VisualState x:Name="Disabled">
    <Storyboard>
        <DoubleAnimation Duration="00:00:00" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)" To=".55"/>
    </Storyboard>
</vsm:VisualState>

なんてのが見つかります。名前を見ただけでも 「Disabled になったときに DisabledVisualElement を 0.55 の透明度にする」 ということなんだろうという検討が付きますね。
で、この DisabledVisualElement を探すと

<Rectangle x:Name="DisabledVisualElement" RadiusX="3" RadiusY="3" Fill="White" Opacity="0" IsHitTestVisible="false" />

となってます。
試しに Fill=”White” を Fill=”Red” にしてみたら Disabled になったときに赤っぽくなるコンボボックスになりました。
XAML をガシガシ書き換えてやれば好きなようにカスタマイズできますので後はお好きなようにどうぞ。

ちなみに、Expression Blend を使うともっと簡単だったりします。
確か、コントロールを右クリックして 「テンプレートの編集」 とか何とかを選んでやるだけでよかったはず。