Dynamic 3D button in WPF using Control template
Note: This is not my original work. Have blogged it here just for my future reference and of course if someone wants to use it.
<Style TargetType="{x:Type
Button}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type
Button}">
<Grid>
<Rectangle x:Name="GelBackground"
Opacity="1" RadiusX="9"
RadiusY="9"
Fill="{TemplateBinding Background}" StrokeThickness="0.35">
<Rectangle.Stroke>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<GradientStop Color="#FF6495ED"
Offset="0" />
<GradientStop Color="#FF6495ED"
Offset="1" />
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Rectangle x:Name="GelShine"
Margin="2,2,2,0" VerticalAlignment="Top"
RadiusX="6" RadiusY="6"
Opacity="1" Stroke="Transparent"
Height="15px">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0"
EndPoint="0,1">
<GradientStop Color="#FF6495ED"
Offset="0"/>
<GradientStop Color="Transparent"
Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Background"
Value="DarkBlue">
</Setter>
</Trigger>
<Trigger Property="IsPressed"
Value="True">
<Setter Property="Fill"
TargetName="GelBackground">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1"
StartPoint="0,0">
<GradientStop Color="Blue"
Offset="0"/>
<GradientStop
Color="Blue" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Fill"
TargetName="GelBackground"
Value="Blue">
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background"
Value="#FF4169E1"/>
<Setter Property="Foreground"
Value="White"/>
<Setter Property="Width"
Value="55"/>
<Setter Property="Height"
Value="30"/>
</Style>
This will look like:
