Discussion :

[abbepierre94]

Bonjour,

Je m'excuse d'avance, je suis archi débutant en Expression Blend, j'ai cherché et regardé des tuto mais n'ai pas trouvé de solution à mon problème

Je bosse sous Silverlight 3 + Expression Blend 3 (EB4 n'a pas l'air de fonctionner avec SL3, j'ai cru lire que si pourtant...).
J'ai un HyperlinkButton (bleu donc) auquel je voudrais mettre TextWrapping=True, sauf que ça n'existe pas pour un HyperlinkButton. Certains contournent en mettant dans le Content de l'HyperlinkButton un TextBlock qui lui a la propriété TextWrapping. Seulement, le comportement de l'HyperlinkButton s'en trouve modifié : quand on passe la souris au-dessus, il ne se souligne plus ni ne change de couleur...

J'ai donc pensé qu'EB pourrait faire de la magie, mais quand je fais Edit template > Edit copy sur mon HyperlinkButton, je ne peux changer que ses propriétés de base. Est-ce la bonne méthode pour mon problème ?

Et d'une manière plus générale, pour le côté design, EB ça permet juste de modifier les propriétés et de voir les modifications en live ? Ou ça peut aller beaucoup plus loin ?

Merci d'avance ! Et désolé pour mon ignorance

[Skyounet]

Utilise la propriete ContentTemplate.

Ensuite dans le Template de l'hyperlinkbutton rajoute TextWrapping="Wrap" au TextBlock qui s'appelle UnderlineTextBlock.

Code xml :

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

1
2
3
4
5
6
7
<HyperlinkButton Content="test d'un texte quand meme assez long" Width="100" Style="{StaticResource MonStyle}">
    <ContentControl.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" TextWrapping="Wrap" />
        </DataTemplate>
    </ContentControl.ContentTemplate>
</HyperlinkButton>

Code xml :

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

<TextBlock x:Name="UnderlineTextBlock" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Text="{TemplateBinding Content}" TextDecorations="Underline" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" TextWrapping="Wrap" />

[abbepierre94]

Merci Skyounet. Effectivement je peux faire comme tu dis, mais je perds les effets visuels des hyperlinkbutton, comme le soulignage qd on passe la souris au-dessus, la couleur qui change... Je suppose qu'il faut alors travailler sur les événements du TextBlock. Snif...

[Skyounet]

J'ai pourtant essayer avant de poster, mais bon j'ai testé avec Silverlight 4 aussi.

Est-ce que tu avais bien le TextBlock "UnderlineTextBlock" dans le template de ton HyperlinkButton ?

[abbepierre94]

Oui, j'ai bien mis le TextBlock "UnderlineTextBlock".
En même temps, ça me paraîtrait bizarre que le TextBlock tout simple se comporte comme l'hyperlinkbutton. Et TextDecorations="Underline", chez moi ça le rend souligné tout le temps. Ca me paraît normal aussi... Ca fait pas ça en SL4 ?

[Skyounet]

Non en SL4 le TextBlock est dans le template par défaut. Dans le VisualState MouseOver ça joue sur sa visibilité pour souligner ou non.

Tu peux poster le template par défaut d'un HyperlinkButton en SL3 stp ?

[abbepierre94]

Je suis vraiment débutant en EB, j'ai du mal à suivre ce que tu dis. Mais je dois m'y investir... En attendant, voici le template par défaut de l'hyperlinkbutton en SL3. Je crois que c'est cela :

Code xml :

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
69
70
71
72
73
74
75
76
<ControlTemplate x:Key="HyperlinkButtonControlTemplate1" TargetType="HyperlinkButton">
  <Grid Cursor="{TemplateBinding Cursor}" Background="{TemplateBinding Background}">
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal"/>
        <VisualState x:Name="MouseOver">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnderlineTextBlock" Storyboard.TargetProperty="Visibility" Duration="0">
              <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                  <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Pressed">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnderlineTextBlock" Storyboard.TargetProperty="Visibility" Duration="0">
              <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                  <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Disabled">
          <Storyboard>
            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOverlay" Storyboard.TargetProperty="Visibility" Duration="0">
              <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                  <Visibility>Visible</Visibility>
                </DiscreteObjectKeyFrame.Value>
              </DiscreteObjectKeyFrame>
            </ObjectAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
      <VisualStateGroup x:Name="FocusStates">
        <VisualState x:Name="Focused">
          <Storyboard>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
              <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
          </Storyboard>
        </VisualState>
        <VisualState x:Name="Unfocused"/>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <TextBlock
      x:Name="UnderlineTextBlock"
      Text="{TemplateBinding Content}"
      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
      Margin="{TemplateBinding Padding}"
      TextDecorations="Underline"
      Visibility="Collapsed"/>
    <TextBlock Canvas.ZIndex="1"
      x:Name="DisabledOverlay"
      Text="{TemplateBinding Content}"
      Foreground="#FFAAAAAA"
      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
      Margin="{TemplateBinding Padding}"
      Visibility="Collapsed"/>
    <ContentPresenter 
      x:Name="contentPresenter"
      Content="{TemplateBinding Content}"
      ContentTemplate="{TemplateBinding ContentTemplate}"
      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
      Margin="{TemplateBinding Padding}"/>
    <Rectangle x:Name="FocusVisualElement" Stroke="#FF6DBDD1" StrokeThickness="1" Opacity="0" IsHitTestVisible="false" />
  </Grid>
</ControlTemplate>

Tu peux me dire juste les grandes lignes pour que TextWrapping fonctionne stp ? Après je vais quand même essayer de chercher par moi-même

Merci bien en tout cas !

[Skyounet]

Dans le premier TextBlock du Template

Code xml :

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

1
2
3
4
5
6
7
8
   <TextBlock
      x:Name="UnderlineTextBlock"
      Text="{TemplateBinding Content}"
      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
      Margin="{TemplateBinding Padding}"
      TextDecorations="Underline"
      Visibility="Collapsed"/>

Rajoute TextWrapping="Wrap"

Ensuite associe ce style à ton HyperlinkButton et définie lui un ContentTemplate

Code xml :

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

1
2
3
4
5
6
7
<HyperlinkButton Content="test d'un texte quand meme assez long" Width="100" Style="{StaticResource MonStyle}">
    <ContentControl.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding}" TextWrapping="Wrap" />
        </DataTemplate>
    </ContentControl.ContentTemplate>
</HyperlinkButton>

[abbepierre94]

Ca marche, j'en reviens pas !! Je vais essayer de comprendre le truc, ça me fait un bon 1er exercice !

N'empêche, ça en fait des lignes de code pour un si petit truc. Ils auraient pu gérer le TextWrapping quand même

Merci beaucoup à toi, comme d'hab