[WPF][Silverlight]スタイルの追加設定

XAML ではコントロールの規定のスタイルを以下のように記述することで、対象のコントロール全てがそのスタイルを適用してくれます。

こんな画面があったとして、

    <Grid>

        <StackPanel>

            <StackPanel>

                <Button Content="Button"/>

                <Button Content="Button"/>

                <Button Content="Button"/>

            </StackPanel>

            <StackPanel>

                <Button Content="Button"/>

                <Button Content="Button"/>

                <Button Content="Button"/>

                <Button Content="Button"/>

            </StackPanel>

        </StackPanel>

    </Grid>

リソースに下記を記述する事で、

    <Style TargetType="{x:Type Button}">

        <Setter Property="Foreground" Value="Red" />

    </Style>

全てのボタンの文字色が赤くなります。

アプリケーションの基本スタイルはそれでよいとして、下側のボタンだけ追加設定しようとすると、

    <Grid>

        <StackPanel>

            <StackPanel>

                <Button Content="Button"/>

                <Button Content="Button"/>

                <Button Content="Button"/>

            </StackPanel>

            <StackPanel>

                <StackPanel.Resources>

                    <!-- このスタックパネル内のみ横幅を100にしたい -->

                    <Style TargetType="{x:Type Button}">

                        <Setter Property="Width" Value="100" />

                    </Style>

                </StackPanel.Resources>

                <Button Content="Button"/>

                <Button Content="Button"/>

                <Button Content="Button"/>

                <Button Content="Button"/>

            </StackPanel>

        </StackPanel>

    </Grid>

ボタンの文字色がデフォルト値になってしまいます。基本設定の上に個別設定を施したい場合は次のように書きます。

    <Grid>

        <StackPanel>

            <StackPanel>

                <Button Content="Button"/>

                <Button Content="Button"/>

                <Button Content="Button"/>

            </StackPanel>

            <StackPanel>

                <StackPanel.Resources>

                    <!-- このスタックパネル内のみ横幅を100にしたい -->

                    <Style TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">

                        <Setter Property="Width" Value="100" />

                    </Style>

                </StackPanel.Resources>

                <Button Content="Button"/>

                <Button Content="Button"/>

                <Button Content="Button"/>

                <Button Content="Button"/>

            </StackPanel>

        </StackPanel>

    </Grid>

オープンソースの Themes を適用した場合などによく使います。