XAMLでズルいデザイン～その2・ズルいtext-shadow～

前回に引き続き、ズルいデザインで紹介されてた内容をWPFでマネしてみます。
今度は、文字の装飾をやってみたいと思います。

参考リンク

ズルいデザイン（1）：少ない手間と知識でそれなりに見せる、ズルいデザインテクニック (2/2) - ＠IT

で、WPFでマネした結果がコレ↓

作ったリソースは以下の通り

        <Style x:Key="ZuruiBlackTextBlockStyle1" TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground" Value="#FF000000" />
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="0"
                                      ShadowDepth="1"
                                      Color="#FFFFFFFF"/>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ZuruiBlackTextBlockStyle2" TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground" Value="#FF000000" />
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="0"
                                      ShadowDepth="1"
                                      Color="#66FFFFFF"/>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ZuruiWhiteTextBlockStyle1" TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground" Value="#FFFFFFFF" />
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="0"
                                      Direction="135"
                                      ShadowDepth="1"
                                      Color="#FF000000"/>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ZuruiWhiteTextBlockStyle2" TargetType="{x:Type TextBlock}">
            <Setter Property="Foreground" Value="#FFFFFFFF" />
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="0"
                                      Direction="135"
                                      ShadowDepth="1"
                                      Color="#80000000"/>
                </Setter.Value>
            </Setter>
        </Style>

今回も、光源は左上にあるものとしてデザインしています。

使用例

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Rectangle Fill="#FF333333"/>
        <Rectangle Grid.Column="1" Fill="#FFB0430B"/>
        <Rectangle Grid.Row="1" Grid.Column="0" Fill="#FFDDDDDD"/>
        <Rectangle Grid.Row="1" Grid.Column="1" Fill="#FFFFC300"/>
        
        <StackPanel Margin="5">
            <TextBlock Text="背景色 #FF333333" FontSize="24" Style="{DynamicResource ZuruiWhiteTextBlockStyle1}"/>
            <TextBlock Text="太字のテキスト" FontSize="20" FontWeight="Bold" Style="{DynamicResource ZuruiWhiteTextBlockStyle1}"/>
            <TextBlock Text="Shadow #FF000000" Style="{DynamicResource ZuruiWhiteTextBlockStyle1}"/>
            <TextBlock Text="比較用" Style="{DynamicResource ZuruiWhiteTextBlockStyle1}"/>
            <TextBlock Text="比較用(シャドウなしの普通のテキスト)" Foreground="#FFFFFFFF"/>
        </StackPanel>

        <StackPanel Grid.Column="1" Margin="5">
            <TextBlock Text="背景色 #FFB0430B" FontSize="24" Style="{DynamicResource ZuruiWhiteTextBlockStyle2}"/>
            <TextBlock Text="太字のテキスト" FontSize="20" FontWeight="Bold" Style="{DynamicResource ZuruiWhiteTextBlockStyle2}"/>
            <TextBlock Text="Shadow #80000000" Style="{DynamicResource ZuruiWhiteTextBlockStyle2}"/>
            <TextBlock Text="比較用" Style="{DynamicResource ZuruiWhiteTextBlockStyle2}"/>
            <TextBlock Text="比較用(シャドウなしの普通のテキスト)" Foreground="#FFFFFFFF"/>
        </StackPanel>

        <StackPanel Grid.Row="1" Margin="5">
            <TextBlock Text="背景色 #FFDDDDDD" FontSize="24" Style="{DynamicResource ZuruiBlackTextBlockStyle1}"/>
            <TextBlock Text="太字のテキスト" FontSize="20" FontWeight="Bold" Style="{DynamicResource ZuruiBlackTextBlockStyle1}"/>
            <TextBlock Text="Shadow #FFFFFFFF" Style="{DynamicResource ZuruiBlackTextBlockStyle1}"/>
            <TextBlock Text="比較用" Style="{DynamicResource ZuruiBlackTextBlockStyle1}"/>
            <TextBlock Text="比較用(シャドウなしの普通のテキスト)" Foreground="#FF000000"/>
        </StackPanel>

        <StackPanel Grid.Row="1" Grid.Column="1"  Margin="5">
            <TextBlock Text="背景色 #FFFFC300" FontSize="24" Style="{DynamicResource ZuruiBlackTextBlockStyle2}"/>
            <TextBlock Text="太字のテキスト" FontSize="20" FontWeight="Bold" Style="{DynamicResource ZuruiBlackTextBlockStyle2}"/>
            <TextBlock Text="Shadow #66FFFFFF" Style="{DynamicResource ZuruiBlackTextBlockStyle2}"/>
            <TextBlock Text="比較用" Style="{DynamicResource ZuruiBlackTextBlockStyle2}"/>
            <TextBlock Text="比較用(シャドウなしの普通のテキスト)" Foreground="#FF000000"/>
        </StackPanel>
    </Grid>

ちなみに、このスタイル使うときに注意が必要なのが、ClearTypeの有無。
WPFでテキストとかにEffectをかけると、ClearTypeが効かなくなります。

このスタイルを適用した文字と、スタイルなしのTextBlockを比較用に並べてあるので、比べてみるとClearTypeが効かないと文字が読みにくくなることがわかるかと思います。

ClearType無効な小さい文字は、特に読みにくくなります。
小さい文字や長い文章とかでは、このスタイルは使わず、タイトルとかロゴみたいなそこそこ大きい文字を使う時だけに限って使用した方がよさそうですね。

でもまぁ、これはいろんな所で使えそうかな。