Discussion :

[waspy59]

Bonjour à tous,


J'ai créé un template de bouton circulaire comme ci-dessous:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
 <Style TargetType="Button" x:Key="ElipseButton">
            <!--Set to true to not get any properties from the themes.-->
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse Fill="{TemplateBinding Background}" />
                            <ContentPresenter HorizontalAlignment="Center"
                            VerticalAlignment="Center"/>
                        </Grid>
                        <!-- Definit les actions du bouton et comment le bouton reagit a celles-ci -->
                        <ControlTemplate.Triggers>
                            <!-- Definit les propriétés quand la souris est au dessus du bouton -->
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="{StaticResource colorRed}" />
                            </Trigger>
                            <!-- Definit les propriétés quand le bouton a le focus -->
                            <Trigger Property="IsFocused" Value="True">
                                <Setter Property="Background" Value="{StaticResource colorDarkBlue}" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Pour les boutons eux-même je les crée ainsi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<Button Margin=" 5,5,5,5" Width="70" Height="70" Style="{StaticResource ElipseButton}" Click="Button_Click">
                <StackPanel Orientation="Vertical">
                    <Image Source="/Image/Barcode.png" Width="50" Height="50"/>
                    <TextBlock Text="Barcode" FontSize="10" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White"/>
                </StackPanel>
            </Button>

Il s'agit donc de boutons transparents circulaires, qui comprennent une image est un texte.

Il y a une chose que je souhaiterai faire c'est lors du survol du bouton ou lorsqu'il à le focus, que le cercle coloré qui apparaît soit dégradé: transparent vers l'extérieur et couleur pleine vers l'intérieur du bouton.

Je suis débutant en WPF/XAML et du coup je vois pas trop comment faire et si ma façon d'opérer est correcte.

A l'avance merci pour votre aide

[MABROUKI]

bonjour

Tu n'as qu'à déclarer un RadialGradientBrush au lieu d'un SolidBrush dans ton "StaticResource colorRed"...
bon code...

[waspy59]

désolé pour la réponse tardive.

Merci c'est nickel