WPF Minimal Button Styling

With all of the blog posts about Button styling in WPF since its release, it amazes me that there is very little out there about totally removing the Button default styling.  I needed an image to be my button, but without overriding the control template for the button, you can’t remove the borders or get rid of the bluish mouse over effects.  Below is a style for a borderless button, whose mouse over and IsPressed effect is a small size transformation to the content. 

Borderless Button Style

1. <Style x:Key="BorderlessButton" TargetType="{x:Type Button}">
2.     <Setter Property="Padding" Value="1"/>
3.     <Setter Property="Background" Value="Transparent" />
4.     <Setter Property="Template">
5.         <Setter.Value>
6.             <ControlTemplate TargetType="{x:Type Button}">
7.                 <Border Name="border" Background="{TemplateBinding Background}">
8.                     <ContentPresenter Name="content" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
9.                                       Margin="{TemplateBinding Padding}"
10.                                       RecognizesAccessKey="True"
11.                                       SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
12.                                       VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
13.                 </Border>
14.                 <ControlTemplate.Triggers>
15.                     <Trigger Property="IsMouseOver" Value="True">
16.                         <Setter TargetName="content" Property="RenderTransform" >
17.                             <Setter.Value>
18.                                 <ScaleTransform ScaleX="1.1" ScaleY="1.1" />
19.                             </Setter.Value>
20.                         </Setter>
21.                     </Trigger>
22.                     <Trigger Property="IsPressed" Value="True">
23.                         <Setter TargetName="content" Property="RenderTransform" >
24.                             <Setter.Value>
25.                                 <ScaleTransform ScaleX=".95" ScaleY=".95" />
26.                             </Setter.Value>
27.                         </Setter>
28.                     </Trigger>
29.                     <Trigger Property="IsFocused" Value="True">
30.                     </Trigger>
31.                 </ControlTemplate.Triggers>
32.             </ControlTemplate>
33.         </Setter.Value>
34.     </Setter>
35. </Style>

About these ads