XAMLでズルいデザイン～その1・ズルい線～

以前「ズルいデザイン」というスライドとかが話題になってましたが、その内容をWPFでマネしてみました。

参考リンク

ズルいデザイン（1）：少ない手間と知識でそれなりに見せる、ズルいデザインテクニック (1/2) - ＠IT
ズルいデザインテクニック2013 + セミフラット version // Speaker Deck

とりあえず、「ズルい線」と紹介されてるものをWPFでも作ってみたいと思います。
まぁ、デスクトップアプリ作ってると、こういう線を引くことって少ないかもしれませんが、、、

ズルい線

とりあえず、こんなリソースを作りました。

        <Style x:Key="ZuruiShapeStyle" TargetType="{x:Type Shape}">
            <Setter Property="Stroke" Value="#33000000" />
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="0"
                                      Direction="315"
                                      ShadowDepth="1"
                                      Color="#4CFFFFFF" />
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="ZuruiShapeFillStyle" TargetType="{x:Type Shape}">
            <Setter Property="Stroke" Value="{x:Null}" />
            <Setter Property="Fill" Value="#33000000" />
            <Setter Property="Effect">
                <Setter.Value>
                    <DropShadowEffect BlurRadius="0"
                                      Direction="315"
                                      ShadowDepth="1"
                                      Color="#4CFFFFFF" />
                </Setter.Value>
            </Setter>
        </Style>

で、↓のように使えます。
TargetTypeをLineではなくShapeにしているので、Lineだけでなく、EllipseやRectangleなど任意のShapeに対してこのStyleを適用できます。
StrokeThicknessで太さを変えたり、Strokeを消してFillを設定することで、へこんだ四角形を作ったりと、色々応用が効くと思います。

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Line Grid.Column="0" X2="1" Stretch="Fill" StrokeThickness="1" Margin="5" Style="{DynamicResource ZuruiShapeStyle}"/>
        <Line Grid.Column="1" X2="1" Stretch="Fill" StrokeThickness="3" Margin="5" Style="{DynamicResource ZuruiShapeStyle}"/>
        <Line Grid.Column="2" X2="1" Stretch="Fill" StrokeThickness="5" Margin="5" Style="{DynamicResource ZuruiShapeStyle}"/>
        
        <Rectangle Grid.Column="0" Grid.Row="1" Width="50" Height="50" Style="{DynamicResource ZuruiShapeStyle}" Margin="10" StrokeThickness="1" />
        <Rectangle Grid.Column="1" Grid.Row="1" Width="50" Height="50" Style="{DynamicResource ZuruiShapeStyle}" Margin="10" StrokeThickness="3" />
        <Rectangle Grid.Column="2" Grid.Row="1" Width="50" Height="50" Style="{DynamicResource ZuruiShapeFillStyle}" Margin="10" />
    </Grid>

f:id:minami_SC:20140215222527p:plain

背景色をかえてもこんな風に使えます。
f:id:minami_SC:20140215222534p:plain

あと、元のスライドでは、すべての光源は右上にある、という仮定でデザインされてますが、
個人的には、左上に光源があった方がしっくりくるので、ここではすべての光源は左上と仮定してデザインしてます。
(Windowsのクラシックスタイルなどのボタンデザインは、光源が左上にあるようなデザインになってるし。)

Gridの境目にズルい線を入れてみる

こんな風に、タイトルとかの文字列装飾とかに使えるかも。
f:id:minami_SC:20140215222543p:plain

    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <StackPanel Margin="5" VerticalAlignment="Bottom">
            <TextBlock Margin="2"
                       FontSize="24"
                       Foreground="White"
                       Text="sample.jpg"
                       TextWrapping="Wrap" />
            <Line Width="262"
                  Stretch="Fill"
                  StrokeThickness="2"
                  Style="{DynamicResource ZuruiShapeStyle}"
                  X2="1" />
        </StackPanel>
        <Image Grid.Row="1"
               Margin="5"
               Source="Image/sample.jpg" />
    </Grid>