Corner Flat Button in WPF

Question

I am designing an interface with WPF with a rounded flat button. I wrote the following code for this 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 style is exactly what I need. But at runtime, when the mouse moves to the button, it no longer rounds. This is a rectangle of the same size. In fact, the button overflows the border. So I added padding to the border:

 <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, the button in hoover mode no longer overflows the border, but it is still a rectangle, and therefore the color of the button (In hoover mode ) differs in this rectangle and other border spaces. So unfortunately it is not yet useful.

Now my question is: is there a way to create a flat button with a rounded corner (like the one I mentioned) that the designated space when moving to the button will be exactly a rounded rounded space?

Answer 1

This is probably before VisualStateManager for a button that changes style when the mouse hovers over the button. Instead, I would suggest using Style .

 <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> 

Using:

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