【WFP】標準がキモいと思うのはワタクシだけ？その３

標準がキモいと思うのはワタクシだけ？その３

12月の中だというのに全然雪が積もらない。
むしろ暖かくて溶けてしまっている。
せっかく冬なのだから真っ白な雪景色がいいな。と思う今日この頃。

さて、
なかなか終わりません。
この標準がキモいシリーズ。

だってねぇ…キモいんだもの。

今回のターゲットは、コレだ。
グループボックス
なんでこんなに地味。
こんなもの標準で使ってシステム開発すると、エンドユーザの世代交代を妨害していると言っても過言ではない。
言い過ぎか？とも思ったが
ぃんや、

ジジババ年配に合わせて開発していたら、若者は使いにくいものになる。やけに文字がデカいとかね。
あまり年配パワーが炸裂しすぎると、若者の意見が取り入れられない状態になりがちなんでね。
そんなの、ストレスにしかならない。

おっと、脱線。
やはりもっと「ナウい」感じにせねば！
（ナウいって…ｗｗｗ）

ってな訳で、今回はグループボックスをボタンの時と同じようにマテリアルデザインっぽくしてみようと思う。

標準

まずは標準の状態。

せっかくボタンはマテリアルデザインっぽくしたのに、周りの枠が台無しにしている。
これは何とかしたいもんです。

まずは完成形

完成形はこれ。
ボタンと同様にフラットなイメージで作成。

マウスオンで、ドロップシャドウの変化。
見た目はそれだけか…

カスタムコード

ControlTemplate

    <ControlTemplate x:Key="OriginalPanelTemplate" TargetType="{x:Type local:OriginalPanel}">
        <Grid Margin="5">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" MinHeight="10" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <Border
                Grid.Row="0"
                Grid.RowSpan="2"
                Panel.ZIndex="0"
                BorderBrush="Gray"
                BorderThickness="3"
                CornerRadius="{TemplateBinding AreaCornerRadius}">
                <Border.Effect>
                    <DropShadowEffect
                        x:Name="Shadow"
                        BlurRadius="5"
                        Direction="315"
                        Opacity="0.5"
                        ShadowDepth="3"
                        Color="Gray" />
                </Border.Effect>
            </Border>
            <Border
                x:Name="PART_HeaderBorder"
                Grid.Row="0"
                Height="{TemplateBinding HeaderHeight}"
                Panel.ZIndex="1"
                Background="{TemplateBinding HeaderBackgroundColor}"
                BorderBrush="{TemplateBinding HeaderBorderColor}"
                BorderThickness="{TemplateBinding HeaderBorderThickness}">
                <ContentPresenter
                    x:Name="Header"
                    Margin="4"
                    ContentSource="Header"
                    Focusable="False"
                    RecognizesAccessKey="True" />
            </Border>
            <Border
                x:Name="PART_DetailBorder"
                Grid.Row="1"
                Panel.ZIndex="1"
                Background="{TemplateBinding DetailBackgroundColor}"
                BorderBrush="{TemplateBinding DetailBorderColor}"
                BorderThickness="{TemplateBinding DetailBorderThickness}">
                <ContentPresenter Margin="4" />
            </Border>
        </Grid>

        <ControlTemplate.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="Shadow"
                                Storyboard.TargetProperty="Opacity"
                                To="0.8"
                                Duration="0:0:0.3" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="Shadow"
                                Storyboard.TargetProperty="Opacity"
                                To="0.5"
                                Duration="0:0:0.3" />
                        </Storyboard>
                    </BeginStoryboard>
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

グリッドは、ヘッダ部と明細部に分けるため２行の構成とした。
ヘッダ行高はAutoとし、ヘッダ部のBorderオブジェクトに対して自作のプロパティであるHeaderHeightを適用させる。
明細に関しては特に操作はしない。

アニメーションに関しては、ボタンと同様のアニメーションを使用。
ただし、ドロップシャドウのアニメーションのみ。

ヘッダと明細の背景色・罫線色を指定できるプロパティを作ったが、いらないかもなー
そもそもコンテナだし。

これでグループボックスもナウいデザインになった。

Windowsのタイルっぽくする手もあるけれど、Windowフォンを作ってない今となってはあまり価値を見いだせないんだよなぁ。