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?

Answer 1

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>

Answer 2

You can try this...........

 <Border BorderBrush="Black" Name="MyBorder"  
            Height="78" 
            Background="Red" 
            Width="74" 
            CornerRadius="3">
        <Button Width="{Binding MyBorder.Width}" 
                Height="{Binding MyBorder.Height}" 
                Content="Hi" Background="Red"/>
    </Border>

Answer 3

As alternative, you can code something like this:

    <Border 
        x:Name="borderBtnAdd"
        BorderThickness="1" 
            BorderBrush="DarkGray" 
            CornerRadius="360" 
            Height="30" 
            Margin="0,10,10,0" 
            VerticalAlignment="Top" HorizontalAlignment="Right" Width="30">
        <Image x:Name="btnAdd"  Width="{Binding borderBtnAdd.Width}" Height="{Binding borderBtnAdd.Height}" Source="Recursos/Images/ic_add_circle_outline_black_24dp_2x.png"/>
    </Border>

The "Button" will look something like this:

You could set any other content instead of the image.

Answer 4

<Button x:Name="btnBack" Grid.Row="2" Width="300"
                        Click="btnBack_Click">
                <Button.Template>
                    <ControlTemplate>
                        <Border CornerRadius="10" Background="#463190">
                            <TextBlock Text="Retry" Foreground="White" 
                                       HorizontalAlignment="Center"                                           
                                       Margin="0,5,0,0"
                                       Height="40"
                                       FontSize="20"></TextBlock>
                        </Border>
                    </ControlTemplate>
                </Button.Template>
            </Button>

This is working fine for me.