Changement de VisualState pour les ListboxItem

**OminiuS** · 19/07/2010, 15h00

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** · 19/07/2010, 16h16

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** · 19/07/2010, 17h11

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** · 19/07/2010, 17h52

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** · 19/07/2010, 18h13

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** · 19/07/2010, 19h40

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.

Changement de VisualState pour les ListboxItem

Silverlight

Vue hybride

Discussions similaires

Partager

Partager