Corner-rounded flat button in WPF

Question

I am designing a UI with WPF having a rounded flat button. I wrote following code for this kind of button:

<Border BorderThickness="1"
        BorderBrush="Transparent"
        Background="DarkCyan"
        CornerRadius="4"
        Height="35"
        Width="75">
            <Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
                    Content="Enter"
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch"
                    Background="DarkCyan"
                    Foreground="White"/>
</Border>

This button's style is exactly what I need. But at runtime, when the mouse moves to the button, it is not rounded anymore. It is a rectangle with same size. In fact, the button overflows the border. So I added padding to the border like this:

<Border BorderThickness="1"
        BorderBrush="Transparent"
        Background="DarkCyan"
        CornerRadius="4"
        Height="35"
        Width="75"
        Padding="2">
            <Button Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}"
                    Content="Enter"
                    VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch"
                    Background="DarkCyan"
                    Foreground="White"/>
</Border>

In this case, button in hoover mode does not overflow the border anymore, But it is still rectangle and so button’s color (In hoover mode) differs in this rectangle and other spaces of border. So unluckily it is not useful yet.

Now my question is: Is there any way to build a corner-rounded flat button (like the one I mentioned) that marked space in moving onto the button would be exactly the corner rounded space?

possible duplicate of [WPF Button Styling Trigger](http://stackoverflow.com/questions/10777423/wpf-button-styling-trigger) — Clint, May 27 '15 at 10:29
Not strictly a 1:1 duplication, but what you need is to override the hover style of the button. — Clint, May 27 '15 at 10:30

score 12 · Answer 1 · edited Sep 05 '18 at 16:29

12

This is probably down to the VisualStateManager for the button which is changing the style when the mouse is hovering over the button. I would suggest using a Style instead.

<Style TargetType="Button" x:Key="FlatButtonStyle">
    <Setter Property="Background" Value="DarkCyan"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Width" Value="75"/>
    <Setter Property="Height" Value="35"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border BorderThickness="0"
                        Background="{TemplateBinding Background}"
                        CornerRadius="4">
                     <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
               </Border>
           </ControlTemplate>
       </Setter.Value>
    </Setter>
</Style>

Usage:

<Button Style="{StaticResource FlatButtonStyle}" ... />

edited Sep 05 '18 at 16:29

Ben Voigt

277,958
43
419
720

answered May 27 '15 at 10:37

Mike Eason

9,525
2
38
63

1

Excuse me, But I am very new to WPF (I began it today). can you please tell me where should I write styles? – parseh May 27 '15 at 10:43
You can write them inside the `Resources` element for your Window/Parent Element. Check [this](http://www.wpf-tutorial.com/wpf-application/resources/) out. – Mike Eason May 27 '15 at 10:47
not perfect solution .. it shows error for me at x:key ,"The "Key" attribute can only be used on an element that is contained in "IDictionary". in wpf" – Rahul Chaudhari Feb 17 '16 at 14:00

Corner-rounded flat button in WPF

1 Answers1