読者です 読者をやめる 読者になる 読者になる

SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

Blendを使ってButtonのホバーエフェクトを作る Part4

今回は、Web系のデザインでよくありそうなタイプのボタンを作ります。

CSSのみでボタンデザイン #1

厚みを持ったボタンで、クリック時にはボタンがへこむような表現です。
ボタンの厚み部分はぼかしをなくしたDropShadowEffectで作成しています。

        <ControlTemplate x:Key="ButtonControlTemplate7" TargetType="{x:Type Button}">
            <Border x:Name="border" Background="#FF1ABC9C" CornerRadius="4" RenderTransformOrigin="0.5,0.5">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Border.RenderTransform>
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="3" Direction="270" BlurRadius="0" Color="#FF0E8C73"/>
                </Border.Effect>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                                    <EasingColorKeyFrame KeyTime="0" Value="#FF31C8AA"/>
                                </ColorAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Color)" Storyboard.TargetName="border">
                                    <EasingColorKeyFrame KeyTime="0" Value="#FF23A188"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="border">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="border">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="3">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                                    <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF31C8AA"/>
                                </ColorAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Color)" Storyboard.TargetName="border">
                                    <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FF23A188"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <ContentPresenter TextBlock.Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <ContentPresenter.Effect>
                        <DropShadowEffect ShadowDepth="1" BlurRadius="1" Direction="270" Color="#4C000000"/>
                    </ContentPresenter.Effect>
                </ContentPresenter>
            </Border>
        </ControlTemplate>

CSSのみでボタンデザイン #2

これも上の#1とほぼ同じです。

    	<ControlTemplate x:Key="ButtonControlTemplate8" TargetType="{x:Type Button}">
            <Border x:Name="border" Background="#FFF7D034" CornerRadius="4" RenderTransformOrigin="0.5,0.5">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Border.RenderTransform>
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="3" Direction="270" BlurRadius="0" Color="#FFF7BA59"/>
                </Border.Effect>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="border">
                                	<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="7">
                                		<EasingDoubleKeyFrame.EasingFunction>
                                			<CubicEase EasingMode="EaseInOut"/>
                                		</EasingDoubleKeyFrame.EasingFunction>
                                	</EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="border">
                                	<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="-4">
                                		<EasingDoubleKeyFrame.EasingFunction>
                                			<CubicEase EasingMode="EaseInOut"/>
                                		</EasingDoubleKeyFrame.EasingFunction>
                                	</EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.ShadowDepth)" Storyboard.TargetName="border">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="border">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="3">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <ContentPresenter TextBlock.Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <ContentPresenter.Effect>
                        <DropShadowEffect ShadowDepth="1" BlurRadius="1" Direction="270" Color="#4C000000"/>
                    </ContentPresenter.Effect>
                </ContentPresenter>
            </Border>
    	</ControlTemplate>

CSSのみでボタンデザイン #3

グラデーションも使って立体感を付けたデザインです。
クリック時にボタン内側に影を落とすことで、ボタンのへこんだ状態を表現しています
DropShadowを内側にかけるのは、↓を参考にやってみました。
http://www.codeproject.com/Articles/225076/Creating-Inner-Shadows-for-WPF-and-Silverlight

ただ、Borderの丸いコーナーの外側に黒い影などが見えてしまってます。
この辺を直さないと使えないかな。。。

        <ControlTemplate x:Key="ButtonControlTemplate9" TargetType="{x:Type Button}">
            <Border x:Name="border" CornerRadius="4" BorderBrush="#FF15AEEC" BorderThickness="1" ClipToBounds="True">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="border">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                <GradientStop Color="#FF1AB0EC" Offset="0"/>
                                                <GradientStop Color="#FF1A92C2" Offset="1"/>
                                            </LinearGradientBrush>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                                    <EasingColorKeyFrame KeyTime="0" Value="#FF1090C3"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background)" Storyboard.TargetName="border">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <SolidColorBrush Color="#FF1A92C2"/>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                                    <EasingColorKeyFrame KeyTime="0" Value="#FF1090C3"/>
                                </ColorAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="contentPresenter">
                                    <EasingColorKeyFrame KeyTime="0:0:0" Value="#FF1679A1" />
                                </ColorAnimationUsingKeyFrames>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Color)" Storyboard.TargetName="contentPresenter">
                                    <EasingColorKeyFrame KeyTime="0" Value="#88FFFFFF"/>
                                </ColorAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.Opacity)" Storyboard.TargetName="border1">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Effect).(DropShadowEffect.BlurRadius)" Storyboard.TargetName="border1">
                                    <EasingDoubleKeyFrame KeyTime="0" Value="7"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF49C0F0" Offset="0"/>
                        <GradientStop Color="#FF2CAFE3" Offset="1"/>
                    </LinearGradientBrush>
                </Border.Background>
                <Grid>
                    <ContentPresenter x:Name="contentPresenter" TextBlock.Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center">
                        <ContentPresenter.Effect>
                            <DropShadowEffect ShadowDepth="1" BlurRadius="1" Direction="270" Color="#4C000000"/>
                        </ContentPresenter.Effect>
                    </ContentPresenter>
                    <Border x:Name="border1" BorderBrush="Black" BorderThickness="1" Margin="-2" CornerRadius="4">
                        <Border.Effect>
                            <DropShadowEffect ShadowDepth="0" Opacity="0"/>
                        </Border.Effect>
                    </Border>
                </Grid>
            </Border>
        </ControlTemplate>