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

SourceChord

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

Codeplex風デザインのボタンを作りました

Codeplexのボタンデザインを真似してみました。
出来上がったデザインはこんな感じ↓
f:id:minami_SC:20140117203844p:plain


以下の、ボタン下部にラインが引かれてるボタンのデザインを真似してみました。
f:id:minami_SC:20140117203648p:plain:w200
http://www.codeplex.com/


ControlTemplateは下の通り。
Codeplexのサイトのボタンは、ButtonPress時のアニメーションは特にないので、ボタンを押した時のアニメは適当に作りました。

ControlTemplate
        <ControlTemplate x:Key="CodeplexButtonTemplate" TargetType="{x:Type Button}">
            <Grid x:Name="grid"
                  Background="#FFF0F1F4"
                  RenderTransformOrigin="0.5,0.5">
                <Grid.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform />
                        <SkewTransform />
                        <RotateTransform />
                        <TranslateTransform />
                    </TransformGroup>
                </Grid.RenderTransform>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="3" />
                </Grid.RowDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="grid" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                    <EasingColorKeyFrame KeyTime="0:0:0.4" Value="#FFE4E5E7">
                                        <EasingColorKeyFrame.EasingFunction>
                                            <SineEase EasingMode="EaseInOut" />
                                        </EasingColorKeyFrame.EasingFunction>
                                    </EasingColorKeyFrame>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="grid" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                                    <EasingColorKeyFrame KeyTime="0:0:0.2" Value="#FFE4E5E7">
                                        <EasingColorKeyFrame.EasingFunction>
                                            <SineEase EasingMode="EaseInOut" />
                                        </EasingColorKeyFrame.EasingFunction>
                                    </EasingColorKeyFrame>
                                </ColorAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.98">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseInOut" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.98">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <CubicEase EasingMode="EaseInOut" />
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled" />
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <ContentPresenter Margin="20,-10,0,0"
                                  HorizontalAlignment="Left"
                                  VerticalAlignment="Center"
                                  OpacityMask="Black"
                                  TextBlock.FontFamily="Segoe UI"
                                  TextBlock.FontSize="18"
                                  TextBlock.FontWeight="Light" />
                <TextBlock Margin="20,0,0,2"
                           HorizontalAlignment="Left"
                           VerticalAlignment="Bottom"
                           FontFamily="Segoe UI"
                           FontSize="13"
                           FontWeight="Light"
                           Opacity="0.5"
                           Text="{TemplateBinding Tag}" />
                <Rectangle Grid.Row="1" Fill="{TemplateBinding BorderBrush}" />
            </Grid>
        </ControlTemplate>
色の定義

Codeplexのボタン下部のラインで使用されている色をリソースに定義しておきました。

        <SolidColorBrush x:Key="BlueBrush" Color="#FF5EA8DE" />
        <SolidColorBrush x:Key="GreenBrush" Color="#FF8DBF35" />
        <SolidColorBrush x:Key="GrayBrush" Color="#FF9C9DA0" />
        <SolidColorBrush x:Key="PurpleBrush" Color="#FF7B4F9D" />
        <SolidColorBrush x:Key="RedBrush" Color="#FFF7866A" />
        <SolidColorBrush x:Key="YellowBrush" Color="#FFD8C967" />
使い方

BorderBrushでボタン下部のラインの色を、Tagプロパティの文字列でボタン下側のキャプションを設定できます。

        <Button Width="205"
                Height="68"
                Margin="20"
                HorizontalAlignment="Left"
                VerticalAlignment="Top"
                BorderBrush="{StaticResource BlueBrush}"
                Content="Join a project"
                Tag="find projects seeking help"
                Template="{DynamicResource CodeplexButtonTemplate}" />

これで、こんなボタンが表示されます。
f:id:minami_SC:20140117203844p:plain


並べてみた

このボタンを並べて、Codeplexのサイトデザインを再現してみました。
f:id:minami_SC:20140117203852p:plain