Windows Media Player や Windows Live フォト ギャラリーなどの半透明っぽいクリアなボタンが作れないかなと帰宅してからXAMLいじってました。XAMLでかなりのことまでできるんですよねー、忘れてました。
ゼロから作れるはずもなく参考にしたサイトは以下のふたつ。画像検索でググりました。
できあがりは、こちら。どうでしょう？ 立体感が少し足りない？
ひとつめのサイトのXAMLを理解しながらという形で作りました。コントロールの構成は同じでパラメータの変更、削除、追加が主ですね。ふたつめのサイトは結果的にほとんど参考にしてないのだけど、クオリティは高いと思います。どちらもボタンの上側の少し円弧に光っているところはPathGeometryというのを使ってます。こんなん書けるかー！！ 微妙に左右対称じゃなかったのでわかる範囲で修正してます。そのPathGeometry以外はEllipseの組み合わせなので人手で書けないことはないですね。
でもこれボタンにするには、ボタンの上にマウスポインタをあわせたとき、ボタンが押されたとき、ボタンが無効のときのパターンを作らないとなんだぜ……。大きさが絶対指定なのも難点ですね。
以下これのXAMLです。これは直接Canvasに書いてますが、ふたつめの参考サイトではデザインをリソースとして記述してButtonに適用してます。その方がスマートですね。
<Canvas Width="218" Height="218">
<Ellipse Width="218" Height="218" Fill="#FF00089A" x:Name="ballBack1"/>
<Ellipse Width="208" Height="208" Canvas.Left="5" Canvas.Top="5">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.5,1.2">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.45" ScaleX="1.2" ScaleY="0.6"/>
<SkewTransform AngleX="0" AngleY="0" CenterX="0.5" CenterY="0.5"/>
<RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/>
<TranslateTransform X="-0.004" Y="0.195"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FF8AFFFF" Offset="0.22"/>
<GradientStop Color="#E025A7F4" Offset="0.47"/>
<GradientStop Color="#D00060D0" Offset="0.65"/>
<GradientStop Color="#FF0008A0" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Width="208" Height="208" StrokeThickness="5" Canvas.Left="5" Canvas.Top="5">
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#EFFFFFFF" Offset="0"/>
<GradientStop Color="#7F8DFFFF" Offset="1"/>
<GradientStop Color="#8F8AFFFF" Offset="0.45"/>
<GradientStop Color="#20FFFFFF" Offset="0.18"/>
<GradientStop Color="#25FEFEFE" Offset="0.8"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<Path Opacity="0.72" Width="204" Height="102" Stretch="Fill" Canvas.Left="7" Canvas.Top="5"
Data="M214,296
C
213,243 253,197 314,195
374,197 413,243 413,296
413,309 374,290 314,290
253,290 213,309 214,296 z">
<Path.Fill>
<RadialGradientBrush GradientOrigin="0.5,0.9">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.6" ScaleY="3.6" />
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFFFFFFF" Offset="1"/>
<GradientStop Color="#A0FFFFFF" Offset="0.55"/>
<GradientStop Color="#00000000" Offset="0"/>
</RadialGradientBrush>
</Path.Fill>
</Path>
<Label Canvas.Top="10" Width="218" Height="218" Content="塊" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="130" FontWeight="ExtraBold">
<Label.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#E0F0F0F0" Offset="0"/>
<GradientStop Color="#FFFFFFFF" Offset="0.1"/>
<GradientStop Color="#FFFFFFFF" Offset="0.55"/>
<GradientStop Color="#E0C0C0C0" Offset="1"/>
</LinearGradientBrush>
</Label.Foreground>
</Label>
</Canvas>