Animation Items ListBox

Version imprimable

Bonjour tout le monde,

J'ai recherché sur le forum et internet et je n'ai trouvé de solutions... Si le sujet a été abordé (voir résolu) sur un autre post merci de me dire lequel ou quoi chercher sur le forum :)
Voilà mon problème est assez simple mais je ne comprends pas pourquoi cela me fait cela...
Je vous explique, j'ai une listbox où les items contiennent des données bindées (un titre, une date et un contenu)

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
 
        <Style x:Key="newsStyle" TargetType="ListBoxItem">
            ...
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid Background="{TemplateBinding Background}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <vsm:VisualStateManager.VisualStateGroups>
                                ...
                                <vsm:VisualStateGroup x:Name="SelectionStates">
                                    <vsm:VisualState x:Name="Unselected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="newsContent" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="newsContent" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="FocusStates">
                                    <vsm:VisualState x:Name="Focused">
                                        <Storyboard/>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Unfocused">
                                        <Storyboard/>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <StackPanel Orientation="Vertical">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="{Binding Path=Title}" FontWeight="Bold" FontFamily="Portable User Interface" d:LayoutOverrides="HorizontalAlignment" TextWrapping="Wrap" Foreground="#FFFFFFFF" Width="200" x:Name="newsTitle" RenderTransformOrigin="0.5,0.5"/>
                                    <TextBlock Width="80" Text="{Binding Converter={StaticResource DateConverter}, Path=Date}" TextWrapping="Wrap" TextAlignment="Right" Foreground="#FFFFFFFF" x:Name="newsDate"  RenderTransformOrigin="0.5,0.5"/>
                                </StackPanel>
                                <TextBlock x:Name="newsContent" Text="{Binding Path=Content}" TextWrapping="Wrap" Width="290" FontSize="9" Height="80" Foreground="#FFFFFFFF" Visibility="Collapsed"/>
                            </StackPanel>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
 
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Width="Auto" Height="Auto" Background="#FF353535">
        <ListBox x:Name="list" Background="#00353535" BorderThickness="0,0,0,0" ItemContainerStyle="{StaticResource newsStyle}"/>
    </Grid>
</UserControl>

Donc seuls le titre et la date sont visibles, le contenu est invisible, lorsque je clique sur l'item, le contenu apparait, lorsque je sélectionne un autre item, le contenu disparait et le contenu du nouvel item apparait.
Seulement, lorsque je clique sur un item sur lequel j'ai déjà cliqué, le contenu n'apparait pas mais l'item s'agrandit alors je ne comprends vraiment pas pourquoi cela fait cela...

Merci de votre aide.

N'hésitez pas à me dire si vous voulez plus de précisions

22/05/2009, 20h17
Skyounet

Je ne sais pas si mettre du binding directement dans le style est pas une très bonne idée.

En fait pour faire ce que tu veux faire passer par un Template n'est peut-être pas la meilleure idée.

Perso j'aurais spécifié le DataTemplate de l'ItemTemplate en mettant mes contrôles et mon binding. Je me serai abonné à SelectionChanged et j'aurais réalisé mes animations en code behind.
22/05/2009, 20h47
1tsiMat

J'avais fait comme cela au début, mais mon "newsContent" n'était pas visible dans mon code puisqu'il était situé dans le DataTemplate :/

Ou alors si tu sais comment y accéder :lol:

Citation:

Envoyé par 1tsiMat

Ou alors si tu sais comment y accéder :lol:

Attention le code

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
    private void test_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        StackPanel sp = GetChild<StackPanel>(test) as StackPanel;
 
        int index = list.ToList().IndexOf((int)e.AddedItems[0]);
 
        ListBoxItem item = sp.Children[index] as ListBoxItem;
        TextBlock t = GetChild<TextBlock>(item);
    }
 
    public T GetChild<T>(DependencyObject obj) where T : DependencyObject
    {
        DependencyObject child = null;
 
        for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
        {
            child = VisualTreeHelper.GetChild(obj, i);
            if (child != null && child.GetType() == typeof(T))
            {
                break;
            }
            else if (child != null)
            {
                child = GetChild<T>(child);
                if (child != null && child.GetType() == typeof(T))
                {
                    break;
                }
            }
        }
        return child as T;
    }

Dans mon exemple le DataTemplate de ma ListBox c'est ça.

Code:

1
2
3
4
5
6
7
8
9
<ListBox x:Name="test" SelectionChanged="test_SelectionChanged">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock Text="{Binding}" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

24/05/2009, 16h21
1tsiMat

Ok merci, je test ca :)

Salut j'ai testé ton code, cela fonctionne, mais malheureusement cela me fait le même effet qu'avec mon code bidouillé :P

Je pense que cela est du au fait qu'une fois la selectionChanged, je passe le textblock de l'item removed à collapsed mais je ne comprends vraiment pas pourquoi cela réagit comme ca ensuite...

Voilà les modifications que j'ai apporté

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
private void list_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            StackPanel sp = GetChild<StackPanel>(newsList) as StackPanel;
 
            int index = newsList.Items.ToList().IndexOf(e.AddedItems[0]);
 
            if (e.RemovedItems.Count > 0)
            {
                int indexToRemove = newsList.Items.ToList().IndexOf(e.RemovedItems[0]);
                ListBoxItem itemToRemove = sp.Children[indexToRemove] as ListBoxItem;
                TextBlock textToRemove = GetNewsContent<TextBlock>(itemToRemove);
                textToRemove.Visibility = Visibility.Collapsed;
            }
 
            ListBoxItem item = sp.Children[index] as ListBoxItem;
            TextBlock t = GetNewsContent<TextBlock>(item);
            t.Visibility = Visibility.Visible;
        }
 
        public T GetChild<T>(DependencyObject obj) where T : DependencyObject
        {
            DependencyObject child = null;
 
            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
            {
                child = VisualTreeHelper.GetChild(obj, i);
                if (child != null && child.GetType() == typeof(T))
                {
                    break;
                }
                else if (child != null)
                {
                    child = GetChild<T>(child);
                    if (child != null && child.GetType() == typeof(T))
                    {
                        break;
                    }
                }
            }
            return child as T;
        }
 
        public T GetNewsContent<T>(DependencyObject obj) where T : DependencyObject
        {
            DependencyObject child = null;
 
            for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++)
            {
                child = VisualTreeHelper.GetChild(obj, i);
                if (child != null && child.GetType() == typeof(TextBlock) && ((TextBlock)child).Name == "newsContent")
                {
                    break;
                }
                else if (child != null)
                {
                    child = GetNewsContent<T>(child);
                    if (child != null && child.GetType() == typeof(TextBlock) && ((TextBlock)child).Name == "newsContent")
                    {
                        break;
                    }
                }
            }
            return child as T;
        }

Mon dataTemplate :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<ListBox x:Name="newsList" Background="#00353535" BorderThickness="0,0,0,0" SelectionChanged="list_SelectionChanged">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Path=Title}" x:Name="newsTitle"/>
                            <TextBlock Width="80" Text="{Binding Path=Date}" x:Name="newsDate"/>
                        </StackPanel>
                        <TextBlock x:Name="newsContent" Text="{Binding Path=Content}"Visibility="Collapsed"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

25/05/2009, 12h57
1tsiMat

Ok...
Bon bah j'ai trouvé la solution... Très bête... Ca m'énerve que ca m'ait bloqué autant de temps...
Qu'ai-je fait pour résoudre cela?
J'ai passé l'Opacity de mon TextBlock à 1 sur l'AddedItems en plus de mettre la Visibility à Visible... Je ne comprends vraiment pas pourquoi je dois toucher l'opacité puisque je ne la touche jamais et mettre la visibilité à visible n'est pas censé mettre les paramètres par défaut de l'objet? Enfin bref, le tout soit que la solution ait été trouvée :)

Merci en tout cas Skyounet pour ta précieuse aide :)

Bonne journée tout le monde :)