Accueil > Silverlight, WPF > Comment synchroniser le contenu de deux ScrollViewer ?

Comment synchroniser le contenu de deux ScrollViewer ?

J’ai eu à travailler à mes débuts en WPF 😉 sur un projet où je devais faire la synchronisation du contenu de deux ScrollViewer. Pour y arriver j’ai dû passer par les propriétés de dépendances attachées et ainsi bénéficier du binding entre les propriétés VerticalOffset des deux contrôles. Pour infos la proprieté VerticalOffset du contrôle ScrollViewer est en lecture .

Le code que j’ai mis en place et qui m’a permis d’arriver à mes fins est le suivant :

public class ScrollViewerBehaviors
{
	public static readonly DependencyProperty VerticalOffsetProperty = DependencyProperty.RegisterAttached("VerticalOffset", typeof(double), typeof(ScrollViewerBehaviors), new PropertyMetadata(0.0, ScrollViewerBehaviors.offsetChanged));
	public static readonly DependencyProperty HorizontalOffsetProperty = DependencyProperty.RegisterAttached("HorizontalOffset", typeof(double), typeof(ScrollViewerBehaviors), new PropertyMetadata(0.0, ScrollViewerBehaviors.offsetChanged));

	public static double GetVerticalOffset(UIElement scrollViewer)
	{
		return (Double)scrollViewer.GetValue(ScrollViewerBehaviors.VerticalOffsetProperty);
	}
	public static void SetVerticalOffset(UIElement scrollViewer, object value)
	{
		scrollViewer.SetValue(ScrollViewerBehaviors.HorizontalOffsetProperty, value);
	}

	public static double GetHorizontalOffset(UIElement scrollViewer)
	{
		return (Double)scrollViewer.GetValue(ScrollViewerBehaviors.HorizontalOffsetProperty);
	}
	public static void SetHorizontalOffset(UIElement scrollViewer, object value)
	{
		scrollViewer.SetValue(ScrollViewerBehaviors.HorizontalOffsetProperty, value);
	}

	private static void offsetChanged(DependencyObject depObj, DependencyPropertyChangedEventArgs e)
	{
		ScrollViewer scrollViewer = depObj as ScrollViewer;
		if (scrollViewer == null) return;

		double offset = e.NewValue == null ? 0 : (double)e.NewValue;
		switch (e.Property.Name)
		{
			case "VerticalOffset":
				scrollViewer.ScrollToVerticalOffset(offset);
				break;

			case "HorizontalOffset":
				scrollViewer.ScrollToHorizontalOffset(offset);
				break;
		}
	}
}

Côté interface rien de plus simple tout se fait dans le xaml :

<Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
         
        <ScrollViewer x:Name="scrollViewerOne" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" 
                      local:ScrollViewerBehaviors.VerticalOffset="{Binding ElementName=scrollViewerTwo, Path=VerticalOffset, Mode=OneWay}"
                      local:ScrollViewerBehaviors.HorizontalOffset="{Binding ElementName=scrollViewerTwo, Path=HorizontalOffset, Mode=OneWay}">
            <Image Source="/Chrysanthemum.jpg" Width="1000" />
        </ScrollViewer>

        <ScrollViewer Grid.Column="1" x:Name="scrollViewerTwo" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" 
                      local:ScrollViewerBehaviors.VerticalOffset="{Binding ElementName=scrollViewerOne, Path=VerticalOffset, Mode=OneWay}"
                      local:ScrollViewerBehaviors.HorizontalOffset="{Binding ElementName=scrollViewerOne, Path=HorizontalOffset, Mode=OneWay}">
            <Image Source="/Chrysanthemum.jpg" Width="1000" />
        </ScrollViewer>
    </Grid>
Publicités
Catégories :Silverlight, WPF Étiquettes : , ,
  1. Aucun commentaire pour l’instant.
  1. No trackbacks yet.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :