見栄えに関する部分を調べたり勉強したりするのはそんなに好きじゃない。
好きじゃ無いんだけど…
単色べったりじゃぁあんまりじゃない？ということでグラデーションをやろうと思います。
グラデーションとかを試すために、簡単なWindowを１つでっちあげます。
GridにRectangleを置いただけ。RectangleがGridいっぱいに広がって配置されます。
こんな感じ。
<Window x:Class="WpfBrush.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Rectangle />
</Grid>
</Window>
実行結果は下の通り。何も無いウィンドウがそのまま出るだけ。
RectangleのFillプロパティにBrushを指定すれば好きな色にできる。
たとえば、#FF0000FFをFillに指定すると、真っ青なウィンドウの出来上がり。ちなみに、色の指定はARGBの形式。
Brushを期待するプロパティに文字列を指定してうまく動いてるのは、どこかしらで間にコンバータとかが絡んでるからだろう。
それは置いといて…
グラデーションって意外と簡単に出来るようだ。
LinearGradientBrushと言うものを使えば、結構グラデーションできる。
とりあえず使うだけならすごく簡単。GradientStopsプロパティにGradientStopというものを追加するだけ。
GradientStopは、ColorとOffsetを指定すればOK。
Offsetには0～1の値を設定する。デフォだと0が左上で1が右下になってる。
ためしに下のようなブラシをRectangleのFillプロパティに設定してみた。
<LinearGradientBrush>
<GradientStop Color="#FF0000FF" Offset="0" />
<GradientStop Color="#FFFFFF00" Offset="1" />
</LinearGradientBrush>
実行するとグラデーションしてるのがわかる。
Offsetを適当な値にして間にGradientStopを挟み込めば色々グラデーションできる。
<LinearGradientBrush>
<GradientStop Color="#FF000000" Offset="0" />
<GradientStop Color="#FFFF0000" Offset="0.25" />
<GradientStop Color="#FF00FF00" Offset="0.5" />
<GradientStop Color="#FF0000FF" Offset="0.75" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
</LinearGradientBrush>
黒、赤、緑、青、白へと移り変わるグラデーション。
ちなみに、左上から右下に流れるようになってるのはLinearGradientBrushのStartPointとEndPointプロパティで指定できる。
デフォだとStartPointが0,0でEndPointが1,1になる。つまり左上から右下になる。
これを1,0と0,1に指定すると右上から左下へ色が変わって行く。
<LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
<GradientStop Color="#FF000000" Offset="0" />
<GradientStop Color="#FFFF0000" Offset="0.25" />
<GradientStop Color="#FF00FF00" Offset="0.5" />
<GradientStop Color="#FF0000FF" Offset="0.75" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
</LinearGradientBrush>
ということで、調子に乗ってボタンのテンプレートをさくっと書いてみた。
<Button Content="Click!">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="border" BorderThickness="5" CornerRadius="20,0,20,0" Padding="10">
<Border.BorderBrush>
<LinearGradientBrush>
<GradientStop Color="#77FFAA00" Offset="0" />
<GradientStop Color="#7700AA44" Offset="1" />
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush>
<GradientStop Color="#7700AA44" Offset="0" />
<GradientStop Color="#77FFAA00" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush>
<GradientStop Color="#7700AA44" Offset="0" />
<GradientStop Color="#77FFAA00" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="border" Property="Background">
<Setter.Value>
<LinearGradientBrush>
<GradientStop Color="#77FFAA00" Offset="0" />
<GradientStop Color="#7700AA44" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="border" Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush>
<GradientStop Color="#FF00AA44" Offset="0" />
<GradientStop Color="#FFFFAA00" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter TargetName="border" Property="Background">
<Setter.Value>
<LinearGradientBrush>
<GradientStop Color="#FFFFAA00" Offset="0" />
<GradientStop Color="#FF00AA44" Offset="1" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
<Button.FocusVisualStyle>
<Style TargetType="{x:Type Control}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border CornerRadius="20,0,20,0" BorderThickness="1" BorderBrush="Black" Padding="5"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.FocusVisualStyle>
</Button>
本当はスタイルとかに追い出してやらないと使いまわしきかないけど、とりあえずべたっと書いた。
実行すると下みたいな感じ。
通常
マウスカーソル乗せた時
クリックしたとき
前に作った丸いボタンよりかなりいい感じ？