Changement de VisualState pour les ListboxItem

Version imprimable

Bonjour,

j'ai une listbox dont les items affichent du text et une icone en fonction d'un état.
J'ai développé un VisualState pour les icones.

j'ai développé dans l'événement LayoutUpdated de la listbox le fait de passer a tel ou tel VisualState selon l'état :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
private void ListBoxExercices_LayoutUpdated(object sender, EventArgs e)
                {
                    int i = 0;
                    foreach (Exercice l_Exercice in this.ListBoxExercices.Items)
                    {
                        ListBoxItem l_Item = this.ListBoxExercices.ItemContainerGenerator.ContainerFromIndex(i) as ListBoxItem;
                        //VisualStateManager.GoToState(l_Item, "PrepareState", true);
                        //VisualStateManager.GoToState(l_Item, "DeployeDemarreState", true);
                        //VisualStateManager.GoToState(l_Item, "DeployeArreteState", true);
                        //VisualStateManager.GoToState(l_Item, "ArchiveState", true);
                        VisualStateManager.GoToState(ListBoxExercices, "WarningVisualStateGroup", true);
 
                        i++;
                    }
                }

cela ne fait rien!
Est-ce que je m'y prend bien?

Merci d'avance.

Voici le code de ma listbox, j'ai enlevé le contenu des canvas pour ne pas trop polluer le message

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
<ListBox x:Name="ListBoxExercices" SelectionChanged="ListBoxExercices_SelectionChanged" Background="{x:Null}" BorderBrush="{x:Null}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" LayoutUpdated="ListBoxExercices_LayoutUpdated">
                        <ListBox.Resources>
                            <DataTemplate x:Key="DataTemplateListeExercice">
                                <Grid d:DesignWidth="385.5" d:DesignHeight="30">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="ExerciceVisualStateGroup">
                                            <VisualState x:Name="PrepareState">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PictoArchive" d:IsOptimized="True"/>
                                                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PictoDeployeDemarre" d:IsOptimized="True"/>
                                                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PictoDeployeArrete" d:IsOptimized="True"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="DeployeDemarreState">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PictoPrepare" d:IsOptimized="True"/>
                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PictoDeployeDemarre" d:IsOptimized="True"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="DeployeArreteState">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PictoDeployeArrete" d:IsOptimized="True"/>
                                                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PictoPrepare" d:IsOptimized="True"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="ArchiveState">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PictoPrepare" d:IsOptimized="True"/>
                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="PictoArchive" d:IsOptimized="True"/>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="WarningVisualStateGroup">
                                            <VisualState x:Name="ShowWarning">
                                                <Storyboard>
                                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Warning" d:IsOptimized="True"/>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="HideWarning"/>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <VisualStateManager.CustomVisualStateManager>
                                        <ic:ExtendedVisualStateManager/>
                                    </VisualStateManager.CustomVisualStateManager>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="35"/>
                                    </Grid.ColumnDefinitions>
                                    <Canvas x:Name="Warning" HorizontalAlignment="Right" Margin="0,7,2,8" Width="17" Opacity="0">
                                    </Canvas>
                                    <TextBlock x:Name="lblNomExercice" HorizontalAlignment="Left" Margin="15,0,0,1" TextWrapping="Wrap" Text="{Binding Nom, FallbackValue=Exercice}" Style="{StaticResource HeaderBoxTextBlockStyle}" VerticalAlignment="Center" FontSize="18.667"/>
 
                                    <Canvas x:Name="PictoPrepare" Grid.Column="1" Height="24.81" VerticalAlignment="Center" Width="25">
                                    </Canvas>
                                    <Canvas x:Name="PictoArchive" Grid.Column="1" Height="25.147" VerticalAlignment="Center" Width="26" Opacity="0">
                                    </Canvas>
                                    <Rectangle x:Name="PictoDeployeDemarre" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FFBBBBBB" Grid.Column="1" Height="20.55" VerticalAlignment="Center" Width="21" Opacity="0">
                                     </Rectangle>
                                    <Path x:Name="PictoDeployeArrete" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF4C8400" Data="F1 M 177.15,598.792L 158.934,588.275L 158.934,609.309L 177.15,598.792 Z " Grid.Column="1" Height="22.034" UseLayoutRounding="False" VerticalAlignment="Center" Width="19.2159996032715" Opacity="0">
                                    </Path>
                                </Grid>

19/07/2010, 16h16
Samuel Blanchard
Bonjour,

Les VisualStates que tu as ajoutés dans ta ListBox se trouve au niveau du Grid de ton DataTemplate et non pas de ton ListBoxExercice comme tu l'appelles ici :

Code:

VisualStateManager.GoToState(ListBoxExercices, "WarningVisualStateGroup", true);

Résultat, l'état n'est pas trouvé (d'ailleurs GoToState doit te retourner false).

Pour pouvoir récupérer le Grid généré et appeler le GoState avec le bon contrôle, procède comme suit (code non testé :) ) :
Code:

1 2 3 4 ListBoxItem listBoxItem = this.ItemContainerGenerator.ContainerFromItem( item ); Grid grid = listBoxItem.Content as Grid; VisualStateManager.GoToState(grid, "WarningVisualStateGroup", true);
Sinon, ce n'est sans doute pas une excellent idée de passer pas l'evenement LayoutUpdated. Quand veux-tu déclencher ce changement d'icone ?

Merci de votre réponse.

Alors, j'ai essayé votre méthode et j'ai cette erreur :

Citation:

Error 4 Argument 1: cannot convert from 'System.Windows.Controls.Grid' to 'System.Windows.Controls.Control'

Citation:

Sinon, ce n'est sans doute pas une excellent idée de passer pas l'evenement LayoutUpdated. Quand veux-tu déclencher ce changement d'icone ?

Au chargement de ma ListBox.
Je fais appel a un web service et dans ma méthode completed, j'ai :
Code:

1 2 3 4 5 6 7 GetExercicesResponse rep = e.Result; ListBoxExercices.ItemsSource = rep.GetExercicesResult; if (ListBoxExercices.Items.Count > 0) { ListBoxExercices.SelectedIndex = 0; this.ExerciceCourant = ListBoxExercices.SelectedItem as Exercice; }

Petite boulette sur la récupération du Grid :aie: C'est ça de ne pas tester son code...
Code:

1 2 ListBoxItem listBoxItem = this.ItemContainerGenerator.ContainerFromItem( item ); Grid grid = VisualTreeHelper.GetChild(listBoxItem, 0) as Grid;
Citation:

Au chargement de ma ListBox.
Je fais appel a un web service et dans ma méthode completed, j'ai :

Et donc le temps que les containers de la liste se crée (d'une manière asynchrone) tu ne peux y accéder tout de suite d'ou l'appel au LayoutUpdated pour obtenir un peu de délai.

Tu devrais tenter cela, plutot :
Code:

1 2 3 4 5 6 7 8 9 <ListBox x:Name="ListBoxExercices" SelectionChanged="ListBoxExercices_SelectionChanged" Background="{x:Null}" BorderBrush="{x:Null}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" LayoutUpdated="ListBoxExercices_LayoutUpdated"> <ListBox.Resources> <DataTemplate x:Key="DataTemplateListeExercice"> <Grid Loaded="Grid_Loaded"> ... </Grid> </DataTemplate> </ListBox.Resources> </ListBox>
Code:

1 2 3 4 5 private void Grid_Loaded(object sender, RoutedEventArgs e) { Grid grid = sender as Grid; VisualStateManager.GoToState(grid, "WarningVisualStateGroup", true); }

Pour l'instant j'essaie avec votre première méthode :
Code:

1 2 3 4 ListBoxItem listBoxItem = this.ListBoxExercices.ItemContainerGenerator.ContainerFromItem(l_Exercice) as ListBoxItem; //Grid grid = listBoxItem.Content as Grid; Grid grid = System.Windows.Media.VisualTreeHelper.GetChild(listBoxItem, 0) as Grid; VisualStateManager.GoToState(grid, "WarningVisualStateGroup", true);
J'ai toujours la même erreur!

Citation:

Error 3 The best overloaded method match for 'System.Windows.VisualStateManager.GoToState(System.Windows.Controls.Control, string, bool)' has some invalid arguments

Error 4 Argument 1: cannot convert from 'System.Windows.Controls.Grid' to 'System.Windows.Controls.Control'

Grid ne peut etre le 1er argument de VisualStateManager.GoToState

Merci

19/07/2010, 19h40
Samuel Blanchard

Effectivement le grid etant un Panel, il ne peut pas être utilisé par GotoState.
Tu peux Remplacer le Grid par un Border qui lui est un Control.

Mais je te conseille la 2em solution qui est vraiment très simple à mettre en place.

J'ai essayé avec le Border et j'ai la même erreur qu'avec le Grid!

J'ai testé avec ce code dans le Grid, mais aucune action!

Code:

1
2
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
	xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<i:Interaction.Triggers>
                                        <ic:DataTrigger Binding="{Binding Etat.Nom}" Value="Préparé">
                                            <ic:GoToStateAction StateName="PrepareState"/>
                                        </ic:DataTrigger>
                                        <ic:DataTrigger Binding="{Binding Etat.Nom}" Value="Déployé Arrêté">
                                            <ic:GoToStateAction StateName="DeployeDemarreState"/>
                                        </ic:DataTrigger>
                                        <ic:DataTrigger Binding="{Binding Etat.Nom}" Value="Déployé Démarré">
                                            <ic:GoToStateAction StateName="DeployeArreteState"/>
                                        </ic:DataTrigger>
                                        <ic:DataTrigger Binding="{Binding Etat.Nom}" Value="Archivé">
                                            <ic:GoToStateAction StateName="ArchiveState"/>
                                        </ic:DataTrigger>
                                    </i:Interaction.Triggers>

20/07/2010, 12h03
Samuel Blanchard

As-tu testé la deuxième solution que je te proposais ?

Code:

1
2
3
4
5
private void Grid_Loaded(object sender, RoutedEventArgs e)
        {
            Grid grid = sender as Grid;
            VisualStateManager.GoToState(grid, "WarningVisualStateGroup", true);
        }

Celle ci?
Oui, mais j'ai le problème du grid!

20/07/2010, 14h05
Samuel Blanchard

Citation:

Celle ci?
Oui, mais j'ai le problème du grid!

Oui mais tu remplaces le Grid par un Border.
20/07/2010, 14h51
OminiuS

Citation:

J'ai essayé avec le Border et j'ai la même erreur qu'avec le Grid!

Oui oui, j'ai essayé ^^

Ou, j'ai mal compris comment il fallait faire. j'ai remplacé côté xaml le Grid par Border et pareil pour le code behind!

Oky, j'arrête pas de m'embrouiller dans cette histoire :)

1°) Border n'est pas non plus un Control :aie: c'est un descendant de FrameworkElement.

2°) GotoState cherche l'état dans le ControlTemplate du Control indiqué comme paramètre.

Solution : Le plus simple serait de mettre en place un UserControl (ou un TemplatedControl) gérant les VisualStates pour que tu puisses bénéficier du ControlTemplate. Dans l'evenement Loaded du UserControl tu déclenches GoToState.

puis dans ta ListBox il suffit d'appeller le UserControl (TestItem dans mon cas)
Code:

1 2 3 4 5 6 7 8 <ListBox x:Name="ListBoxUs"> <ListBox.ItemTemplate> <DataTemplate> <my:TestItem></my:TestItem> </DataTemplate> </ListBox.ItemTemplate> </ListBox>
J'ai testé cela fonctionne !

Merci, je suis en train de tester cette solution, mais comment je vais pour remplir mes champs de mon nouvel UserControl?

Actuellement, je faisait comme ça :

Code:

ListBoxExercices.ItemsSource = rep.GetListExercicesResult;

où rep.GetListExercicesResult est le résultat d'une méthode WCF.

J'aimerai savoir si ma deuxième avec ça peut fonctionner?

merci
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <i:Interaction.Triggers> <ic:DataTrigger Binding="{Binding Etat.Nom}" Value="Préparé"> <ic:GoToStateAction StateName="PrepareState"/> </ic:DataTrigger> <ic:DataTrigger Binding="{Binding Etat.Nom}" Value="Déployé Arrêté"> <ic:GoToStateAction StateName="DeployeDemarreState"/> </ic:DataTrigger> <ic:DataTrigger Binding="{Binding Etat.Nom}" Value="Déployé Démarré"> <ic:GoToStateAction StateName="DeployeArreteState"/> </ic:DataTrigger> <ic:DataTrigger Binding="{Binding Etat.Nom}" Value="Archivé"> <ic:GoToStateAction StateName="ArchiveState"/> </ic:DataTrigger> </i:Interaction.Triggers>

21/07/2010, 12h02
Samuel Blanchard

Citation:

Merci, je suis en train de tester cette solution, mais comment je vais pour remplir mes champs de mon nouvel UserControl?

Actuellement, je faisait comme ça :

Code :
ListBoxExercices.ItemsSource = rep.GetListExercicesResult;où rep.GetListExercicesResult est le résultat d'une méthode WCF.

Tu n'as pas besoin de changer la source de ton ListBox. Elle doit rester comme elle est.

Dans ton UserControl, tu peux utiliser le Binding de tes champs normalement car le DataContext des UserControls sera fixé automatiquement avec l'item de ta ListBox.

Citation:

J'aimerai savoir si ma deuxième avec ça peut fonctionner?

Je ne sais pas. ça à l'air d'être du Blend mais je ne m'en sers pas pour faire ce genre de chose.
21/07/2010, 16h34
OminiuS

C'est bon, ça fonctionne avec votre solution!

Merci bcp!