[Expression Blend] TextWrapping sur un HyperlinkButton

Version imprimable

21/07/2011, 19h45
abbepierre94

[Expression Blend] TextWrapping sur un HyperlinkButton

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

Utilise la propriete ContentTemplate.

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

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:

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

23/07/2011, 15h08
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...
23/07/2011, 17h00
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 ?
23/07/2011, 18h36
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 ?
23/07/2011, 19h28
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 ?

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:

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 !

Dans le premier TextBlock du Template

Code:

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:

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>

24/07/2011, 21h51
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 :ccool: