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

Je sais que ce post est super vieux, mais j'ai une réponse qui est étonnamment absente de ce qui précède et qui est aussi beaucoup plus simple que la plupart.

<Button>
    <Button.Resources>
        <Style TargetType="Border">
            <Setter Property="CornerRadius" Value="5"/>
        </Style>
    </Button.Resources>
</Button>

Étant donné que le ControlTemplate par défaut du contrôle Button utilise un élément Border, l'ajout d'un style pour Border aux ressources du Button applique ce style à ce Border. Cela vous permet d'ajouter des coins arrondis sans avoir à créer votre propre ControlTemplate et sans aucun code. Elle fonctionne également sur toutes les variétés de boutons (par exemple ToggleButton et RepeatButton).

Answer 2

Vous devez créer votre propre ControlTemplate pour le bouton. Jetez un coup d'œil à l'exemple suivant

J'ai créé un style appelé RoundCorner et à l'intérieur de ce style, j'ai plutôt créé mon propre modèle de contrôle avec une bordure (CornerRadius=8) pour les coins arrondis et un fond et d'autres effets de déclenchement. Si vous avez ou connaissez Expression Blend, cela peut être fait très facilement.

<Style x:Key="RoundCorner" TargetType="{x:Type Button}">
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid x:Name="grid">
                    <Border x:Name="border" CornerRadius="8" BorderBrush="Black" BorderThickness="2">
                        <Border.Background>
                            <RadialGradientBrush GradientOrigin="0.496,1.052">
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform CenterX="0.5" CenterY="0.5" 
                                                        ScaleX="1.5" ScaleY="1.5"/>
                                        <TranslateTransform X="0.02" Y="0.3"/>
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Offset="1" Color="#00000000"/>
                                <GradientStop Offset="0.3" Color="#FFFFFFFF"/>
                            </RadialGradientBrush>
                        </Border.Background>
                        <ContentPresenter HorizontalAlignment="Center"
                                          VerticalAlignment="Center"
                                          TextElement.FontWeight="Bold">
                        </ContentPresenter>
                    </Border>

                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" TargetName="border">
                            <Setter.Value>
                                <RadialGradientBrush GradientOrigin="0.496,1.052">
                                    <RadialGradientBrush.RelativeTransform>
                                        <TransformGroup>
                                            <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
                                            <TranslateTransform X="0.02" Y="0.3"/>
                                        </TransformGroup>
                                    </RadialGradientBrush.RelativeTransform>
                                    <GradientStop Color="#00000000" Offset="1"/>
                                    <GradientStop Color="#FF303030" Offset="0.3"/>
                                </RadialGradientBrush>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF33962B"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Opacity" TargetName="grid" Value="0.25"/>
                    </Trigger>

                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Utilisation de

<Button Style="{DynamicResource RoundCorner}" 
        Height="25" 
        VerticalAlignment="Top" 
        Content="Show" 
        Width="100" 
        Margin="5" />

Answer 3

La solution la plus simple, sans modifier le style par défaut, est la suivante :

<Style TargetType="Button" x:Key="RoundButton">
    <Style.Resources>
        <Style TargetType="Border">
            <Setter Property="CornerRadius" Value="5" />
        </Style>
    </Style.Resources>
</Style>

Ensuite, définissez votre bouton comme ceci :

<Button Style="{DynamicResource RoundButton}" />

Answer 4

Il s'agit plutôt d'un modèle de contrôle minimal pour obtenir un bouton aux coins arrondis, mais vous n'aurez pas d'effets visuels de survol ou de clic. Mais vous pouvez les ajouter au modèle de contrôle si nécessaire. Je travaillais avec un fond sombre, d'où le fond blanc.

<Style x:Key="RoundedButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border CornerRadius="15" Background="White" BorderThickness="1" Padding="2">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

J'ai utilisé le modèle de contrôle de l'article de blog suivant comme point de départ : http://shihac-sharp.blogspot.com.au/2012/05/button-with-rounded-corners-in-wpf.html

Answer 5

Vous pouvez essayer ceci...........

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