From window, to wind

趣味のゲームとJavaプログラムなどについて 適当に書き綴るブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブラカル風ボタンのスタイル

最近遊んでいるブラウザカルネージハートのボタンっぽいスタイルを作ってみました。

ブラカルボタン
左上が通常、右上がマウスオーバー、左下がクリックできない状態

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style TargetType="{x:Type TextBlock}" x:Key="ContentStyle">
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="FontSize" Value="18" />
<Setter Property="Foreground" Value="White"/>
</Style>
<!-- Button -->
<Style x:Key="styleButton" TargetType="Button">
<Setter Property="MinHeight"
Value="30" />
<Setter Property="MinWidth"
Value="100" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Polygon x:Name="Polygon1" Stroke="Black" StrokeThickness="2" Points="1,1 89,1 99,11 99,29 11,29 1,19" Fill="{DynamicResource PDefaultBrush}"/>
<Polygon x:Name="Polygon2" Stroke="{DynamicResource RDefault}" StrokeThickness="1" Points="2,2 88,2 98,12 98,28 12,28 2,18"/>
<Line x:Name="Line1" Stroke="{DynamicResource LDefault}" StrokeThickness="1.5" X1="15" Y1="25.5" X2="95" Y2="25.5" />
<Ellipse x:Name="Ellipse1" Fill="{DynamicResource EDefaultBrush}" />
<ContentPresenter x:Name="ContentStyle" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}" BasedOn="{StaticResource ContentStyle}"/>
</ContentPresenter.Resources>
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Polygon1" Property="Fill" Value="{DynamicResource POverBrush}"/>
<Setter TargetName="Polygon2" Property="Stroke" Value="{DynamicResource ROver}"/>
<Setter TargetName="Line1" Property="Stroke" Value="{DynamicResource LOver}"/>
<Setter TargetName="Ellipse1" Property="Fill" Value="{DynamicResource EOverBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Polygon1" Property="Fill" Value="{DynamicResource PfalseBrush}"/>
<Setter TargetName="Polygon2" Property="Stroke" Value="{DynamicResource Rfalse}"/>
<Setter TargetName="Line1" Property="Stroke" Value="{DynamicResource Lfalse}"/>
<Setter TargetName="Ellipse1" Property="Fill" Value="{DynamicResource EfalseBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<!-- Brush -->
<LinearGradientBrush x:Key="PDefaultBrush" StartPoint="0,0" EndPoint="0,1" >
<GradientStop Offset="0" Color="#FF797979"/>
<GradientStop Offset="0.5" Color="#FF433E44"/>
<GradientStop Offset="0.5" Color="#FF0D0C0D"/>
<GradientStop Offset="1" Color="#FF2B790C"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="RDefault">#FF56B561</SolidColorBrush>
<SolidColorBrush x:Key="LDefault">#FF03FF02</SolidColorBrush>
<RadialGradientBrush x:Key="EDefaultBrush" GradientOrigin="0.5,0.5" >
<GradientStop Offset="0" Color="#9903FF02"/>
<GradientStop Offset="0.4" Color="#6603FF02"/>
<GradientStop Offset="1" Color="#0003FF02"/>
</RadialGradientBrush>

<LinearGradientBrush x:Key="POverBrush" StartPoint="0,0" EndPoint="0,1" >
<GradientStop Offset="0" Color="#FF8BB07D"/>
<GradientStop Offset="0.5" Color="#FF57774A"/>
<GradientStop Offset="0.5" Color="#FF214513"/>
<GradientStop Offset="1" Color="#FF3FB912"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ROver">#FF69E867</SolidColorBrush>
<SolidColorBrush x:Key="LOver">#FFBAFFAC</SolidColorBrush>
<RadialGradientBrush x:Key="EOverBrush" GradientOrigin="0.5,0.5" >
<GradientStop Offset="0" Color="#9903FF02"/>
<GradientStop Offset="0.4" Color="#6603FF02"/>
<GradientStop Offset="1" Color="#0003FF02"/>
</RadialGradientBrush>

<LinearGradientBrush x:Key="PfalseBrush" StartPoint="0,0" EndPoint="0,1" >
<GradientStop Offset="0" Color="#FF6F6F6F"/>
<GradientStop Offset="0.5" Color="#FF4A4A4A"/>
<GradientStop Offset="0.5" Color="#FF181818"/>
<GradientStop Offset="1" Color="#FF484848"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="Rfalse">#FF8A8A8A</SolidColorBrush>
<SolidColorBrush x:Key="Lfalse">#00BAFFAC</SolidColorBrush>
<RadialGradientBrush x:Key="EfalseBrush" GradientOrigin="0.5,0.5" >
<GradientStop Offset="0" Color="#0003FF02"/>
<GradientStop Offset="0.4" Color="#0003FF02"/>
<GradientStop Offset="1" Color="#0003FF02"/>
</RadialGradientBrush>
</ResourceDictionary>


外形が四角ではないためPolygonを使ったけど、おかげでサイズが固定になってしまった。
文字の表示はContentPresenterを利用。フォントの指定にはContentPresenter.Resourcesを利用しないとエラーが出るので注意。
スポンサーサイト

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://kagenyan.blog69.fc2.com/tb.php/154-46342dca
この記事にトラックバックする(FC2ブログユーザー)

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。