Codeplex風デザインのボタンを作りました
Codeplexのボタンデザインを真似してみました。
出来上がったデザインはこんな感じ↓
以下の、ボタン下部にラインが引かれてるボタンのデザインを真似してみました。
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}" />
これで、こんなボタンが表示されます。
並べてみた
このボタンを並べて、Codeplexのサイトデザインを再現してみました。