Comment créer/faire des boutons à coins arrondis dans WPF ?

Question

Je dois créer un bouton brillant à coins arrondis dans WPF. Quelqu'un peut-il m'expliquer les étapes à suivre ?

Answer 1

Malgré le fait que des années se soient écoulées, je pense qu'il est intéressant de réfléchir à une autre façon de l'aborder.

La façon de recréer tout le modèle de bouton est un excellent moyen si vous voulez tout changer mais c'est démoralisant pour le débutant ou si vous voulez juste arrondir un coin du bouton. Il est vrai que vous ne devez pas tout changer mais au moins vous devrez changer les événements...

La façon de modifier la conception de la "bordure" dans le button.resources est excellente aussi, si vous êtes un débutant, mais il peut être très ennuyeux de changer tous vos boutons si vous voulez augmenter votre conception avec plus de paramètres.

Il existe une solution avec un pied dans les deux camps :

Mettez ce code dans les ressources de la fenêtre/page :

<Style TargetType="Border" x:Key="RoundMe">
    <Setter Property="CornerRadius" Value="4"/>
</Style>

Ensuite, pour les boutons :

  <Button.Resources>
        <Style TargetType="Border" BasedOn="{StaticResource RoundMe}"/>
    </Button.Resources>

Answer 2

Comme alternative, vous pouvez coder quelque chose comme ceci :

    <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"
               Source="Recursos/Images/ic_add_circle_outline_black_24dp_2x.png"
               Width="{Binding borderBtnAdd.Width}" Height="{Binding borderBtnAdd.Height}"/>
    </Border>

Le "bouton" ressemblera à quelque chose comme ceci :

Vous pouvez définir tout autre contenu à la place de l'image.

Answer 3

Il s'agit d'une version adaptée de la réponse de @Kishore Kumar qui est plus simple et correspond mieux au style et aux couleurs des boutons par défaut. Elle corrige également le problème du déclencheur "IsPressed" qui est dans le mauvais ordre et qui ne sera jamais exécuté puisque le "MouseOver" aura la priorité :

<Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid x:Name="grid">
                        <Border x:Name="border" CornerRadius="2" BorderBrush="#707070" BorderThickness="1" Background="LightGray">
                            <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      TextElement.FontWeight="Normal">
                            </ContentPresenter>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#BEE6FD"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="#3C7FB1"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="BorderBrush" TargetName="border" Value="#2C628B"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" TargetName="grid" Value="0.25"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>

Answer 4

Dans votre app.xaml ajoutez cette partie de style :

   <Application.Resources>
     <Style TargetType="FrameworkElement" x:Key="VisibleAnimation">
  <Setter Property="Visibility" Value="Collapsed"/>
  <Setter Property="Opacity" Value="10"/>
  <Setter Property="Height" Value="700"></Setter>
  <Style.Triggers>
    <Trigger Property="Visibility" Value="Visible">
      <Trigger.EnterActions>
    <BeginStoryboard>
      <Storyboard>
        <DoubleAnimation Storyboard.TargetProperty="Opacity"
                         From="0.0" To="1.0" Duration="0:0:0.5"/>
       </Storyboard>
     </BeginStoryboard>
   </Trigger.EnterActions>
   </Trigger>
 </Style.Triggers>
</Style>

    <Style TargetType="Button" x:Key="BTNCORNER">
        <Setter Property="Background" Value="White" />
        <Setter Property="TextBlock.TextAlignment" Value="Center" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border CornerRadius="7,7,7,7" Background="White"    BorderBrush="#ccc" BorderThickness="1,1,1,1" >
                        <ContentPresenter x:Name="contentPresenter"   ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding  Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding  VerticalContentAlignment}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    </Application.Resources>

Bouton

 <Button x:Name="loginButton"  
         Style="{StaticResource BTNCORNER}"   
         Margin="50,20,20,20"  
         Click="loginButton_Click" 
         FontSize="20" Width="93" Height="42"  />

Answer 5

Vous pouvez utiliser les propriétés ci-jointes pour définir le rayon de la bordure des boutons (il en va de même pour les zones de texte).

Créer une classe pour la propriété attachée

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);
    }
}

Vous pouvez alors utiliser la syntaxe des propriétés jointes pour plusieurs boutons sans dupliquer les styles :

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