WPF Round Corner Button with click effects

Kailash Chandra Behera | Tuesday, January 24, 2017

Introduction

This blog contains code snippet, how to create round corner button with click effects in WPF.

Code Snippet

 <Button Width="100" Height="50" Content="Click Me">  
       <Button.Style>  
         <Style TargetType="{x:Type Button}">  
           <Setter Property="Template">  
             <Setter.Value>  
               <ControlTemplate TargetType="{x:Type Button}">  
                 <ContentControl>  
                   <Border Name="innerborder" BorderBrush="Gray" BorderThickness="1,1,2,2" Background="{TemplateBinding Background}" CornerRadius="5">  
                     <StackPanel Orientation="Horizontal">  
                       <TextBlock FontWeight="Bold" Width="70" TextAlignment="Center" Text="{Binding Path=Content, Mode=OneWay, UpdateSourceTrigger=PropertyChanged, RelativeSource={RelativeSource TemplatedParent}}" Margin="10,10,0,5"></TextBlock>  
                     </StackPanel>  
                   </Border>  
                 </ContentControl>  
                 <ControlTemplate.Triggers>  
                   <Trigger Property="Button.IsPressed" Value="True" >  
                     <Setter TargetName="innerborder" Property="BorderBrush" Value="DarkGray" />  
                     <Setter TargetName="innerborder" Property="BorderThickness" Value="1" />  
                   </Trigger>  
                 </ControlTemplate.Triggers>  
               </ControlTemplate>  
             </Setter.Value>  
           </Setter>  
         </Style>  
       </Button.Style>  
     </Button>  





Related Articles

  1. Data Validation in WPF
  2. WPF Round Corner Button with click effects
  3. Round Corner PasswordBox in WPF
  4. Round Corner TextBox in WPF
  5. WPF Custom Datagrid Control(Filterable)
  6. WPF Round Corner ListBox
  7. Custom RadioButtonListBox With Image
  8. RadiobuttonList in WPF
  9. Custom CheckedListBox in WPF

Summary

This article contains XAML code snippet for creating round corner button with click effect, hope this article may helpful to you

Thanks