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.

[Skyounet]

Le livre a été écrit avec la RC de Silverlight (ou la beta je me souviens plus) et quelques éléments ont changé depuis.

Certaines propriétés du ContentPresenter ont été enlevées.

http://msdn.microsoft.com/en-us/libr...es(VS.95).aspx

2. Pour que les animations rentrent en actions tu n'as rien à faire, le code est défini dans le code du bouton. Par exemple lorsque tu as un MouseOver l'état MouseOver est appelé et l'animation correspondante est réalisée. Tout ça est rendu possible grâce au VisualStateManager. Il n'en est pas question dans le livre ? (si non cette partie a du être écrite avec la beta 1 ).

Tu peux regarder mon article ici qui en parle rapidement.
http://broux.developpez.com/articles...rlight/#L1-2-2

[Steven62]

Le livre a été écrit avec la RC de Silverlight (ou la beta je me souviens plus) et quelques éléments ont changé depuis.

Certaines propriétés du ContentPresenter ont été enlevées.

http://msdn.microsoft.com/en-us/libr...es(VS.95).aspx

2. Pour que les animations rentrent en actions tu n'as rien à faire, le code est défini dans le code du bouton. Par exemple lorsque tu as un MouseOver l'état MouseOver est appelé et l'animation correspondante est réalisée. Tout ça est rendu possible grâce au VisualStateManager. Il n'en est pas question dans le livre ? (si non cette partie a du être écrite avec la beta 1 ).

Tu peux regarder mon article ici qui en parle rapidement.
http://broux.developpez.com/articles...rlight/#L1-2-2

J'avais effectivement remarqué plusieurs différences dans les chapitres précédents (des attributs qui avaient changé de noms, ...) mais j'avais réussi à m'adapter jusqu'à présent.

Sinon, j'ai vérifié dans le livre ce matin et il n'y a aucune mention du VisualStateManager.

Je vais regarder les liens que tu m'as donné dans la journée

[Steven62]

Le livre a été écrit avec la RC de Silverlight (ou la beta je me souviens plus) et quelques éléments ont changé depuis.

Certaines propriétés du ContentPresenter ont été enlevées.

http://msdn.microsoft.com/en-us/libr...es(VS.95).aspx

2. Pour que les animations rentrent en actions tu n'as rien à faire, le code est défini dans le code du bouton. Par exemple lorsque tu as un MouseOver l'état MouseOver est appelé et l'animation correspondante est réalisée. Tout ça est rendu possible grâce au VisualStateManager. Il n'en est pas question dans le livre ? (si non cette partie a du être écrite avec la beta 1 ).

Tu peux regarder mon article ici qui en parle rapidement.
http://broux.developpez.com/articles...rlight/#L1-2-2

Alors, j'ai testé avec le VisualStateManager et effectivement, ça fonctionne parfaitement maintenant

Le code de mon bouton est devenu :

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
62
63
64
65
66
67
68
 
 <Style x:Key="styleBoutonGood" TargetType="Button" >
            <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootElement">
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <!-- Etat quand la souris entre dans la surface du bouton -->
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:0.3"
                                                    Storyboard.TargetName="Normal1"
                                                    Storyboard.TargetProperty="(Rectange.Fill).(SolidColorBrush.Color)"
                                                    To="Silver" />
                                        </Storyboard>
                                    </vsm:VisualState>
 
                                    <vsm:VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:0.3"
                                                    Storyboard.TargetName="Normal1"
                                                    Storyboard.TargetProperty="(Rectange.Fill).(SolidColorBrush.Color)"
                                                    To="DeepSkyBlue" />
                                        </Storyboard>
                                    </vsm:VisualState>
 
                                    <vsm:VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Duration="0:0:0.3"
                                                    Storyboard.TargetName="Normal1"
                                                    Storyboard.TargetProperty="(Rectange.Fill).(SolidColorBrush.Color)"
                                                    To="Red" />
                                        </Storyboard>
                                    </vsm:VisualState>
 
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
 
                            <Rectangle x:Name="Normal1" Fill="DeepSkyBlue"
                                       RadiusX="5" RadiusY="5" />
                            <Rectangle x:Name="Notmal2"
                                       RadiusX="5" RadiusY="5" Stroke="Black" StrokeThickness="1" >
                                <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>

Merci encore pour les infos