[Silverlight]Visual State Manager et Textbox, ça marche comment?

Version imprimable

18/07/2008, 21h36
Nisnor

[Silverlight]Visual State Manager et Textbox, ça marche comment?

Bonsoir, tout le monde.

Je souhaiterais pouvoir personnaliser une textbox en Silverlight de manière à ce qu'elle réagisse au survol de la souris en plus de réagir quand elle obtient le focus.

J'ai cherché pendant pas mal de temps. J'ai d'abord trouvé que en XAML, il y avait les triggers...Puis je me suis aperçu qu'ils n'étaient pas implémentés en SIlverlight 2 Beta 2 (en tout cas, c'est ce que rapportent pas mal de documents sur le net).

Ensuite, je suis tombé sur les Visual State. Après tout...Pourquoi pas.

Seulement, sous Expression Blend 2.5, lorsque j'édite le template d'une textbox, impossible d'ajouter des states.

J'essais de les rajouter manuellement...Mais même si les compilateurs ne râlent pas, il m'est impossible de changer de State grâce au code
VisualStateManager.GoToState() . :s

Cela vient surement de mon code XAML mal fichu...Mais je vois rien sur le net qui explique comment utiliser les states avec des textbox.

Est-ce possible? Si oui, comment?

Merci d'avance ;)
19/07/2008, 14h19
Skyounet

http://broux.developpez.com/articles...s-silverlight/

Tu prends l'exemple avec le bouton et tu t'en inspires pour les TextBox, c'est exactement pareil.
19/07/2008, 14h41
Invité

pourquoi n'existe il plus les triggers dans la beta 2 ?

[Merci d'avoir déplacé ce topic, je n'avais pas vu la section Silverlight]

Bon ba j'ai vu le tuto...Mais rien a faire, GoToState() me renvoi toujours False :s

Voici le code XAML du contrôle personnalisé :

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
 
<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
	mc:Ignorable="d"
	x:Class="Natiis.NatiisTBox"
	d:DesignWidth="640" d:DesignHeight="480" x:Name="NatiisTextBox" HorizontalAlignment="Center" VerticalAlignment="Center" Width="120" Height="25" RenderTransformOrigin="0.5,0.5" MaxHeight="23">
    <UserControl.Resources>
		<Style x:Key="Style" TargetType="TextBox">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="TextBox">
						<Grid x:Name="RootElement">
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="States">
                                    <vsm:VisualStateGroup.Transitions>
                                        <vsm:VisualTransition Duration="00:00:00" From="OverState" To="NormalState"/>
                                        <vsm:VisualTransition Duration="00:00:00" From="FocusedState" To="OverState"/>
                                        <vsm:VisualTransition Duration="00:00:00" From="OverState" To="FocusedState"/>
                                        <vsm:VisualTransition Duration="00:00:00" From="FocusedState" To="NormalState"/>
                                    </vsm:VisualStateGroup.Transitions>
                                    <vsm:VisualState x:Name="NormalState" >
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="FocusedState">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="OverState">
                                        <Storyboard />
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <ScrollViewer Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" x:Name="ContentElement" BorderBrush="{TemplateBinding BorderBrush}" Foreground="{TemplateBinding Foreground}" OpacityMask="{TemplateBinding OpacityMask}"/>
							<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="False" Opacity="0" StrokeThickness="1" RadiusX="1" RadiusY="1" Stroke="#FF0000FF"/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
    </UserControl.Resources>
 
	<TextBox Height="23" Width="120" TextAlignment="Center" Text="TextBox" TextWrapping="Wrap" x:Name="TextBox" Background="Transparent" BorderBrush="Transparent" Foreground="#FFFF0000" Style="{StaticResource Style}" />
 
</UserControl>

Et le contenu du code-behind:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
public NatiisTBox()
{
        // Initialise les composants XAML
	InitializeComponent();
 
        this.Loaded += loaded;
}
 
private void loaded(object sender, RoutedEventArgs e)
{
        this.TextBox.Text = VisualStateManager.GoToState(this.TextBox, "NormalState", true).ToString();
 
}

Ne voyant pas d'où ça pourrait venir, il ne me reste plus que la solution "Le VSM n'est pas pris en charge dans une textbox"....mais ça me semble louche comme hypothèse :s

19/07/2008, 21h52
Thomas Lebrun

Pkoi ne pas créer une classe qui hérite de TextBox et qui utilise le VSM ? Car là, tu utilises un UserControl....
21/07/2008, 09h04
Nisnor

Ba avec Expression Blend, quand je fais clic-droit sur un contrôle puis "Edit Control Parts-->Edit a copy", ça me créé ce code.

Edit: De plus, je viens d'essayer de me baser sur une textbox plutôt qu'un usercontrol...Ba ça compile plus XD
21/07/2008, 20h36
Nisnor

Après une dernière recherche j'ai finalement trouvé la solution.

Ne connaissant le XAML que par le bidouillage, je ne possède pas encore toutes les compétences requise pour en faire du fonctionnel du premier coup XD... Aussi, pour utiliser le VisualStateManager dans mon template, je ne devais pas spécifier les balises styles et setter toutes seules. Je devais utiliser le raccourci vers la réferrence de l'espace de nom du VisualStateManager (dans le code du dessus, c'était "vsm"). Aussi, au lieu de mettre <Style></Style> il fallait mettre <vsm:Style></vsm:Style>.

J'espère que mes bidouillages futurs pourront me dire pourquoi le "vsm:" était nécessaire devant <Style> et <Setter> ;) (Ou voir si quelqu'un peut déjà me dire pourquoi ^^)