Binding entre élément scrollViewer/ScrollBar

Version imprimable

Bonjour,

J'ai besoin de contrôler un scrollViewer via un scrollBar.
Pour cela je me suis dit qu'un petit binding entre éléments pourrait m'aider, mais je m'emmele les pinceaux entre les propriétés respectives de ces 2 contrôles.
Code:

1 2 3 4 5 6 7 8 9 10 <ScrollViewer Name="scroller1"> <StackPanel Name="myPanel"Orientation="Vertical" .... </StackPanel> </ScrollViewer> </Border> <ScrollBar Name="scroller2" Orientation="Vertical" Value="{Binding ElementName=scroller1, Mode=TwoWay}" />
voilà un extrait de mon code qui ne fonctionne pas '^_^
L'idée serait de contrôler scroller1 via scroller2
quelqu'un à une idée SVP ?

Merci d'avance.

31/01/2011, 19h43
Samuel Blanchard

Il te manque un Path=VerticalOffset dans ton binding, je pense.
31/01/2011, 20h40
Alkazaar
Merci de ta réponse.

effectivement le rajout de path=VerticalOffset dans mon binding à changé la donne, maintenant ca bouge ! :)

Le hic, c'est que là c'est mon scroll1 qui contrôle mon scroll2 et c'est le comportement inverse qui m'interesse.

Aurais-je pris le problème à l'envers ?

Ducoup j'ai testé:
Code:

1 2 3 4 5 <ScrollViewer Name="scroller1" VerticalOffset="{Binding ElementName=scroller2, Path=Value, Mode=TwoWay}"> <ScrollBar Name="scroller2" Orientation="Vertical" Grid.Column="1" />
qui me renvoie une erreur à l'execution.

Une idée ?
31/01/2011, 22h56
Invité

Salut,

C'est normal, que t'es une erreur à l'exécution parce que dans ta liaison de données tu veux que la propriété VerticalOffset de ton ScrollViewer soit "setter" alors que le set de cette propriété est défini en internal.
31/01/2011, 23h40
Alkazaar

ok h2s84 merci de ta réponse.

Donc si j'ai bien compris mon binding ne fonctionne que dans un sens car le set de la propriété VerticalOffset du ScrollViewer est 'private' ?

donc je ne pourrait pas 'binder' le VerticalOffset de mon scrollBar vers celui du scrollViewer ?
01/02/2011, 01h43
Alkazaar
Bon je vais expliquer mon problème autrement..

pour résumer ma page est structurée ainsi:
Code:

1 2 3 4 5 6 7 8 <Grid1> <scrollbar/> <Grid2> <stackPanel/> </Grid2> </Grid1>
L'idée c'est que mon scrollBar doit faire défiler le contenu de mon stackpanel sans faire bouger ma Grid2.

Ne captant pas trop comment parametrer mon scrollBar pour qu'il 'scroll' quelque chose, j'en suis venu à l'idée tordue d'encapsuler mon stackPanel dans un scrollViewer (qui fonctionne bien tout seul), de le rendre invisible, et de 'Binder' le ScrollBar sur le ScrollViewer, apparement cela n'est pas possible.

donc bêtement j'en viens à la question : quelqu'un pourrait-il m'expliquer comment utiliser le ScrollBar ?

car j'en ai marre de m'arracher les cheveux sur la doc msdn qui en gros dit qu'un ScrollBar ca sert à 'scroller' :ccool:

Ps: je suis débutant en .Net
01/02/2011, 08h50
Invité

Citation:

Envoyé par Alkazaar

Donc si j'ai bien compris mon binding ne fonctionne que dans un sens car le set de la propriété VerticalOffset du ScrollViewer est 'private' ?

exact. Sauf que c'est en internal (à peu près pareil).

Citation:

Envoyé par Alkazaar

donc je ne pourrait pas 'binder' le VerticalOffset de mon scrollBar vers celui du scrollViewer ?

Logiquement.
01/02/2011, 14h18
Alkazaar
Bon j'ai bien compris pourquoi ma bidouille ne fonctionnerais pas..

Maintenant ma question est : comment parvenir à mes fins quant à la structure de ma page ? j'ai besoin d'un scroll en bordure de ma page(Silverlight) qui ne fasse défiler qu'un seul élément(StackPanel) de la-dite page

Ne captant toujours pas comment faire fonctionner le ScrollBar, je me suis tourné vers une autre idée..

j'ai vu que le stackPanel implémente l'interface IScrollInfo afin de prendre en charge le défilement,et que IScrollInfo contient une propriété publique 'ScrollOwner' donc j'ai tenté:
Code:

1 2 3 4 5 6 7 8 9 <Grid1> <scrollViewer Name="scroller"> <Grid2> <stackPanel/> </Grid2> </ScrollViewer> </Grid1>
avec dans mon code behind :
Code:

1 2 3 4 IScrollInfo sv = myPanel as IScrollInfo; sv.ScrollOwner = scroller;
qui me renvoie une erreur à l'execution..:cry:

Problème toujours pas résolu..je ne vois vraiment pas comment me dépatouiller de ce foutus Scroll

[Edit]
Oups j'ai oublié de préciser que 'myPanel' est le nom de mon StackPanel.
[/Edit]
01/02/2011, 17h26
Invité

J'avais à peu près eu le même problème que toi il y a un an.
La discussion se trouve ici.
01/02/2011, 18h26
Alkazaar

Merci de ton aide, j'ai été voir le post que tu m'a indiqué, et je t'avoue que les propriétés de dépendances dépassent un peu ma compréhension actuelle..

Par contre je pense qu'il y a quelque chose à creuser du coté de l'occurence des évenements 'Loaded' car sur la dernière solution que j'ai testé l'erreur levée est une 'nullReferenceException', je vais gratter de ce coté là, peut-être plus abordable pour moi.

En espérant ne pas avoir compris de travers l'objet de la propriété 'ScrollOwner' de IScrollInfo.
01/02/2011, 20h21
Alkazaar
Bon quelque soit l'évenement que j'utilise j'ai systématiquement une erreur à l'execution(NullReferenceException) lorsque je fais:
Code:

1 2 3 4 5 IScrollInfo sv = myPanel as IScrollInfo; sv.ScrollOwner = scroller1; sv.SetVerticalOffset(scroller1.VerticalOffset);
ca fait 2 jours que je planche sur cette satanée ScrollBar en vain.
quelque soit les forums que je parcours, dès que quelqu'un demande comment utiliser une ScrollBar la réponse est toujours "utilise plutot un ScrollViewer.." et msdn n'est pas beaucoup plus bavard à ce sujet. Et je me vois mal mettre un ScrollViewer au beau milieu de ma page.

Ma problèmatique ayant évoluée au fil de ce post je vais la reformuler de manière plus explicite :

Comment naviguer au sein d'un stackPanel à l'aide d'une ScrollBar ?
01/02/2011, 20h29
Invité

Citation:

Envoyé par Alkazaar

Comment naviguer au sein d'un stackPanel à l'aide d'une ScrollBar ?

Encore plus explicite : comment déplacer le ScrollBar d'un StackPanel à partir du code ? :ccool:

Citation:

Envoyé par Alkazaar

Merci de ton aide, j'ai été voir le post que tu m'a indiqué, et je t'avoue que les propriétés de dépendances dépassent un peu ma compréhension actuelle..

Ah les propriétés de dépendances, ça fait peur quand on les définies mais d'une grande utilité. :lol:

Bon pour info, j'ai un peu appris quelques petits trucs mais utiles grâce à ton problème.
D'après MSDN, la proprieté ScrollOwner sur laquelle tu t'acharnais tant dans tes derniers posts n'est pas renseignée par défaut.Plus d'infos voir ici.
Donc du coup c'est à toi de renseigner cette proprieté en lui assignant l'instance du contrôle ScrollViewer qui englobe ton StackPanel.

Code:

1
2
 
tonStackPanel.ScrollOwner = tonScrollViewerEnglobantTOnStackPanel;

Vu que t'es allergique aux propriétés de dépendances, je t'ai dégoté deux solutions mais la deuxième est plus propre car indépendante du panel.

La première solution utilise des propriétés de dépendance 'simples' créées dans une classe dérivant de la classe StackPanel. Donc en gros je crée un contrôle utilisateur nommé CustomStackPanel.

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
 
public class CustomStackPanel : StackPanel
{
	public static readonly DependencyProperty CustomVerticalOffsetProperty = DependencyProperty.Register("CustomVerticalOffset", typeof(double), typeof(StackPanel), new PropertyMetadata(CustomVerticalOffsetChanged));
	public static readonly DependencyProperty CustomScrollOwnerProperty = DependencyProperty.Register("CustomScrollOwner", typeof(ScrollViewer), typeof(StackPanel), new PropertyMetadata(ScrollOwnerChanged));
 
	public double CustomVerticalOffset
	{
		get { return (double)this.GetValue(CustomVerticalOffsetProperty); }
		set { this.SetValue(CustomVerticalOffsetProperty, value); }
	}
 
	public ScrollViewer CustomScrollOwner
	{
		get { return (ScrollViewer)this.GetValue(CustomScrollOwnerProperty); }
		set { this.SetValue(CustomScrollOwnerProperty, value); }
	}
 
	public static void CustomVerticalOffsetChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
	{
		IScrollInfo panel = obj as IScrollInfo;
		if(panel == null) return;
		if(panel.ScrollOwner == null) throw new Exception("Vous devez définir l'objet ScrollViewer à utiliser pour cela renseigner la proprieté ScrollOwner de votre panel");
 
		double oldValue = (double)e.OldValue;
		double newValue = (double)e.NewValue;
		panel.ScrollOwner.ScrollToVerticalOffset(panel.ScrollOwner.VerticalOffset + (newValue - oldValue));
	}
 
	public static void ScrollOwnerChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
	{
		IScrollInfo panel = obj as IScrollInfo;
		if (panel == null) return;
		panel.ScrollOwner = e.NewValue as ScrollViewer;
	}
}

La deuxième solution utilise des propriétés de dépendance attachées. Je préfère cette solution parce qu'elle est indépendante du contrôle sur lequel on va attacher la propriété et il suffit juste que le panel qui l"utilise implémente l'interface IScrollInfo et c'est le cas avec le contrôle StackPanel.

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
 
public class SrollInfoBehavior
{
	public static readonly DependencyProperty VerticalOffsetProperty = DependencyProperty.RegisterAttached("VerticalOffset", typeof(double), typeof(SrollInfoBehavior), new PropertyMetadata(VerticalOffsetChanged));
	public static readonly DependencyProperty ScrollOwnerProperty = DependencyProperty.RegisterAttached("ScrollOwner", typeof(ScrollViewer), typeof(SrollInfoBehavior), new PropertyMetadata(ScrollOwnerChanged));
 
	public static void SetVerticalOffset(UIElement element, object value)
	{
		element.SetValue(VerticalOffsetProperty, value);
	}
 
	public static double GetVerticalOffset(UIElement element)
	{
		return (double)element.GetValue(VerticalOffsetProperty);
	}
 
	public static void SetScrollOwner(UIElement element, ScrollViewer scrollViewer)
	{
		element.SetValue(ScrollOwnerProperty, scrollViewer);
	}
 
	public static ScrollViewer GetScrollOwner(UIElement element)
	{
		return (ScrollViewer)element.GetValue(ScrollOwnerProperty);
	}
 
	public static void VerticalOffsetChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
	{
		IScrollInfo panel = obj as IScrollInfo;
		if(panel == null) return;
		if(panel.ScrollOwner == null) throw new Exception("Vous devez définir l'objet ScrollViewer à utiliser pour cela renseigner la proprieté ScrollOwner de votre panel");
 
		double oldValue = (double)e.OldValue;
		double newValue = (double)e.NewValue;
		panel.ScrollOwner.ScrollToVerticalOffset(panel.ScrollOwner.VerticalOffset + (newValue - oldValue));
	}
 
	public static void ScrollOwnerChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
	{
		IScrollInfo panel = obj as IScrollInfo;
		if (panel == null) return;
		panel.ScrollOwner = e.NewValue as ScrollViewer;
	}
}

Pour utiliser la première solution :

Code:

1
2
3
4
5
 
<ScrollViewer x:Name="myScrollViewer">
	 <local:CustomStackPanel CustomScrollOwner="{Binding ElementName=myScrollViewer}" CustomVerticalOffset="{Binding Value, ElementName=myScrollBar}" >
</ScrollViewer>
<ScrollBar x:Name="myScrollBar" Width="20" Height="200" Minimum="0" Maximum="500" SmallChange="10" LargeChange="10"/>

Pour utiliser la deuxième solution :

Code:

1
2
3
4
5
 
<ScrollViewer x:Name="myScrollViewer">
	<StackPanel local:SrollInfoBehavior.ScrollOwner="{Binding ElementName=myScrollViewer}" local:SrollInfoBehavior.VerticalOffset="{Binding Value, ElementName=myScrollBar}" >
</ScrollViewer>
<ScrollBar x:Name="myScrollBar" Width="20" Height="200" Minimum="0" Maximum="500" SmallChange="10" LargeChange="10"/>

Dans les deux exemples local représente l'espace de nom importé dans le xaml des différentes classes. Il faut noter aussi qu'on utilise la liaison de données donc tu vas pas te casser la tête à chercher quel évènement gérer. :ccool:

J'espère que cela répond à ton problème.

01/02/2011, 23h32
Alkazaar

Wouaw Merci infiniment, c'est pas une épine mais un tronc d'arbre que tu m'enlève du pied ! :P

Je me met la dessus et te tiens au courant dès que c'est mis en place.
02/02/2011, 00h46
Alkazaar

Gasp....pour le moment je n'arrive à faire fonctionner aucune des 2 solutions :aie:
02/02/2011, 01h29
Alkazaar
Pour importer l'espace de nom de mes classes j'ai mis :
Code:

1 2 3 xmlns:local="clr-namespace:MonEspaceDeNom"
mais je ne pense pas que le problème vienne de là car les classes sont reconnues dans mon XAML.

J'ai testé les 2 classes en mode debug, et pour les 2 classes l'execution de la méthode VerticalOffsetChanged foire à tout les coups.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
 
 public static void VerticalOffsetChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
        {
            IScrollInfo panel = obj as IScrollInfo;
            if (panel == null) return;
            if (panel.ScrollOwner == null) throw new Exception("Vous devez définir l'objet ScrollViewer à utiliser pour cela renseigner la proprieté ScrollOwner de votre panel");
 
            double oldValue = (double)e.OldValue;
            double newValue = (double)e.NewValue;
            panel.ScrollOwner.ScrollToVerticalOffset(panel.ScrollOwner.VerticalOffset + (newValue - oldValue));
        }

l'execution quitte la méthode à

Code:

1
2
3
 
 
 if (panel == null) return;

Pourtant j'ai bien le stackPanel dans 'obj' ....oO

Oh mon Dieu on est en Silverlight 8O.

Je savais bien que la discussion était postée dans le forum Silverlight et vu que j'ai cru qu'en testant la solution en WPF ça allait marcher et ben non !. :aie:

Pourquoi ?
Parce StackPanel n'implémente pas l'interface IScrollInfo. :cry:

Une solution qui marche avec WPF et Silverlight est d'utiliser la classe ci-dessous :
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 public class ScrollViewerBehavior { public static readonly DependencyProperty VerticalOffsetProperty = DependencyProperty.RegisterAttached("VerticalOffset", typeof(double), typeof(ScrollViewerBehavior), new PropertyMetadata(VerticalOffsetChanged)); public static void SetVerticalOffset(UIElement element, object value) { element.SetValue(VerticalOffsetProperty, value); } public static double GetVerticalOffset(UIElement element) { return (double)element.GetValue(VerticalOffsetProperty); } public static void VerticalOffsetChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e) { ScrollViewer scrollViewer = obj as ScrollViewer; if (scrollViewer == null) return; double oldValue = (double)e.OldValue; double newValue = (double)e.NewValue; scrollViewer.ScrollToVerticalOffset(scrollViewer.VerticalOffset + (newValue - oldValue)); } }
La propriété attachée définie dans la classe ci-dessous s'applique à un contrôle ScrollViewer comme suit :
Code:

1 2 3 4 5 <ScrollViewer x:Name="myScrollViewer" Height="50" local:ScrollViewerBehavior.VerticalOffset="{Binding Value, ElementName=myScrollBar, Mode=OneWay}" > <StackPanel x:Name="stackPanel" /> </ScrollViewer> <ScrollBar x:Name="myScrollBar" Minimum="0" Maximum="500" SmallChange="10" LargeChange="10" />
Fournir une deuxième solution en dérivant de la classe ScrollViewer est impossible parce que cette dernière est ne peut être héritée en Silverlight mais avec WPF c'est possible. (Bon sais pas pourquoi :mrgreen:).

02/02/2011, 13h15
Alkazaar

Hiiii Haaaa effectivement le problème venait de là. La classe ScrollViewerBehavior
marche comme sur des 'scrollettes' !!! :ccool::ccool::ccool

Je t'envoies pas de bouquet de fleur mais le coeur y est ;) Merci encore.