Discussion :

[OminiuS]

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 :

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

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 :

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

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

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

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 :

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

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 ?

[OminiuS]

Merci de votre réponse.

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

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

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 :

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

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;
                            }

[Samuel Blanchard]

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

Code :

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

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

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 :

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

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 :

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

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

[OminiuS]

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

Code :

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

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!

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

[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.

[OminiuS]

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 :

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

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 :

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

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>

[Samuel Blanchard]

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

[OminiuS]

Code :

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

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!

[Samuel Blanchard]

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

Oui mais tu remplaces le Grid par un Border.

[OminiuS]

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!

[Samuel Blanchard]

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

1°) Border n'est pas non plus un Control 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 :

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

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 !

[OminiuS]

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 :

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

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 :

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

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>

[Samuel Blanchard]

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.

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.

[OminiuS]

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

Merci bcp!