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

La meilleure façon d'arrondir les angles rapidement et avec une animation standard est de créer une copie du modèle de contrôle avec Blend. Une fois que vous avez obtenu une copie, définissez le rayon d'angle sur la balise Grid et vous devriez être en mesure d'avoir votre contrôle avec une fonctionnalité d'animation complète et applicable à n'importe quel bouton de contrôle :

<ControlTemplate x:Key="ButtonControlTemplate" TargetType="Button">        
    <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"
          CornerRadius="8,8,8,8">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal">
                    <Storyboard>
                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="PointerOver">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" />
                        </ObjectAnimationUsingKeyFrames>
                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}" />
                        </ObjectAnimationUsingKeyFrames>
                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <!--<Border CornerRadius="8,8,8,8"
                        Background="#002060"
                        BorderBrush="Red"
                        BorderThickness="2">-->
            <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"/>
        <!--</Border>-->
    </Grid>        
</ControlTemplate>

J'ai aussi modifié le VisualState="PointerOver" spécifiquement à Storyboard.TargetName="BorderBrush", parce que ses ThemeResource obtiennent des coins carrés chaque fois que PointerOver se déclenche.

Vous devriez ensuite pouvoir l'appliquer à votre style de contrôle comme ceci :

<Style TargetType="ContentControl" x:Key="ButtonLoginStyle"
       BasedOn="{StaticResource CommonLoginStyleMobile}">
    <Setter Property="FontWeight" Value="Bold"/>
    <Setter Property="Background" Value="#002060"/>
    <Setter Property="Template" Value="{StaticResource ButtonControlTemplate}"/>        
</Style>

Vous pouvez donc appliquer vos styles à n'importe quel bouton.

Answer 2

Bien que cette question ait reçu une réponse depuis longtemps, j'ai utilisé une autre approche qui pourrait être plus simple que toutes ces solutions (même l'excellente réponse de Keith Stein). Je la publie donc au cas où elle pourrait aider quelqu'un.

Vous pouvez obtenir des coins arrondis sur un bouton sans devoir écrire de XAML (autre qu'un style, une fois) et sans devoir remplacer le modèle ou définir/modifier d'autres propriétés. Utilisez simplement un EventSetter dans votre style pour l'événement "Loaded" du bouton et modifiez-le dans le code-behind.

(Et si votre style se trouve dans un fichier XAML distinct du dictionnaire de ressources, vous pouvez placer le code de l'événement dans un fichier de type fichier code-behind pour votre dictionnaire de ressources .)

Je le fais comme ça :

Style Xaml :

<Style x:Key="ButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
    <EventSetter Event="Loaded"                   Handler="ButtonLoaded"/>
</Style>

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

Si vous avez dû ajouter le fichier code-behind à un fichier xaml de dictionnaire de ressources existant, vous pouvez même faire apparaître automatiquement le fichier code-behind sous ce fichier XAML dans la solution Visual Studio si vous le souhaitez. Dans un projet .NET Core, il suffit de lui donner le nom correspondant approprié (par exemple, si le dictionnaire de ressources est "MyDictionary.xaml", nommez le fichier code-behind "MyDictionary.xaml.cs"). Dans un projet .NET Framework, vous devez modifier le fichier .csproj en mode XML

Answer 3

Je sais que c'est une vieille question mais si vous cherchez à faire le bouton en c# plutôt qu'en xaml, vous pouvez définir l'attribut CornerRadius qui va arrondir votre bouton.

Button buttonRouded = new Button
{
   CornerRadius = 10,
};

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>

Cela fonctionne bien pour moi.