Synchroniser deux ScrollViewer !

Version imprimable

14/09/2009, 15h54
Invité

Synchroniser deux ScrollViewer !

Salut,

Mon problème est le suivant :

J'ai deux ScrollViewer avec des contenus pouvant être identiques ou différents différents.

Ce que je veux c'est synchroniser la position verticale de l'un des ScrollViewer avec la position Verticale de l'autre. Mes recherches m'ont permis de savoir qu'il y a la proprieté VerticalOffset qui permet de savoir le décalage vertical du contenu défilé. Le problème c'est cette proprieté n'est pas une DP.

Quelqu'un aurait-il une solution à me proposer ?
14/09/2009, 16h52
tomlev

Citation:

Envoyé par h2s84

Le problème c'est cette proprieté n'est pas une DP.

Euh... t'es sûr ??
14/09/2009, 21h04
Invité

Citation:

Envoyé par tomlev

Euh... t'es sûr ??

Mais elle n'apparait pas dans l'intellisense de mon fichier XAML alors tous les autres y sont listées.:(.
Pas compris
14/09/2009, 21h19
Invité

Je viens de le réverifier. Je pense le problème vient du fait que la proprieté VerticalOffset est en lecture seule:?. c'est peut être à cause de ça qu'elle n'est pas listée bien qu'elle soit une dependency property.:?:?:?:?:?

Citation:

Envoyé par h2s84

Je viens de le réverifier. Je pense le problème vient du fait que la proprieté VerticalOffset est en lecture seule:?. c'est peut être à cause de ça qu'elle n'est pas listée bien qu'elle soit une dependency property.:?:?:?:?:?

Ah oui tiens, j'avais pas vu... Par contre le fait que ce soit une dependency property n'entre pas en ligne de compte, n'importe quelle propriété peut être définie en XAML... sauf si elle est en lecture seule bien sûr :aie:

De toutes façons tu dois pouvoir gérer ça en code-behind... par contre je ne vois aucun évènement de ScrollViewer pour être notifié quand le VerticalOffset change :?

EDIT : ah si, en fait il faut utiliser l'évènement Scroll de la classe ScrollBar :
Code:

1 2 3 4 5 6 7 8 9 10 11 <ScrollViewer Name="scrollViewerLeft" Grid.Column="0" ScrollBar.Scroll="scrollViewerLeft_Scroll"> ... </ScrollViewer> <ScrollViewer Name="scrollViewerRight" Grid.Column="1" ScrollBar.Scroll="scrollViewerRight_Scroll"> ... </ScrollViewer>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 private void scrollViewerLeft_Scroll(object sender, ScrollEventArgs e) { if (GetOrientation(e) == Orientation.Vertical) { scrollViewerRight.ScrollToVerticalOffset(e.NewValue); } } private void scrollViewerRight_Scroll(object sender, ScrollEventArgs e) { if (GetOrientation(e) == Orientation.Vertical) { scrollViewerLeft.ScrollToVerticalOffset(e.NewValue); } }

Allez, pendant que j'y suis... avec une petite propriété attachée, ce sera tout de suite plus propre ;)

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
    public static class ScrollHelper
    {
        private static Dictionary<string, List<ScrollViewer>> _scrollViewers = new Dictionary<string,List<ScrollViewer>>();
 
 
        public static string GetScrollGroup(ScrollViewer scrollViewer)
        {
            return (string)scrollViewer.GetValue(ScrollGroupProperty);
        }
 
        public static void SetScrollGroup(ScrollViewer scrollViewer, string value)
        {
            scrollViewer.SetValue(ScrollGroupProperty, value);
        }
 
        // Using a DependencyProperty as the backing store for ScrollGroup.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ScrollGroupProperty =
            DependencyProperty.RegisterAttached("ScrollGroup", typeof(string), typeof(ScrollHelper), new UIPropertyMetadata(null, ScrollGroupChanged));
 
        private static void ScrollGroupChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
        {
            ScrollViewer scv = o as ScrollViewer;
            if (o != null)
            {
                string oldGroup = e.OldValue as string;
                string newGroup = e.NewValue as string;
 
                if (oldGroup != null)
                {
                    List<ScrollViewer> groupMembers = null;
                    if (_scrollViewers.TryGetValue(oldGroup, out groupMembers))
                    {
                        groupMembers.Remove(scv);
                    }
                    scv.RemoveHandler(ScrollBar.ScrollEvent, _scrollHandler);
                }
 
                if (newGroup != null)
                {
                    List<ScrollViewer> groupMembers = null;
                    if (!_scrollViewers.TryGetValue(newGroup, out groupMembers))
                    {
                        groupMembers = new List<ScrollViewer>();
                        _scrollViewers.Add(newGroup, groupMembers);
                    }
                    groupMembers.Add(scv);
                    scv.AddHandler(ScrollBar.ScrollEvent, _scrollHandler);
                }
            }
        }
 
        private static ScrollEventHandler _scrollHandler = new ScrollEventHandler(scv_Scroll);
 
        private static void scv_Scroll(object sender, ScrollEventArgs e)
        {
            ScrollViewer scv = sender as ScrollViewer;
            ScrollBar scb = e.OriginalSource as ScrollBar;
            if (scv != null && scb != null)
            {
                string group = GetScrollGroup(scv);
                if (group != null)
                {
                    List<ScrollViewer> groupMembers = null;
                    if (_scrollViewers.TryGetValue(group, out groupMembers))
                    {
                        foreach (var s in groupMembers)
                        {
                            if (object.ReferenceEquals(s, scv))
                                continue;
 
                            if (scb.Orientation == Orientation.Horizontal)
                            {
                                s.ScrollToHorizontalOffset(e.NewValue);
                            }
                            else
                            {
                                s.ScrollToVerticalOffset(e.NewValue);
                            }
                        }
                    }
                }
            }
        }
 
    }

Code:

1
2
3
4
5
6
7
8
9
10
11
        <ScrollViewer Name="scrollViewerLeft"
                      Grid.Column="0"
                      my:ScrollHelper.ScrollGroup="toto">
            ...
        </ScrollViewer>
 
        <ScrollViewer Name="scrollViewerRight"
                      Grid.Column="1"
                      my:ScrollHelper.ScrollGroup="toto">
            ...
        </ScrollViewer>

(j'aime pas être obligé d'utiliser du code behind ;))

Au cas où ce serait pas clair : pour synchroniser 2 ScrollViewers, il suffit de leur donner la même valeur de ScrollHelper.ScrollGroup

15/09/2009, 01h49
Skyounet

Citation:

Envoyé par tomlev

Allez, pendant que j'y suis... avec une petite propriété attachée, ce sera tout de suite plus propre ;)

Ca ressemble à du Silverlight, ça a le gout du Silverlight mais ça marche po en Silverlight :aie:

ScrollBar.ScrollEvent ça existe po en SL.

Et pour la solution d'avant

ScrollBar.Scroll="scrollViewerLeft_Scroll"

On n'a pas ça non plus en SL...

Y'a pas moyen de gérer l'event Scroll en natif. Il y a quelques hacks, comme récupérer les ScrollBar à coup de VisualTreeHelper sur le ScrollViewer.

Après faudrait donc adapter ton/tes code(s) si possible.
15/09/2009, 02h46
tomlev

Citation:

Envoyé par Skyounet

Ca ressemble à du Silverlight, ça a le gout du Silverlight mais ça marche po en Silverlight :aie:

Argh... effectivement j'ai testé ça en WPF. Je me dis toujours qu'il faudrait que je me mette à Silverlight, mais plus ça va, plus je vois les innombrables limitations, et moins j'ai envie de m'y mettre :aie:

M'en fous, ce bout de code me resservira sûrement un jour :mrgreen:
15/09/2009, 08h59
Thomas Lebrun

Voila une solution pour récupérer la Scrollbar et son event Scroll:

http://forums.silverlight.net/forums/t/53934.aspx

La solution proposée par Olav me semble la plus adaptée ;)
15/09/2009, 10h51
Invité

Excusez moi du retard de ma réaction.

Je vois j'ai eu pas mal d'aide.

Citation:

Envoyé par tomlev

Par contre le fait que ce soit une dependency property n'entre pas en ligne de compte, n'importe quelle propriété peut être définie en XAML

. OK.

Je vois que tomlev m'a proposé un truc sympa qu'il a ensuite peaufiner en AttachedProperty mais malheureusement c'est du WPF. Merci à Skyounet d'avoir tester cela à ma place. Bref je note que pour l'instant c'est possible en WPF.

Pour l'instant je vais visiter le lien proposer par thomas.
http://forums.silverlight.net/forums/t/53934.aspx
15/09/2009, 11h14
Invité

Le lien proposer par Thomas est intéressant. La discussion propose d'utiliser ce que Skyounet m'a déjà proposer c'est à dire :

Citation:

récupérer les ScrollBar à coup de VisualTreeHelper sur le ScrollViewer.

.

Mais il me semble, après lecture du lien de thomas, qu'il n'est peut récupérer aucun des constituant du ScrollViewer.

Bon je vais tester et voir ce que cela donne. Dans tous les cas je crois que ce ne sera pas très propre pour le MVVM non ?

Citation:

Envoyé par h2s84

Mais il me semble, après lecture du lien de thomas, qu'il n'est peut récupérer aucun des constituant du ScrollViewer.

Si si, on peut... Voilà une version modifiée de ma propriété attachée, qui marche avec SL :

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
    public static class ScrollHelper
    {
        private static Dictionary<string, List<ScrollViewer>> _scrollViewers = new Dictionary<string, List<ScrollViewer>>();
 
 
        public static string GetScrollGroup(ScrollViewer scrollViewer)
        {
            return (string)scrollViewer.GetValue(ScrollGroupProperty);
        }
 
        public static void SetScrollGroup(ScrollViewer scrollViewer, string value)
        {
            scrollViewer.SetValue(ScrollGroupProperty, value);
        }
 
        // Using a DependencyProperty as the backing store for ScrollGroup.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty ScrollGroupProperty =
            DependencyProperty.RegisterAttached("ScrollGroup", typeof(string), typeof(ScrollHelper), new PropertyMetadata(null, ScrollGroupChanged));
 
        private static void ScrollGroupChanged(DependencyObject o, DependencyPropertyChangedEventArgs e)
        {
            ScrollViewer scv = o as ScrollViewer;
            if (o != null)
            {
                string oldGroup = e.OldValue as string;
                string newGroup = e.NewValue as string;
 
                if (oldGroup != null)
                {
                    List<ScrollViewer> groupMembers = null;
                    if (_scrollViewers.TryGetValue(oldGroup, out groupMembers))
                    {
                        groupMembers.Remove(scv);
                    }
                    DetachScrollEvents(scv);
                }
 
                if (newGroup != null)
                {
                    List<ScrollViewer> groupMembers = null;
                    if (!_scrollViewers.TryGetValue(newGroup, out groupMembers))
                    {
                        groupMembers = new List<ScrollViewer>();
                        _scrollViewers.Add(newGroup, groupMembers);
                    }
                    groupMembers.Add(scv);
                    if (Application.Current.Host.IsLoaded)
                    {
                        AttachScrollEvents(scv);
                    }
                    else
                    {
                        scv.Loaded += new RoutedEventHandler(scv_Loaded);
                    }
                }
            }
        }
 
        static void scv_Loaded(object sender, RoutedEventArgs e)
        {
            ScrollViewer scv = sender as ScrollViewer;
            if (scv != null)
            {
                scv.ApplyTemplate();
                scv.Loaded -= scv_Loaded;
                AttachScrollEvents(scv);
            }
        }
 
        private static void DetachScrollEvents(ScrollViewer scv)
        {
            ScrollBar vert = GetScrollBar(scv, "VerticalScrollBar");
            ScrollBar horz = GetScrollBar(scv, "HorizontalScrollBar");
            if (vert != null)
                vert.Scroll -= scv_Scroll;
            if (horz != null)
                horz.Scroll -= scv_Scroll;
        }
 
        private static void AttachScrollEvents(ScrollViewer scv)
        {
            ScrollBar vert = GetScrollBar(scv, "VerticalScrollBar");
            ScrollBar horz = GetScrollBar(scv, "HorizontalScrollBar");
            if (vert != null)
                vert.Scroll += scv_Scroll;
            if (horz != null)
                horz.Scroll += scv_Scroll;
        }
 
        private static ScrollBar GetScrollBar(ScrollViewer scv, string scrollBarName)
        {
            var firstChild = VisualTreeHelper.GetChild(scv, 0) as FrameworkElement;
            if (firstChild != null)
            {
                return firstChild.FindName(scrollBarName) as ScrollBar;
            }
            return null;
        }
 
        private static void scv_Scroll(object sender, ScrollEventArgs e)
        {
            ScrollBar scb = e.OriginalSource as ScrollBar;
            ScrollViewer scv = FindParent<ScrollViewer>(scb);
            if (scv != null && scb != null)
            {
                string group = GetScrollGroup(scv);
                if (group != null)
                {
                    List<ScrollViewer> groupMembers = null;
                    if (_scrollViewers.TryGetValue(group, out groupMembers))
                    {
                        foreach (var s in groupMembers)
                        {
                            if (object.ReferenceEquals(s, scv))
                                continue;
 
                            if (scb.Orientation == Orientation.Horizontal)
                            {
                                s.ScrollToHorizontalOffset(e.NewValue);
                            }
                            else
                            {
                                s.ScrollToVerticalOffset(e.NewValue);
                            }
                        }
                    }
                }
            }
        }
 
        private static T FindParent<T>(DependencyObject o) where T : DependencyObject
        {
            DependencyObject tmp = o;
            while (tmp != null && !(tmp is T))
            {
                tmp = VisualTreeHelper.GetParent(tmp);
            }
            return tmp as T;
        }
 
    }

C'est quand même un peu plus galère qu'avec WPF :?

15/09/2009, 11h25
Invité

Résoluuuuuuuuuuuuuuuuuuu..

Merci à tout le monde et surtout à tomlev.:ccool::ccool::ccool::ccool::ccool::ccool::ccool:

Ben il va falloir que je regarde comment t'as fait.

Encore Merci
15/09/2009, 11h52
Invité

Au fait, il y a un p'tit problème qui provient de mon côté.

J'ai teste ta classe Scrollhelper et elle merche à merveille. Mais j'ai voulu la transférer sur mon projet MVVM.

J'ai appliqué la proprieté attachée sur deux scrollviewer d'un TemplatedControl. Mais cela m'engendre une erreur d'exécution dans la méthode GetScrollBar.

L'erreur affichée est la suivante :

Citation:

An exception of type 'System.ArgumentOutOfRangeException' occurred in System.Windows.dll but was not handled in user code

Additional information: L'argument spécifié n'était pas dans les limites de la plage de valeurs valides.

Cette est déclenchée par l'instrcution VisualTreeHelper.GetChild(scv, 0).

Un ArgumentOutOfRangeException entraine que mon ScrollViewer ne contient pas d'éléments parce que le deuxième paramètre passé est 0 qui est la valeur minimale à ce que je pense:aie:.

Quelqu'un a-t-il une idée sur le problème.

Il faut noter que mes ScrollViewer sont définis dans le fichier generic.xaml qui contient le thème d'un TemplatedControl.

Merci.
15/09/2009, 12h15
tomlev

Argh... c'est parce que le contenu du ScrollViewer n'est pas encore chargé à ce stade je pense... J'avais pris des précautions par rapport à ça, mais il y a peut-être un truc particulier dans le cas d'un template. Je tâcherai de regarder ça quand j'aurai un moment...
15/09/2009, 12h19
Invité

Citation:

Envoyé par tomlev

Argh... c'est parce que le contenu du ScrollViewer n'est pas encore chargé à ce stade je pense...

je ne pense pas que ce soit à l'origine du problème du fait j'ai essayé d'attaché ton AttachedProperty dans le code dans la méthode redéfinie OnApplyTemplate.
15/09/2009, 12h22
tomlev

Citation:

Envoyé par h2s84

je ne pense pas que ce soit à l'origine du problème du fait j'ai essayé d'attaché ton AttachedProperty dans le code dans la méthode redéfinie OnApplyTemplate.

ah... essaie de le faire à la fin de cette méthode alors, après avoir appelé base.OnApplyTemplate
15/09/2009, 12h32
Invité

Citation:

Envoyé par tomlev

ah... essaie de le faire à la fin de cette méthode alors, après avoir appelé base.OnApplyTemplate

Appliquer mais ça ne marche.

C'est après l'avoir placé dans le gestionnaire de l'évènement Loaded de mon TemplatedControl que ça finalement marché. T'avais raison sur le chargement des ScrollViewer.

Encore Merci.
15/09/2009, 13h47
Thomas Lebrun

Citation:

Envoyé par h2s84

Appliquer mais ça ne marche.

C'est après l'avoir placé dans le gestionnaire de l'évènement Loaded de mon TemplatedControl que ça finalement marché. T'avais raison sur le chargement des ScrollViewer.

Normal: dans le OnApplyTemplate, le template n'est pas encore chargé (il est en cours de chargement) donc si tu essayes d'accéder à l'un des éléments de ce template => erreur.
15/09/2009, 13h59
tomlev

Citation:

Envoyé par Thomas Lebrun

Normal: dans le OnApplyTemplate, le template n'est pas encore chargé (il est en cours de chargement) donc si tu essayes d'accéder à l'un des éléments de ce template => erreur.

En fait, en suivant le lien que tu as donné, je suis tombé sur un autre lien qui explique le fonctionnement. En gros, dans l'évènement Loaded du contrôle, le contenu n'est pas forcément déjà chargé, mais tu peux appeler ApplyTemplate puis accéder au visual tree du contrôle
15/09/2009, 14h56
Invité

Citation:

Envoyé par tomlev

En fait, en suivant le lien que tu as donné, je suis tombé sur un autre lien qui explique le fonctionnement. En gros, dans l'évènement Loaded du contrôle, le contenu n'est pas forcément déjà chargé, mais tu peux appeler ApplyTemplate puis accéder au visual tree du contrôle

Tes affirmations m'ont poussé à aller voir sur MSDN, et à ça confirme ce que tu viends de dire. D'après MSDN :

Citation:

Durée de vie des objets Control et Loaded
Le minutage de l'événement Loaded dans Silverlight diffère du minutage de l'événement FrameworkElement.Loaded dans WPF. En particulier, l'événement WPF Loaded se produit après que le modèle a été appliqué. Dans Silverlight, il n'est pas garanti que l'événement Loaded se produise après que le modèle a été appliqué. Cela peut constituer un problème pour vous si vous utilisez l'événement Loaded pour un scénario de contrôle relativement courant : vous souhaitez examiner l'arborescence d'éléments visuels, soit pour obtenir une valeur comme source pour quelque chose d'autre, soit pour modifier une valeur dans la composition basée sur un modèle dans laquelle vous pouvez connaître la nouvelle valeur qu'au moment de l'exécution. Dans ce cas, les appels aux méthodes Silverlight VisualTreeHelper pour examiner l'arborescence d'éléments visuels du contenu du modèle peuvent ne pas fonctionner si vous les faites directement à partir d'un gestionnaire Loaded.

Il y a trois solutions proposées par Microsoft mais je pense pas que la dernière soit meilleure aux deux premières vu que LayoutUpdated peut être déclenché plusieurs fois alors Loaded l'est une seule fois.
28/12/2010, 14h42
yohann_

Et finalement ?

Hello,

J'aurais bien aimé savoir comment tu l'as géré dans le code finalement et précisément...