Discussion :

[Steven62]

Bonjour à tous,

Je me suis procuré le livre "Silverlight 2" il y a quelques semaines aprés avoir lu plusieurs commentaires positifs ici même. Je dois vous dire que j'en suis particulièrement satisfait : L'apprentissage se fait en douceur, les explications sont claires et tout est fait pour nous donner envie de continuer à explorer Silverlight par nous même.

J'ai cependant rencontré quelques difficultés au Chapitre 15. Je crée donc ce topic en espérant que vous pourrez m'apporter quelques réponses.

1/ ContentPresenter

Dans le chapitre 15, le fonctionnement de la balise ContentPresenter est expliqué et on trouve un exemple dans lequel il faut mettre les attributes Foreground ou encore Background dans cette balise ContentPresenter.

Pour une raison que je ne comprend pas, je ne peux pas mettre ces attributs dans cette balise. L'aide à la saisie ne me propose pas ces options et si j'insiste, j'ai un avertissement d'erreur et l'attribut est souligné en bleu.

Ci-dessous, voici le code que j'ai écris (il manque donc les attributs Foreground, ... dans le ContentPresenter pour coller avec l'exemple du livre) :

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
<Style x:Key="styleBoutonOval2" TargetType="Button" >
            <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Ellipse>
                                <Ellipse.Fill>
                                    <RadialGradientBrush GradientOrigin="0.3, 0.3" >
                                        <GradientStop Offset="0" Color="White" />
                                        <GradientStop Offset="1" Color="Gray" />
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <TextBlock FontWeight="Bold" />
                            <ContentPresenter Content="{TemplateBinding Content}"
                                              HorizontalAlignment="Center"
                                              VerticalAlignment="Center" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

2/ Ajouter des effets sur un bouton personnalisé
Dans la suite du chapitre 15, il est expliqué comment modifier en profondeur chaque élément d'un bouton et comment ajouter des effets lorsque, par exemple, l'utilisateur clic sur le bouton. J'ai reproduis à la lettre l'exemple donné (enfin je crois) et voici le code obtenu :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<Style x:Key="styleBouton" TargetType="Button" >
            <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootElement">
                            <Grid.Resources>
                                <!-- Etat quand la souris entre dans la surface du bouton -->
                                <Storyboard x:Key="MouseOver State">
                                    <ColorAnimation Duration="0:0:0.3"
                                                    Storyboard.TargetName="Normal1"
                                                    Storyboard.TargetProperty="(Rectange.Fill).(SolidColorBrush.Color)"
                                                    To="Silver" />
                                </Storyboard>
                                <Storyboard x:Key="Normal State">
                                    <ColorAnimation Duration="0:0:0.3"
                                                    Storyboard.TargetName="Normal1"
                                                    Storyboard.TargetProperty="(Rectange.Fill).(SolidColorBrush.Color)"
                                                    To="DeepSkyBlue" />
                                </Storyboard>
                                <Storyboard x:Key="Pressed State">
                                    <DoubleAnimation Duration="0:0:0"
                                                     Storyboard.TargetName="Normal2"
                                                     Storyboard.TargetProperty="StrokeThickness"
                                                     To="5" />
                                </Storyboard>
                                <Storyboard x:Key="Disabled State">
                                    <DoubleAnimation Duration="0:0:0"
                                                     Storyboard.TargetName="Normal2"
                                                     Storyboard.TargetProperty="StrokeThickness"
                                                     To="1" />
                                </Storyboard>
                            </Grid.Resources>
                            <Rectangle x:Name="Normal1" Fill="DeepSkyBlue"
                                       RadiusX="5" RadiusY="5" />
                            <Rectangle x:Name="Notmal2"
                                       RadiusX="5" RadiusY="5" Stroke="Black" >
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1" >
                                        <LinearGradientBrush.GradientStops>
                                            <GradientStop Color="#D0FFFFFF" Offset="0" />
                                            <GradientStop Color="#90FFFFFF" Offset="0.5" />
                                            <GradientStop Color="#60FFFFFF" Offset="0.5" />
                                            <GradientStop Color="#90FFFFFF" Offset="1" />
                                        </LinearGradientBrush.GradientStops>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Rectangle x:Name="FocusVisualElement" 
                                       RadiusX="5" RadiusY="5" 
                                       Stroke="White" StrokeThickness="2"
                                       StrokeDashArray="2 1" Margin="10" />
                            <ContentPresenter
                                Content="{TemplateBinding Content}"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                />
                        </Grid> 
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Quant au bouton sur la page XAML, voici le code :

Code :

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

1
2
3
<Button Width="200" Height="80" VerticalAlignment="Top" Margin="0,300,0,0"
                Style="{StaticResource styleBouton}" Content="Bouton Template" FontSize="20"
                Foreground="White" />

En fait, ce que je ne comprend pas et qui n'est pas expliqué dans le livre (me semble t'il), c'est comment faire pour que ces animations entrent en action. Car dans l'état, mon bouton est totalement statique

J'espère que mes explications sont claires et que quelqu'un sera en mesure de m'aider. Merci.