How to create make rounded corner buttons in WPF

Question

I need to create a rounded corner glossy button in WPF  Can anyone please explain me what steps are needed

User · Answer

You can use attached properties for setting button border radius (also the same will work for textboxes).

Create class for attached property

public class CornerRadiusSetter
{
    public static CornerRadius GetCornerRadius(DependencyObject obj) => (CornerRadius)obj.GetValue(CornerRadiusProperty);

    public static void SetCornerRadius(DependencyObject obj, CornerRadius value) => obj.SetValue(CornerRadiusProperty, value);

    public static readonly DependencyProperty CornerRadiusProperty =
        DependencyProperty.RegisterAttached(nameof(Border.CornerRadius), typeof(CornerRadius),
            typeof(CornerRadiusSetter), new UIPropertyMetadata(new CornerRadius(), CornerRadiusChangedCallback));

    public static void CornerRadiusChangedCallback(object sender, DependencyPropertyChangedEventArgs e)
    {
        Control control = sender as Control;

        if (control == null) return;

        control.Loaded -= Control_Loaded;
        control.Loaded += Control_Loaded;
    }

    private static void Control_Loaded(object sender, EventArgs e)
    {
        Control control = sender as Control;

        if (control == null || control.Template == null) return;

        control.ApplyTemplate();

        Border border = control.Template.FindName("border", control) as Border;

        if (border == null) return;

        border.CornerRadius = GetCornerRadius(control);
    }
}

Then you can use attached property syntax for multiple buttons without style duplicates:

<Button local:CornerRadiusSetter.CornerRadius="10">Click me!</Button>
<Button local:CornerRadiusSetter.CornerRadius="5, 0, 0, 5">Click me!</Button>
<Button local:CornerRadiusSetter.CornerRadius="3, 20, 8, 15">Click me!</Button>

User · Answer

As alternative  you can code something like this        lt Border              x Name  borderBtnAdd              BorderThickness  1               BorderBrush  DarkGray               CornerRadius  360               Height  30               Margin  0 10 10 0               VerticalAlignment  Top  HorizontalAlignment  Right  Width  30  gt           lt Image x Name  btnAdd                 Source  Recursos Images ic add circle outline black 24dp 2x png                 Width   Binding borderBtnAdd Width   Height   Binding borderBtnAdd Height    gt       lt  Border gt    The  Button  will look something like this      You could set any other content instead of the image

User · Answer

The simplest solution without changing the default style is   lt Style TargetType  quot Button quot  x Key  quot RoundButton quot  gt       lt Style Resources gt           lt Style TargetType  quot Border quot  gt               lt Setter Property  quot CornerRadius quot  Value  quot 5 quot    gt           lt  Style gt       lt  Style Resources gt   lt  Style gt   Then just define your button like this   lt Button Style  quot  DynamicResource RoundButton  quot    gt

User · Answer

in your app xaml add this part of style        lt Application Resources gt        lt Style TargetType  FrameworkElement  x Key  VisibleAnimation  gt     lt Setter Property  Visibility  Value  Collapsed   gt     lt Setter Property  Opacity  Value  10   gt     lt Setter Property  Height  Value  700  gt  lt  Setter gt     lt Style Triggers gt       lt Trigger Property  Visibility  Value  Visible  gt         lt Trigger EnterActions gt       lt BeginStoryboard gt         lt Storyboard gt           lt DoubleAnimation Storyboard TargetProperty  Opacity                           From  0 0  To  1 0  Duration  0 0 0 5   gt          lt  Storyboard gt        lt  BeginStoryboard gt      lt  Trigger EnterActions gt      lt  Trigger gt    lt  Style Triggers gt   lt  Style gt        lt Style TargetType  Button  x Key  BTNCORNER  gt           lt Setter Property  Background  Value  White    gt           lt Setter Property  TextBlock TextAlignment  Value  Center    gt           lt Setter Property  Template  gt               lt Setter Value gt                   lt ControlTemplate TargetType  Button  gt                       lt Border CornerRadius  7 7 7 7  Background  White     BorderBrush   ccc  BorderThickness  1 1 1 1   gt                           lt ContentPresenter x Name  contentPresenter    ContentTemplate   TemplateBinding ContentTemplate   Content   TemplateBinding  Content   HorizontalAlignment   TemplateBinding HorizontalContentAlignment    Margin   TemplateBinding Padding   VerticalAlignment   TemplateBinding  VerticalContentAlignment    gt                       lt  Border gt                   lt  ControlTemplate gt               lt  Setter Value gt           lt  Setter gt       lt  Style gt        lt  Application Resources gt    Button    lt Button x Name  loginButton             Style   StaticResource BTNCORNER               Margin  50 20 20 20             Click  loginButton Click            FontSize  20  Width  93  Height  42     gt

User · Answer

lt Button x Name  btnBack  Grid Row  2  Width  300                          Click  btnBack Click  gt                   lt Button Template gt                       lt ControlTemplate gt                           lt Border CornerRadius  10  Background   463190  gt                               lt TextBlock Text  Retry  Foreground  White                                          HorizontalAlignment  Center                                                                                    Margin  0 5 0 0                                         Height  40                                         FontSize  20  gt  lt  TextBlock gt                           lt  Border gt                       lt  ControlTemplate gt                   lt  Button Template gt               lt  Button gt    This is working fine for me

User · Answer

despite the fact years have gone  i thing it s interesting to think about different way to approach it  The way to recreate all the button template is an excellent way if you want to change everything but it s demoralizing for the beginner or if you just want to round corner of the button  It s true you don t have to change everything but at least you will must change events    The way to modify  quot border quot  design in the button resources is excellent too  if you are a beginner but it can be very boring to change all your buttons if you want to raise your design with more parameters  There is a solution with a foot in both camps  Put this code in window page resources   lt Style TargetType  quot Border quot  x Key  quot RoundMe quot  gt       lt Setter Property  quot CornerRadius quot  Value  quot 4 quot   gt   lt  Style gt   Then for the buttons     lt Button Resources gt           lt Style TargetType  quot Border quot  BasedOn  quot  StaticResource RoundMe  quot   gt       lt  Button Resources gt

User · Answer

You can try this               lt Border BorderBrush  Black  Name  MyBorder                Height  78               Background  Red               Width  74               CornerRadius  3  gt           lt Button Width   Binding MyBorder Width                    Height   Binding MyBorder Height                    Content  Hi  Background  Red   gt       lt  Border gt

User · Answer

I know this post is super old  but I have an answer that s surprisingly missing from the above and is also much simpler than most    lt Button gt       lt Button Resources gt           lt Style TargetType  Border  gt               lt Setter Property  CornerRadius  Value  5   gt           lt  Style gt       lt  Button Resources gt   lt  Button gt    Since the default ControlTemplate for the Button control uses a Border element  adding a style for Border to the Button s resources applies that style to that Border  This lets you add rounded corners without having to make your own ControlTemplate and without any code  It also works on all varieties of Button  e g  ToggleButton and RepeatButton

User · Answer

You have to create your own ControlTemplate for the Button  just have a look at the sample   created a style called RoundCorner and inside that i changed rather created my own new  Control Template with Border  CornerRadius 8  for round corner and some background and other trigger effect  If you have or know Expression Blend it can be done very easily    lt Style x Key  RoundCorner  TargetType   x Type Button   gt       lt Setter Property  HorizontalContentAlignment  Value  Center   gt       lt Setter Property  VerticalContentAlignment  Value  Center   gt       lt Setter Property  Padding  Value  1   gt       lt Setter Property  Template  gt           lt Setter Value gt               lt ControlTemplate TargetType   x Type Button   gt                   lt Grid x Name  grid  gt                       lt Border x Name  border  CornerRadius  8  BorderBrush  Black  BorderThickness  2  gt                           lt Border Background gt                               lt RadialGradientBrush GradientOrigin  0 496 1 052  gt                                   lt RadialGradientBrush RelativeTransform gt                                       lt TransformGroup gt                                           lt ScaleTransform CenterX  0 5  CenterY  0 5                                                           ScaleX  1 5  ScaleY  1 5   gt                                           lt TranslateTransform X  0 02  Y  0 3   gt                                       lt  TransformGroup gt                                   lt  RadialGradientBrush RelativeTransform gt                                   lt GradientStop Offset  1  Color   00000000   gt                                   lt GradientStop Offset  0 3  Color   FFFFFFFF   gt                               lt  RadialGradientBrush gt                           lt  Border Background gt                           lt ContentPresenter HorizontalAlignment  Center                                            VerticalAlignment  Center                                            TextElement FontWeight  Bold  gt                           lt  ContentPresenter gt                       lt  Border gt                    lt  Grid gt                   lt ControlTemplate Triggers gt                       lt Trigger Property  IsPressed  Value  True  gt                           lt Setter Property  Background  TargetName  border  gt                               lt Setter Value gt                                   lt RadialGradientBrush GradientOrigin  0 496 1 052  gt                                       lt RadialGradientBrush RelativeTransform gt                                           lt TransformGroup gt                                               lt ScaleTransform CenterX  0 5  CenterY  0 5  ScaleX  1 5  ScaleY  1 5   gt                                               lt TranslateTransform X  0 02  Y  0 3   gt                                           lt  TransformGroup gt                                       lt  RadialGradientBrush RelativeTransform gt                                       lt GradientStop Color   00000000  Offset  1   gt                                       lt GradientStop Color   FF303030  Offset  0 3   gt                                   lt  RadialGradientBrush gt                               lt  Setter Value gt                           lt  Setter gt                       lt  Trigger gt                       lt Trigger Property  IsMouseOver  Value  True  gt                           lt Setter Property  BorderBrush  TargetName  border  Value   FF33962B   gt                       lt  Trigger gt                       lt Trigger Property  IsEnabled  Value  False  gt                           lt Setter Property  Opacity  TargetName  grid  Value  0 25   gt                       lt  Trigger gt                    lt  ControlTemplate Triggers gt               lt  ControlTemplate gt           lt  Setter Value gt       lt  Setter gt   lt  Style gt    Using   lt Button Style   DynamicResource RoundCorner            Height  25           VerticalAlignment  Top           Content  Show           Width  100           Margin  5    gt

User · Answer

Well the best way to get round corners fast and with standard animation is to create a copy of the control template with Blend  Once you get a copy set the corner radius on the Grid tag and you should be able to have your control with full animation functionality and applyable to any button control  look this is the code    lt ControlTemplate x Key  ButtonControlTemplate  TargetType  Button  gt               lt Grid x Name  RootGrid  Background   TemplateBinding Background             CornerRadius  8 8 8 8  gt           lt VisualStateManager VisualStateGroups gt               lt VisualStateGroup x Name  CommonStates  gt                   lt VisualState x Name  Normal  gt                       lt Storyboard gt                           lt PointerUpThemeAnimation Storyboard TargetName  RootGrid    gt                       lt  Storyboard gt                   lt  VisualState gt                   lt VisualState x Name  PointerOver  gt                       lt Storyboard gt                           lt ObjectAnimationUsingKeyFrames Storyboard TargetName  RootGrid  Storyboard TargetProperty  Background  gt                               lt DiscreteObjectKeyFrame KeyTime  0  Value   ThemeResource ButtonBackgroundPointerOver     gt                           lt  ObjectAnimationUsingKeyFrames gt                           lt ObjectAnimationUsingKeyFrames Storyboard TargetName  ContentPresenter  Storyboard TargetProperty  BorderBrush  gt                               lt DiscreteObjectKeyFrame KeyTime  0  Value   ThemeResource ButtonBorderBrushPressed     gt                           lt  ObjectAnimationUsingKeyFrames gt                           lt ObjectAnimationUsingKeyFrames Storyboard TargetName  ContentPresenter  Storyboard TargetProperty  Foreground  gt                               lt DiscreteObjectKeyFrame KeyTime  0  Value   ThemeResource ButtonForegroundPointerOver     gt                           lt  ObjectAnimationUsingKeyFrames gt                           lt PointerUpThemeAnimation Storyboard TargetName  RootGrid    gt                       lt  Storyboard gt                   lt  VisualState gt                   lt VisualState x Name  Pressed  gt                       lt Storyboard gt                           lt ObjectAnimationUsingKeyFrames Storyboard TargetName  RootGrid  Storyboard TargetProperty  Background  gt                               lt DiscreteObjectKeyFrame KeyTime  0  Value   ThemeResource ButtonBackgroundPressed     gt                           lt  ObjectAnimationUsingKeyFrames gt                           lt ObjectAnimationUsingKeyFrames Storyboard TargetName  ContentPresenter  Storyboard TargetProperty  BorderBrush  gt                               lt DiscreteObjectKeyFrame KeyTime  0  Value   ThemeResource ButtonBorderBrushPressed     gt                           lt  ObjectAnimationUsingKeyFrames gt                           lt ObjectAnimationUsingKeyFrames Storyboard TargetName  ContentPresenter  Storyboard TargetProperty  Foreground  gt                               lt DiscreteObjectKeyFrame KeyTime  0  Value   ThemeResource ButtonForegroundPressed     gt                           lt  ObjectAnimationUsingKeyFrames gt                           lt PointerDownThemeAnimation Storyboard TargetName  RootGrid    gt                       lt  Storyboard gt                   lt  VisualState gt                   lt VisualState x Name  Disabled  gt                       lt Storyboard gt                           lt ObjectAnimationUsingKeyFrames Storyboard TargetName  RootGrid  Storyboard TargetProperty  Background  gt                               lt DiscreteObjectKeyFrame KeyTime  0  Value   ThemeResource ButtonBackgroundDisabled     gt                           lt  ObjectAnimationUsingKeyFrames gt                           lt ObjectAnimationUsingKeyFrames Storyboard TargetName  ContentPresenter  Storyboard TargetProperty  BorderBrush  gt                               lt DiscreteObjectKeyFrame KeyTime  0  Value   ThemeResource ButtonBorderBrushDisabled     gt                           lt  ObjectAnimationUsingKeyFrames gt                           lt ObjectAnimationUsingKeyFrames Storyboard TargetName  ContentPresenter  Storyboard TargetProperty  Foreground  gt                               lt DiscreteObjectKeyFrame KeyTime  0  Value   ThemeResource ButtonForegroundDisabled     gt                           lt  ObjectAnimationUsingKeyFrames gt                       lt  Storyboard gt                   lt  VisualState gt               lt  VisualStateGroup gt           lt  VisualStateManager VisualStateGroups gt           lt  -- lt Border CornerRadius  8 8 8 8                          Background   002060                          BorderBrush  Red                          BorderThickness  2  gt -- gt               lt ContentPresenter x Name  ContentPresenter                                BorderBrush   TemplateBinding BorderBrush                                 BorderThickness   TemplateBinding BorderThickness                                 Content   TemplateBinding Content                                 ContentTransitions   TemplateBinding ContentTransitions                                 ContentTemplate   TemplateBinding ContentTemplate                                 Padding   TemplateBinding Padding                                 HorizontalContentAlignment   TemplateBinding HorizontalContentAlignment                                 VerticalContentAlignment   TemplateBinding VerticalContentAlignment                                 AutomationProperties AccessibilityView  Raw   gt           lt  -- lt  Border gt -- gt       lt  Grid gt           lt  ControlTemplate gt    I also edited the VisualState  PointerOver  specifically at Storyboard TargetName  BorderBrush   because its ThemeResource get squared corners whenever PointerOver triggers   Then you should be able to apply it to your control style like this    lt Style TargetType  ContentControl  x Key  ButtonLoginStyle         BasedOn   StaticResource CommonLoginStyleMobile   gt       lt Setter Property  FontWeight  Value  Bold   gt       lt Setter Property  Background  Value   002060   gt       lt Setter Property  Template  Value   StaticResource ButtonControlTemplate    gt           lt  Style gt    So you can apply your styles to any Button

User · Answer

I know its a old question but if you are looking to make the button on c  instead of xaml you can set the CornerRadius that will round your button  Button buttonRouded   new Button      CornerRadius   10

User · Answer

This is an adapted version of  Kishore Kumar  s answer that is simpler and more closely matches the default button style and colours  It also fixes the issue that his  IsPressed  trigger is in the wrong order and will never be executed since the  MouseOver  will take precedent    lt Setter Property  Template  gt               lt Setter Value gt                   lt ControlTemplate TargetType   x Type Button   gt                       lt Grid x Name  grid  gt                           lt Border x Name  border  CornerRadius  2  BorderBrush   707070  BorderThickness  1  Background  LightGray  gt                               lt ContentPresenter HorizontalAlignment  Center                                        VerticalAlignment  Center                                        TextElement FontWeight  Normal  gt                               lt  ContentPresenter gt                           lt  Border gt                       lt  Grid gt                       lt ControlTemplate Triggers gt                           lt Trigger Property  IsMouseOver  Value  True  gt                               lt Setter Property  Background  TargetName  border  Value   BEE6FD   gt                               lt Setter Property  BorderBrush  TargetName  border  Value   3C7FB1   gt                           lt  Trigger gt                           lt Trigger Property  IsPressed  Value  True  gt                               lt Setter Property  BorderBrush  TargetName  border  Value   2C628B   gt                           lt  Trigger gt                           lt Trigger Property  IsEnabled  Value  False  gt                               lt Setter Property  Opacity  TargetName  grid  Value  0 25   gt                           lt  Trigger gt                       lt  ControlTemplate Triggers gt                   lt  ControlTemplate gt               lt  Setter Value gt           lt  Setter gt

User · Answer

This is more of a minimal control template to get a button with rounded corners  however you will not have any hover or click visual effects  But you can add these to the control template as needed  I was working with a dark background  hence the white background    lt Style x Key  RoundedButtonStyle  TargetType   x Type Button   gt       lt Setter Property  Template  gt           lt Setter Value gt               lt ControlTemplate TargetType  Button  gt                   lt Border CornerRadius  15  Background  White  BorderThickness  1  Padding  2  gt                       lt ContentPresenter HorizontalAlignment  Center  VerticalAlignment  Center    gt                   lt  Border gt               lt  ControlTemplate gt           lt  Setter Value gt       lt  Setter gt   lt  Style gt    I used the control template from the following blog post as my starting point  http   shihac-sharp blogspot com au 2012 05 button-with-rounded-corners-in-wpf html

User · Answer

Although this question is long-since answered  I used an alternative approach that people might find simpler than any of these solutions  even Keith Stein s excellent answer    So I m posting it in case it might help anyone   You can achieve rounded corners on a button without having to write any XAML  other than a Style  once  and without having to replace the template or set change any other properties   Just use an EventSetter in your style for the button s  Loaded  event and change it in code-behind     And if your style lives in a separate Resource Dictionary XAML file  then you can put the event code in a code-behind file for your resource dictionary     I do it like this   Xaml Style    lt Style x Key  ButtonStyle  TargetType   x Type Button   BasedOn   StaticResource  x Type Button    gt       lt EventSetter Event  Loaded                    Handler  ButtonLoaded   gt   lt  Style gt    Code-Behind   public partial class ButtonStyles       private void ButtonLoaded object sender  RoutedEventArgs e                if    sender is Button b               return              Find the first top-level border we can           Border border   default          for  var i   0  null    border  amp  amp  i  lt  VisualTreeHelper GetChildrenCount b     i              border   VisualTreeHelper GetChild b  i  as Border              If we found it  set its corner radius how we want             if  border    null              border CornerRadius   new CornerRadius 3             If you had to add the code-behind file to an existing resource dictionary xaml file  you can even have the code-behind file automatically appear underneath that XAML file in the Visual Studio Solution if you want   In a  NET Core project  just give it appropriate corresponding name  e g if the resource Dictionary is  MyDictionary xaml   name the code-behind file  MyDictionary xaml cs     In a  NET Framework project  you need to edit the  csproj file in XML mode

[.net] How to create/make rounded corner buttons in WPF?

Examples related to .net

Examples related to wpf

Examples related to button

Examples related to styles

Examples related to wpf-controls