Animation Items ListBox

**1tsiMat** · 22/05/2009, 20h56

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

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

**Skyounet** · 22/05/2009, 21h17

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.

**1tsiMat** · 22/05/2009, 21h47

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

**Skyounet** · 23/05/2009, 02h52

Envoyé par 1tsiMat

Ou alors si tu sais comment y accéder

Attention le code

Code c# :

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

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

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>

**1tsiMat** · 24/05/2009, 17h21

Ok merci, je test ca

**1tsiMat** · 24/05/2009, 18h22

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

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 c# :

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

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

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>

Animation Items ListBox

Silverlight

Vue hybride

Discussions similaires

Partager

Partager