WPF Minimal Button Styling

/ By / In WPF / 7 Comments

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>

Facebooktwittergoogle_plusredditpinterestlinkedinmailFacebooktwittergoogle_plusredditpinterestlinkedinmailby feather

7 Responses to WPF Minimal Button Styling

  1. Pingback: Windows Client Developer Roundup 058 for 2/7/2011 - Pete Brown's 10rem.net

  2. Pingback: Windows Client Developer Roundup 058 for 2/7/2011 · All About Computer

  3. Karinski says:
    August 14, 2012 at 11:03 am
    Reply

    Hi! I’m very new to WPF. It would be nice if you also display the screenshot of the button using this style 🙂

  4. Loral G. says:
    February 20, 2014 at 3:22 pm
    Reply

    Thank you for posting this! I was searching everywhere for this exact thing and couldn’t find anything until I ran across this. Thanks again!

  5. Bradley says:
    June 13, 2014 at 10:16 am
    Reply

    Thankyou for this, just started with WPF and this was a great help.

    It does have to be within Windows.Resources which took a novice like me some time to figure.

  6. Leonardo Stefani says:
    August 17, 2015 at 9:40 am
    Reply

    Hi, thank you! This worked for me.

  7. Zenobia Socia says:
    June 9, 2017 at 6:55 pm
    Reply

    You have a great blog here! Not only is the thinking unique, but also well laid out. Would like to read more from you.

Leave a Reply

Your email address will not be published. Required fields are marked *